티스토리 뷰

Angular

Angular QuickStart - 2. 환경설정

한장현 2017. 1. 5. 20:30

Angular QuickStart 기본 예제를 빠르고 쉽게 로컬 환경에 설치하기


로컬 개발 환경 설정

 QuickStart 라이브 코딩 페이지는 Angular를 체험해 볼 수 있는 곳이며, 실제 어플리케이션을 개발할 수 있는 곳은 아니다. Angular 어플리케이션을 개발하기 위해서는 각 PC에 개발환경을 구성해야 하는데, 어떻게 하면 당신이 Angular를 쉽게 배울 수 있을 지 우리가 고민하고 있는 문제다.

 GitHub으로 관리되고 있는 QuickStart seed 프로젝트를 기반으로 새 프로젝트에 대한 환경 설정을 빠르고 쉽게 할 수 있다.

 QuickStart seed 라이브 코딩 페이지는 QuickStart에 app.module.tsmain.ts 어플리케이션 파일을 추가한 것이고(자세한 설명은 아래), 좀 더 확장 가능한 어플리케이션을 위해 준비된 것이다.


 node와 npm이 먼저 설치되어 있어야 한다. 그리고...

  1. 프로젝트 폴더를 만든다. (quickstart로 할 수도 있고 나중에 바꿀 수도 있다.)
  2. QuickStart seed 프로젝트를 원하는 폴더에 클론받거나 다운로드 받는다.
  3. npm 패키지를 설치한다.
  4. 예제 어플리케이션을 실행하기 위해 npm start 명령을 수행한다.

git 클론
 터미널에서 git clone 명령을 이용하하면 아래와 같이 할 수 있다.

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start

다운로드 (위치)
 QuickStart seed 프로젝트를 다운받았다면 원하는 폴더에 압축을 푼다. 그리고 나머지 단계를 수행한다.

cd quickstart
npm install
npm start


QuickStart seed에는 어떤 것들이 있나?

 QuickStart seed는 QuickStart 라이브 코딩 페이지와 같은 어플리케이션이다. 하지만 QuickStart seed의 진짜 목적은 로컬 개발환경의 기본틀을 제공하기 위한 것이다. 좀 더 깊이 들어가보면, 프로젝트 폴더에는 수많은 파일들이 있는데 자세한 설명은 이곳을 참고하자.

 /app 폴더의 TypeScript(.ts) 파일들 중에 아래 3개를 주목하자.


- app/app.component.ts


import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `

Hello {{name}}

` }) export class AppComponent { name = 'Angular'; }


- app/app.module.ts


import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


- app/main.ts


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);


 모든 가이드 문서나 쿡북에 있는 어플리케이션들은 최소한 이 3개의 파일을 기본적으로 갖고 있다. 각 파일은 별개의 목적을 갖고 만들어졌으며, 어플리케이션이 커지면서 독자적으로 진화할 것이다.


- app.component.ts

 QuickStart 라이브 코딩 페이지에 있는 것과 같은 AppComponent를 정의한다. 어플리케이션이 커지면서 만들어지는 하위 컴포넌트들은 모두 이 컴포넌트의 하위 컴포넌트로 만들어질 것이다.


- app.module.ts

 Angular가 어플리케이션을 구성할 때 기본 모듈이 되는 AppModule을 정의한다. 지금은 AppComponent만 정의되어 있지만 곧 많은 컴포넌트들이 추가로 이곳에 정의될 것이다.


- main.ts

 JIT 컴파일러에 의해 컴파일되고 브라우저에서 동작하도록 부트스트랩하는 어플리케이션이다. 대부분의 프로젝트에서는 기본 상태로 사용할 수 있으며 Plunker와 같은 라이브 코딩 환경에 맞게 수정해서 사용할 수 있다. 이후에 나올 가이드 문서에서는 컴파일 방식을 바꾸는 방법과 배포 옵션을 설정하는 방법을 다룬다.



부록 : node와 npm

 요즘 Angular나 다른 플랫폼을 이용하여 웹을 개발할 때 node.js와 npm은 필수 요소다. 이 문서에서는 클라이언트 개발과 빌드 툴을 사용할 때 node를 사용한다. Npm 패키지 매니저는 그 자체가 이미 node 어플리케이션이며 자바스크립트 라이브러리들을 관리한다.

 컴퓨터에 설치되어 있지 않다면 지금 설치해보자.

 터미널이나 콘솔 창에서 node -vnpm -v 명령어를 실행하여 node 버전이 v4.x.x 이상, npm 버전이 3.x.x 이상인 것을 확인해두자. 이전 버전에서는 에러가 발생한다.

 여러 개의 node와 npm 버전을 사용한다면 nvm 사용을 권장한다. 이미 프로젝트에서 사용하고 있는 것과 다른 버전의 node와 npm을 사용하려면 nvm을 이용하는 것이 좋다.



부록 : 왜 로컬에서 개발해야 할까

 Angular를 연습하기에 라이브 코딩 페이지는 훌륭한 수단이다.

 가이드 문서에 있는 대부분의 예제는 브라우저에서 바로 동작을 확인할 수 있다. 여기에서 예제 코드를 가지고 놀 수도 있고, 코드를 수정하여 친구에게 공유할 수도 있으며, 로컬로 다운받아서 돌려볼 수도 있다.

 이전에 있던 QuickStart 페이지에서는 AppComponent 파일만을 설명했다. 이 파일은 app.module.tsmain.ts 파일을 내부적으로 생성하여 아주 단순하게 Angular 어플리케이션을 동작시키고 있기 때문에, Angular에 대한 복잡함은 아직 느끼지 않았을 것이다. 다른 예제들은 QuickStart seed를 기반으로 만들어졌다.

 로컬에서 개발할 때 알아두어야 할 점은 이런 것들이 있다.

  • plunker에 있는 앱은 사용할 수 없다.
  • 코드를 작성할 때 인터넷에 연결되어야 할 필요는 없다.
  • 브라우저에서 코드를 변환(transpiling)하는 것은 느리다.
  • 타입 지정 지원, 리팩토링, 코드 완성 기능은 로컬 IDE에서만 동작한다.

 라이브 코딩 페이지는 단순한 동작을 확인하는 용도로 사용하는 것 뿐만 아니라, 가이드 문서에 있는 예제나 더 복잡한 실험을 해보고 싶을 때 사용하는 것도 좋다. Angular 가이드 문서에 대한 이슈를 제기하거나 Angular 자체의 이슈를 제기하기 위해서 라이브 코딩 페이지를 사용하는 것도 훌륭한 선택이다.

 실제 개발에서는 로컬에서 개발하기를 적극 권장한다.

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함