SETUP FOR LOCAL DEVELOPMENT
빠르고 효율적인 개발을 위해 Angular QuickStart 를 설치하라
Setup a local development environment
QuickStart 라이브 코드 예제는 Angular를 위한 놀이터이다. 실제 앱 개발을 위한 공간이 아니다. 너의 컴퓨터에서 실제로 개발하는 것이 Angular를 학습하는 방법이라고 생각한다.
Github에서 관리되는 QuickStart 예제를 사용하면 쉽고 빠르게 새로운 프로젝트를 설정할 수 있다.
QuickStart 라이브 코드 예제는 아래에서 설명하겠지만 실제 앱에서 매우 많이 활용되는 app.module.ts와 main.ts 앱 파일들을 가지고 있는 QuickStart이다.
Angular 앱을 만들기 위해서는 노드와 npm이 설치돼 있어야한다:
- 새로운 프로젝트 폴더를 생성한다. ( 예제에서는 quickstart라는 이름으로 생성한다. 나중에 임의로 바꿀 수 있다.)
- 위에 생성한 폴더에 QuickStart 예제 코드를 클론하거나 다운 받는다.
- npm 패키지들을 설치한다.
- npm start 명령어를 실행해 샘플 앱을 실행한다.
Clone
클론 부터 앱 실행까지 아래의 명령어를 터미널에 순서대로 입력하면 된다.
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start
npm start 는 2017년 1월 이후에 네트워크를 지원하지 않는 윈도의 bash에서 수행되지 않는다.
Download
QuickStart 예제를 다운받아서 새로 만든 프로젝트 폴더에 압축을 해제한다. 다음의 명령어를 터미널에 입력해 나머지 작업들을 수행한다.
cd quickstart
npm install
npm start
Delete non-essential files (optional)
테스트 그리고 QuickStart 저장소 관리(.git 폴더의 .gitignore과 같은 git과 관련된 파일들과 같은)에 관련된 중요치 않은 파일들을 삭제할 수 있다.
실제 사용하는 테스트나 git 설정을 실수로 지우지 않기 위해서 프로젝트 초기에 이 작업을 하는 것이 바람직하다.
실행 환경에 따라 터미널을 열고 프로젝트 폴더에서 다음 명령어들을 실행 하면 된다:
OX/X(bash)
xargs -a non-essential-files.txt rm -rf
rm srs/app/*.spec*.ts
rm non-essential-files.txt
Windows
for /f %i in (non-essential-files.txt do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q
What's in the QuickStart Seed?
QuickStart 예제(QuickStart seed)는 QuickStart 놀이터와 같은 내용을 담고 있다. 하지만 QuickStart 예제의 진짜 목적은 로컬 개발의 단단한 기초를 제공하는 것이다. 결론적으로 프로젝트 폴더에는 더 많은 파일들이 있고 대부분은 이 가이드에서 다룰 것이다.
/src 폴더의 타입스크립트(.ts) 파일들의 구조에 집중하자
모든 가이드나 cookbook들은 적어도 이 핵심 파일들을 가지고 있다 모든 파일들은 각각의 목적을 가지고 있으며 앱을 개발 함에 따라서 파일마다 내용이 추가 된다.
src/ 폴더 밖의 파일들은 빌드, 배포, 테스트에 관한 것들이다. 또한 설정 파일이나 외부 의존성 모듈에 대한 것들이다.
src/ 폴더 안에는 앱 자체에 대한 것들이다. 타입스크립트, HTML, CSS 파일들을 src/ 내에 생성하면 된다.
다음은 src/ 내에 있는 것들이다.
| File | Purpose |
|---|---|
| app/app.component.ts | AppComponent를 정의한다. 기본 컴포넌트이며 나중에 앱에 관련된 다른 컴포넌트를 포함할 수 있다. |
| app/app.module.ts | 기본 모듈 AppModule을 정의한다. 지금은 AppComponent만 선언되어 있지만 곧 더 많은 모듈을 선언할 것이다. |
| main.ts | JIT 컴파일러로 컴파일 하고 앱을 브라우저에서 실행하기 위해서 부트스트랩한다. 이것은 개발하고 실행하는데 합리적인 석택들이다. 다른 컴파일 방법이나 배포 방법을 추후에 문서에서 다룰 것이다. |
Next Step
Angular를 처음 접한다면 다음 챕터를 학습하는 것을 추천한다.
Appendix: node and npm
node.js와 npm은 Angular나 다른 플랫폼과 같은 현대 웹 개발에서 필수적이다. node는 클라이언트와 빌드 도구에 필수적이다. npm 패키지 매니저는 그 자체로 node 앱이며 자바스크립트 라이브러리를 설치한다.
지금 개발하려고 하는 컴퓨터에 node와 npm이 설치되지 않았다면, node와 npm을 설치하라
콘솔이나 터미널에서 명령어 node -v 와 npm -v를 사용해서 node v4.x.x와 npm 3.x.x를 실행하고 있다는 것을 확인하라 이전 버전을 사용하고 있다면 에러를 발생시킬 수도 있다.
다양한 node와 npm을 관리하기 위해서 nvm을 추천한다. 이미 다른 버전의 node와 npm을 사용하고 있는 프로젝트를 진행중이라면 nvm이 필요할 것이다.
Appendix: Why develop local
브라우저에서 라이브 코딩하는 것은 Angular를 학습하는데 꽤 괜찮은 방법이다.
Links on almost every documentation page open completed samples in the browser. You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
QuickStart는 AppComponent파일만 보여준다. 이것은 --. Angular 학습에 집중 할 수 있게 해준다.
QuickStart 예제는 다른 모든 샘플의 기초가 된다.
- 앱을 plunker에 올릴 수 없다.
- 코드를 작성할 때 항상 온라인에 접속되어 있는 것은 아니다.
- 브라우저에서 타입스크립트를 트랜스파일하는 것은 느리다.
- 타입, 재구조화, 코드 자동완성은 로컬 IDE에서만 지원된다.
라이브 코딩은 문서의 예제나 샘플을 실행하고 실험할 놀이터로만 사용해라
실제 개발은 로컬에서 개발하는 것을 추천한다.