---
title: 앵귤러 개발을 위한 템플릿 활용 시작 가이드
slug: docs-kr/js-framework/angular-template
description: 앵귤러 CLI 설치부터 앱 자격 증명 설정, 배포까지의 단계별 가이드입니다.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-07T13:24:34.029Z
---
# 미리 만들어진 템플릿을 사용하여 Angular 프로젝트 시작하기
## 소개
이 섹션에서는 Parse를 설치하고 **Angular 8** 앱을 5단계로 시작하는 방법을 배웁니다.
언제든지 이 튜토리얼로 만든 앱을 테스트하려면 [여기](https://angulardocs.back4app.io/)를 클릭하세요.
## 전제 조건
:::hint{type="info"}
**이 튜토리얼을 완료하려면 다음이 필요합니다:**
- Back4App에서 생성된 앱.
- **참고: **Back4App에서 Parse 앱을 만드는 방법을 배우려면 [새 Parse 앱 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 따르세요.**.**
- 시스템에 Node Package Manager가 설치되어 있어야 합니다.
- 자세한 정보는 [npm 가이드](https://docs.npmjs.com/getting-started)를 참조하세요.
- 기본적인 [Angular](https://angular.io/)에 대한 지식.
:::
## 1 - Angular CLI 설치하기
먼저 Angular CLI(명령줄 인터페이스) 도구를 설치해야 합니다. CLI는 새로운 Angular 프로젝트를 시작하는 데 도움을 주며 개발 중에도 지원합니다. 터미널에 다음 줄을 입력하세요:
:::BlockQuote
npm install -g @angular/cli
:::
## 2 - 템플릿 가져오기
GitHub 저장소에서 템플릿을 다운로드하세요. 다음 명령어를 사용하여 할 수 있습니다:
:::BlockQuote
curl -LOk https\://github.com/templates-back4app/angular-integration/archive/master.zip && unzip master.zip
:::
프로젝트 폴더로 이동하고 다음 명령어를 실행하여 모든 종속성을 설치하세요:
:::BlockQuote
cd angular-integration-master/ && npm i
:::
## 3 - 앱의 자격 증명 업데이트
앱의 자격 증명을 설정하려면 `앱 ID` 및 `JavaScript 키`의 문자열 값을 업데이트하세요. Parse JavaScript SDK는 이러한 설정을 사용하여 앱을 Back4App 서버에 연결합니다.
1. 앱 대시보드로 이동하세요 [Back4App 웹사이트 ](https://www.back4app.com/)를 클릭하고 *서버 설정*을 클릭하세요.
2. *코어 설정 *블록을 찾아 *설정*을 클릭하세요. 도움이 필요하신가요? [이 단계들을 확인하세요](https://www.back4app.com/docs/platform/app-settings) 키를 찾으세요.
3. 앱 ID *과 *를 복사하고 프로젝트 폴더로 돌아가세요.
4. `src` > `environments` > `environment.ts`에 키를 붙여넣으세요.
## 4 - 로컬에서 연결 테스트하기
1. 프로젝트를 시작하려면 `ng serve`를 실행하세요.
2. 다음으로 이동하세요 `http://localhost:4200/`.
3. 로그인 화면이 나타날 때까지 기다리세요.
4. 등록 버튼을 클릭하여 예제 사용자를 생성하세요.
## 5 - 코드를 Back4App 서버에 업로드하기
Back4App을 사용하여 앱을 배포하려면 먼저 앱을 적절하게 빌드해야 합니다. 다음 명령어를 사용하여 앱을 `dist` 디렉토리에 컴파일하고 빌드하세요:
:::BlockQuote
$ ng build
:::
그런 다음 생성된 `dist` 디렉토리를 Cloud Code의 공개 폴더에 업로드해야 합니다. 이를 위해 배포할 옵션 중 하나를 선택하세요:
### 5.1 - CLI를 통한 배포
Back4App 명령줄 인터페이스를 통해 업로드하려면 [이 단계들](https://www.back4app.com/docs/command-line-tool/how-to-use)을 확인하세요.
### 5.2 - 대시보드를 통한 배포
Back4App 시각적 인터페이스를 통해 코드를 업로드하려면 [Back4App 웹사이트](https://www.back4app.com/)로 가서 *Cloud Code Functions*를 클릭하세요.
버튼을 클릭하고 `+ADD`를 선택한 다음 `dist` 디렉토리의 모든 파일을 선택하세요. 그런 다음 `public`로 이동하고 `SAVE`, 여기와 같이:
마지막으로, 앱을 배포하려면 [Back4App 웹 호스팅 튜토리얼](https://www.back4app.com/docs/platform/parse-web-hosting)을 참조하세요.
## 완료되었습니다!
이 시점에서 Angular 앱을 시작하는 방법을 배웠습니다.