10분만에 Angular 2.0 RC2 시작하기

이번에 Angular 1 기반 프로젝트를 Angular 2로 이전하는 작업을 하게 되었습니다. node기반 프로젝트들이 설정 난이도가 높기로 유명해서 걱정했는데 angular-cli덕분에 금방 끝낼수 있었습니다. 그 과정이 감동적으로 심플해서 간단하게 정리해봤습니다.

개발 환경은 제 맥북기준으로 설명하겠습니다. 일단 npm이 있어야 하는데 저는 nvm을 이용해서 v6.2.1을 깔았습니다. nvm은 brew를 통해서 깔면 됩니다. 참고로 nvm과 npm 설정은 10분에 포함이 안됩니다.

brew install nvm
nvm install v6

npm 설정이 끝났다면 글로벌 라이브러리를 설치합니다.

npm i -g eslint angular-cli typings

그리고 angular-cli를 이용해서 프로젝트 폴더에 신규 프로젝트를 만듭니다.

cd ~/path_to_projects
ng new project

프로젝트 폴더와 필요한 모든 파일이 생성됩니다. 원래라면 더 이상의 작업은 필요없는데, RC2를 적용하려면 수정이 필요합니다.  라이브러리를 버전업하고 angular-forms를 추가해야 하는데 forms에 관해서는 이 문서를 확인해보시기바랍니다.

수정을 위해서, 그리고 작업을 위해서 IDE로 VS Code를 쓰고 있는데 아래는 제가 쓰는 플러그인의 리스트입니다. vi나 에디터플러스로 편집하셔도 아무 문제 없습니다만 intellisense가 지원되는 IDE가 편하긴 편하더군요. VS Code를 설정하는 시간도 10분에 안들어갑니다.

EditorConfig.EditorConfig-0.2.7/
christian-kohler.npm-intellisense-0.1.1/
dbaeumer.vscode-eslint-0.10.16/
johnpapa.Angular2-0.4.4/

프로젝트 폴더로 들어가셔서 package.json을 수정합니다.

  "dependencies": {
    "@angular/common": "2.0.0-rc.2",
    "@angular/compiler": "2.0.0-rc.2",
    "@angular/core": "2.0.0-rc.2",
    "@angular/http": "2.0.0-rc.2",
    "@angular/forms": "0.1.0",
    "@angular/platform-browser": "2.0.0-rc.2",
    "@angular/platform-browser-dynamic": "2.0.0-rc.2",
    "@angular/router": "3.0.0-alpha.7",
...

rc.1을 rc2로 바꾸고 router의 버전을 alpha.3에서 alpha.7로 올려줍니다. @angular/forms의 추가도 잊지 마시길.

src/main.ts에서 http와 forms를 쓰도록 변경해줍니다.

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AwardResultComponent, environment } from './award-result/';
import { HTTP_PROVIDERS } from '@angular/http';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

if (environment.production) {
  enableProdMode();
}

bootstrap(AwardResultComponent, [HTTP_PROVIDERS, disableDeprecatedForms(), provideForms()]);

disableDeprecatedForms는 RC2전용으로 RC1 이전의 forms를 쓰지 못하게 막는 코드인데 RC3이후로는 쓰이지 않을 예정입니다.

src/system-config.ts에 forms를 한 줄 추가해줍니다.

const barrels: string[] = [
...
  '@angular/forms',
...

이제 라이브러리를 설치하고 서버를 실행시킵니다.

npm install
ng serve

http://localhost:4200/ 으로 접속해서 app works! 메세지가 보이면 성공입니다. src/app/app.component.ts에서 title을 변경하면 자동으로 브라우저에 반영되는지 확인해보시기 바랍니다. 만약 built-in 서버가 필요가 없다면 build –watch를 하시면 됩니다.

ng build --watch

어때요? 10분이면 충분하죠?

저의 경우 built-in서버 대신 nginx위에서 작업했는데 dist/index.html 을 참조해서 페이지를 하나 만들고, System.js의 base URL을 설정하니 문제없이 동작했습니다. 아래와 같은 코드를 System.import 위에 넣어주시면 됩니다.

System.config({baseURL:'/path-to-projects/project/dist/'});

angular-cli를 만져보니 요즘 구글이 정말 일을 잘하고 있구나 라는 생각이 들었습니다. ng 명령어를 이용하면 테스트를 비롯한 다양한 기능이 지원되는데 직접 확인해보시기 바랍니다.

환경설정이 간단하게 끝났으니 그 다음엔 웹어플리케이션을 제작하는 일이 남았습니다. typescript를 익히시고 angular2 quickstart 나 angular2 seed 같은 예제를 참조하신 후에 자신만의 멋진 프론트엔드 작업을 하시기 바랍니다. 아차차, 테스트를 위해서 jasmin, karma를, ajax를 위해선 rxjs도 알아둬야 하는 걸 빼먹을 뻔 했네요.

Angular2를 조금 써봤는데 내부적으로는 많이 바뀌었지만 실제 작업을 해보면 Angular 1과 거의 비슷한 감각으로 사용할 수 있도록 설계되어 있었습니다. 능력자 구글의 서포트가 있으니 정식버전이 나오면 프론트엔드 분야에 큰 영향을 미치지 않을까 예상해봅니다. 마치 초창기 스프링처럼요. 성공적으로 환경 설정하시고 잘 활용해보시기 바랍니다.