---
title: Ionic 프로젝트에 Parse JavaScript SDK 설치 및 연결 가이드
slug: docs-kr/js-framework/ionic/parse-ionic-sdk
description: Ionic에 Parse SDK 설치 및 연결 방법. JavaScript SDK로 3단계에서 프로젝트 준비 시작하기.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-08T13:12:25.154Z
---
# 사전 제작된 템플릿을 사용하여 Ionic 프로젝트 시작하기
## 소개
이 섹션에서는 Ionic 프로젝트에 Parse JavaScript SDK를 설치하는 방법을 배웁니다.
:::hint{type="success"}
Parse SDK에 대한 자세한 내용은 [Parse JavaScript SDK API 참조](https://parseplatform.org/Parse-SDK-JS/api/4.3.1/) 및 [Parse 오픈 소스 문서(JavaScript SDK용)](https://docs.parseplatform.org/js/guide/).
:::
## 전제 조건
:::hint{type="info"}
**이 튜토리얼을 완료하려면 다음이 필요합니다:**
- Back4App에서 생성된 앱.
- 다음 [새 Parse 앱 튜토리얼 ](https://www.back4app.com/docs/get-started/new-parse-app)을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요.
- 시작된 Ionic 프로젝트.
- 다음 [시작하기 ](https://ionicframework.com/docs/intro/cli) 튜토리얼을 따라 설정하지 않았다면 설정하세요.
:::
## 1 - SDK 설치
Ionic 패키지는 `npm`, 따라서 프로젝트 폴더 수준에서 다음 명령을 실행하기만 하면 됩니다:
:::BlockQuote
$ npm install parse
:::
## 2 - Parse 앱 연결
다음에서 `Parse`를 가져옵니다 `home.ts` 또는 사용하려는 페이지에서:
:::CodeblockTabs
home.ts
```typescript
1 import Parse from 'parse';
```
:::
다음 속성을 사용하여 Back4app parse 서버의 URL을 설정하십시오.`Parse.serverURL`.
:::CodeblockTabs
home.ts
```typescript
1 Parse.serverURL = 'https://parseapi.back4app.com/';
```
:::
다음 메서드를 사용하여 인증 토큰을 설정하고 페이지를 Back4App 서버에 연결하십시오.`Parse.initialize`.
:::CodeblockTabs
home.ts
```typescript
1 Parse.initialize("YOUR-APP-ID", "YOUR-JS-KEY");
```
:::
**애플리케이션 ID와 클라이언트 키를 찾으십시오.**
1. Back4App 웹사이트에서 앱 대시보드로 이동하십시오.
2. 앱의 설정으로 이동하십시오: `서버 설정` > `코어 설정` 블록 > `설정`.
3. Parse.Initialize 함수로 돌아가서 `applicationId`와 `javaScriptKey`를 붙여넣으십시오.
## 3 - 연결 테스트
**테스트 코드를 생성하십시오.**
다음 코드를 사용하여 초기 설정을 테스트하십시오. 이 코드는 `설치` 객체를 생성합니다.
먼저, 앱에서 결과를 표시할 변수를 생성하세요 `홈` 페이지.
:::CodeblockTabs
home.ts
```typescript
1 result: string;
```
:::
다음으로, 해당 변수를 `홈` 뷰에 표시하세요.
:::CodeblockTabs
home.html
```html
1
2 {{result}}
3
```
:::
마지막으로, `설치` 객체를 인스턴스화하고 저장하는 코드를 추가하세요.
통신 설정 후 이 코드를 추가하세요.
:::CodeblockTabs
home.ts
```typescript
1 let install = new Parse.Installation();
2
3 install.save(null, {
4 success: (install) => {
5 // Execute any logic that should take place after the object is saved.
6 this.result = 'New object created with objectId: ' + install.id;
7 },
8 error: (install, error) => {
9 // Execute any logic that should take place if the save fails.
10 // error is a Parse.Error with an error code and message.
11 this.result = ('Failed to create new object, with error code:' + error.message.toString());
12 }
13 });
```
:::
1. 브라우저에서 앱을 실행하세요.
:::BlockQuote
$ ionic serve
:::
2\. 브라우저에서 새 탭이 열릴 때까지 기다리세요.
:::hint{type="success"}
**I** 페이지를 전화 프레임에서 보려면 `F12`를 누르세요.
:::
3\. [Back4App 웹사이트에 로그인하세요.](https://www.back4app.com/)
4\. 앱을 찾아서 `대시보드`를 클릭하세요.
5\. `코어`를 클릭하세요.
6\. `브라우저`로 가세요.
모든 것이 제대로 작동하면, 다음과 같이 `설치`라는 클래스를 찾을 수 있어야 합니다.
## 완료되었습니다!
이 시점에서, Ionic 앱을 시작하는 방법을 배웠습니다.