Angular-Cli
google에서 angular2와 같이 내놓은 angular2를 위한 cmd tool입니다. cmd tool중 가장 유명한 yo와 거의 동일한 기능을 제공합니다. 아직 beta version이기 때문에 발전의 여지는 많이 보이긴 하지만, angular2 application을 개발하기 위해서는 제 생각에는 반드시 angular cli를 통해서 개발 할 필요가 있습니다.
개인적인 이유의 근거는 다음과 같습니다.
- 표준 tool로 만들었기 때문에 모든 문서는 angular cli를 기본으로 나올 가능성이 높습니다.
- stackoverflow 와 같은 질의 응답 사이트의 내용 역시 angular cli를 기본으로 이야기하고 있습니다.
- third party tool역시 angular cli를 기반으로 나오기 쉽습니다.
- webpack을 기반으로 구성되어, 최적의 site를 만들기 좋습니다.
- 역으로 angular cli를 사용하지 않고, 직접 webpack 등의 설정을 하게 될 경우에 너무 힘듭니다. 진입장벽이 높아집니다.
angular cli는 기본적으로 다음 기능들을 가지고 있습니다.
- project 초기 생성
- component, service, pipe, directive 등의 생성
- gulp, grunt와 같은 build tool의 제공.
- scss, less와 같은 css preprocessor가 모두 지원
기본적으로 1.0.0-beta.15부터 webpack과 통합되어 있기 때문에 webpack에 대한 기본 지식이 있으면 좋습니다.
설치
npm install -g angular-cli
기타 tool들과 마찬가지로 npm을 이용해서 설치합니다. yo와는 다르게 다른 plugin들이 아직 제공되고 있지는 않군요.
project 초기 생성
ng new {{Project이름}}
위 command를 이용하면 Project이름으로 새로운 folder가 하나 생성되고, 기본적인 application 이 구성됩니다.
cd {{Project이름}}
ng serve
를 실행하면 기본적인 angular2 application이 만들어집니다.
├── angular-cli.json
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.json
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── README.md
├── src
│ ├── app
│ ├── assets
│ ├── environments
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.json
│ └── typings.d.ts
└── tslint.json
folder는 e2e와 src가 만들어지는데, e2e는 end to end test code가 위치하는 곳이고 개발은 주로 src에서 이루어지게 됩니다. yo에서는 이렇게 생성된 json 파일들을 조금 뜯어볼 필요성이 있는데, angular cli의 경우에는 거의 그럴 필요성이 느껴지지 않습니다. e2e 테스트를 위한 protractor.conf.js파일을 제외하면, 사용자가 건드릴 만한 파일들은 없습니다.
src에 만들어진 file 구성을 보면 component, spec, css, html 이 모두 갖추어져 있는것을 볼 수 있습니다. angular-cli는 개발자에게 component와 그에 따른 view file 들, 즉 css와 html이 같이 있는 구조를 강제합니다. 대부분의 angular2 tutorial에서 그리했듯이요. 기본적으로 만들어진 file의 내용은 다음과 같습니다.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.css']
})
export class InfoComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
매우 간단하지만, 타이핑이 귀찮은 것들은 많이 들어가 있는것을 볼 수 있습니다.
component, service, pipe, directive 생성
ng g {{type}} {{name}}
을 통해, 각각의 항목들을 만들어낼 수 있습니다. 여기서 재미있는것은 만약에 ng g component home.component를 통해 생성을 하면 /src/home folder가 기본으로 생깁니다. 이는 root folder에 너무 많은 파일들을 놓지 않으려는 배려로 볼 수 있겠네요. cmd를 통해서 생성하는 것들은 다음과 같습니다.
| Scaffold | Usage |
|---|---|
| Component | ng g component my-new-component |
| Directive | ng g directive my-new-directive |
| Pipe | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Class | ng g class my-new-class |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
생성된 Component들은 모두 app.module.ts의 declarations에 기본적으로 추가되어 있습니다. 타 객체들은 추가되어있지 않으니, 상황에 따라 Component에 추가하는 것이 필요합니다.
route 지원
안타깝게도 angular-cli는 route를 생성하는 것을 지원하지 않습니다. 개발 방향을 잡고 있다니, 추후를 기대해봐도 좋을것 같습니다.
실행
ng serve
명령어로 실행이 가능합니다. 기본적으로 4200 port를 이용해서 처리되며, 파일 변경시 webpack watch를 통해 다시 build가 됩니다.
Proxy 설정
web application을 개발하게 되면 필연적으로 필요하게 되는 것이 Proxy입니다. 내부내에서 타 URL로 proxy를 통해 API를 호출하기 위해서는 내부 Proxy설정이 필요합니다. 이를 angular cli에서는 --proxy-config를 통해 해결하고 있습니다.
먼저, 기본적으로 angular cli에서 사용되는것은 webpack입니다. webpack dev server 설정에서의 proxy설정 방법과 완전 동일합니다. 그런데, webpack의 경우에는 webpack.config.js파일이 존재합니다. 그럼 angular cli는? 폴더의 어느곳을 뒤져봐도 위 파일은 존재하지 않습니다. angular cli는 webpack을 철저하게 wrapping해서 보여주기 때문이지요.
proxy를 구성하기 위해서는 추가 파일을 생성해서 처리해야지 됩니다. proxy.json파일을 따로 생성해서 처리하면 됩니다. 다음은 제 proxy.json파일입니다.
"/fms-api/v2"2개의 proxy를 구성하였고, 구성된 proxy.json을 통해 실행시키기 위해서는 다음 cmd를 사용하면 됩니다.
ng serve --proxy-config proxy.json
이렇게 하면 실행창에 다음과 같은 구문이 나타납니다.
ykyoon@ykyoon ~/dev/code/cli-test1/my-dream-app $ ng serve --proxy-config proxy.json
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
** NG Live Development Server is running on http://localhost:4200. **
10% building modules 2/2 modules 0 active[HPM] Proxy created: /fms-api/v2 -> http://localhost:8000
[HPM] Proxy rewrite rule created: "/fms-api/v2" ~> ""
[HPM] Proxy created: /socket.io -> http://localhost:5000
4265ms building modules
Proxy에 설정에 대한 문서는 webpack dev server 설정과 동일합니다.
3rd party library
lodash
개인적으로는 jquery보다 더 필요한것이 이젠 lodash입니다. lodash 추가는 일반적으로 우리가 알고 있는 npm install lodash --save로 하는 것이 아니라 다음 command를 이용해서 해줘야지 됩니다.
npm install @types/lodash --save
그리고 lodash를 사용하고자 하는 곳에서 다음과 같이 사용합니다.
import * as _ from 'lodash'
jquery & bootstrap
jquery의 경우에는 조금 다릅니다. jquery의 경우에는 근간에는 거의 모든 외부 library들이 먼저 jquery가 추가된 후에 동작되는 것이 일반적인데, webpack에서 주로 사용하는 방식으로 import를 이용하면 이를 반영할수가 없습니다. 이렇게 먼저 추가되어야지 되는 library들이 있는 경우, angular-cli.json파일을 수정할 필요가 있습니다.
먼저 npm을 이용해서 jquery와 bootstrap을 추가합니다.
npm install jquery --save
npm install bootstrap@next --save //bootstrap version 4
다음, script항목으로 들어가 추가되어야지 될 js파일을 순서대로 넣어줍니다.
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
마지막으로 styles에 bootstrap을 추가하면 완료됩니다.
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
Summary
angular-cli는 매우 강력한 tool입니다. 또한 angular2 개발 방법의 표준을 제공하고 있습니다. 이는 강력하지는 않지만, 많은 3rd party library와 사용자들에게 영향을 주게 될 것입니다. 다른 3rd party library들의 사용방법이 angular-cli를 기준으로 문서가 만들어질 가능성이 매우 높습니다.
