---
title: Ionic 템플릿 프로젝트 설정 및 시작 가이드
slug: docs-kr/js-framework/ionic/ionic-template
description: Ionic 앱 템플릿 다운로드 및 프로젝트 설정을 통해 개발 시작하는 방법을 알아보세요.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-07T13:57:29.159Z
---
# 앱 템플릿에서 Ionic 프로젝트 시작하기
## 소개
이 섹션에서는 Ionic 템플릿으로 시작하고 Back4App을 사용하기 위해 준비하는 방법을 4단계로 배웁니다.
## 전제 조건
:::hint{type="info"}
**이 빠른 시작을 완료하려면 다음이 필요합니다:**
- [Visual Studio Code ](https://code.visualstudio.com/download)(또는 원하는 웹 IDE).
- [Ionic Framework ](https://ionicframework.com/getting-started/)
- Back4App에서 생성된 앱.
- 다음 [새 Parse 앱 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요.
:::
## 1 - 템플릿 가져오기
1. 템플릿을 다운로드하여
[GitHub 저장소](https://github.com/back4app/ionic-quickstart-example), 그리고 프로젝트 폴더에 파일을 압축 해제하세요. 다음 명령어를 사용하여 수행할 수 있습니다:
:::BlockQuote
$ curl -LOk https\://github.com/back4app/ionic-quickstart-example/archive/master.zip && unzip master.zip
:::
2\. 추출된 폴더로 이동하여 다음 명령어를 사용하여 종속성을 설치하세요:
:::BlockQuote
$ cd ionic-quickstart-example-master && npm install
:::
## 2 - 프로젝트 템플릿 열기
1. 비주얼 스튜디오 코드 열기.
2. 클릭 `폴더 열기`.
3\. 프로젝트 폴더로 이동하고 클릭 `확인`.
4\. 비주얼 스튜디오가 열릴 때까지 기다리세요.
## 3 - 앱의 자격 증명 설정
앱의 자격 증명을 설정하기 위해 문자열 값을 업데이트하세요. Parse Javascript SDK는 이러한 설정을 사용하여 Back4App 서버에 연결합니다. 그렇게 하려면 다음 단계를 따르세요:
1. 홈 타입스크립트 파일 열기:`.../src/pages/home/home.ts`
2\. [Back4App 웹사이트](https://www.back4app.com/)로 이동하세요.
3\. 앱의 설정으로 이동하세요: `서버 설정` > `코어 설정` 블록 > `설정`.
4\. `home.ts` 파일로 돌아가서 `앱 ID`와 `JavaScript 키`를 붙여넣으세요.
:::hint{type="info"}
자세한 내용은 [새 Parse 앱 가이드](https://www.back4app.com/docs/get-started/new-parse-app)를 참조하세요.
:::
## 4 - 연결 테스트
1. 브라우저에서 앱을 실행하세요.
:::BlockQuote
$ ionic serve
:::
1\. 브라우저에서 새 탭이 열릴 때까지 기다리세요.
:::hint{type="success"}
**I**페이지를 전화 프레임에서 보려면 `F12`를 누르세요.
:::
2\. [Back4App 웹사이트](https://www.back4app.com/)에 로그인하세요.
3\. 앱을 찾아서 `대시보드`를 클릭하세요.
4\. `코어`를 클릭하세요.
5\. `브라우저`로 가세요.
모든 것이 제대로 작동하면, 다음과 같이 `설치`라는 클래스를 찾을 수 있어야 합니다.
### 완료되었습니다!
이 시점에서 Ionic 앱을 시작하는 방법을 배웠습니다.