[ Angular-cli ] Angular 개발 환경을 빠르게 만들 수 있는 방법

Angular CLI

A command line interface for Angular

- Angular를 위한 command line interface

그럼 cli란 무엇인가?

쉽게 생각하면 명령줄을 입력하면 해당 명령에 따른 작업을 실행해주는것을 cli라고 한다.

window에서 cmd.exe 같은 도구를 이용하여 명령을 전달하면 그 명령을 받아 명령에 맞는 작업을 실행한다.

npm도 어떻게보면 cli라고 할 수 있다. angular 개발을 위해 명령도구들을 모은것이 angular-cli다 기존의 ember개발자였다면

ember-cli를 알고있을 것이다. angular-cli는 ember-cli를 기초로 개발하였다고한다.

angular-cli를 이용하여 angular 프로젝트를 생성도 가능하며 component, directive등을 생성도 가능합니다.

그외에 테스트 실행, 빌드도 가능하도록 설정됩니다.

설치

기본적으로 node 4.x 버전 이상 npm 3.x 버전 이상을 필수로 필요하다.

npm install -g angular-cli

2017.04.04 업데이트

angular 4.x 버전으로 변경되면서 angular-cli도 1.0으로 업데이트 되었습니다. 기존에 설치했던 angular-cli 프로젝트를 삭제하고 

새로운 @angular/cli 프로젝트를 설치하셔야합니다.

//기존 angular-cli 프로젝트 제거

npm uninstall -g angular-cli

npm uninstall --save-dev angular-cli

//angular-cli 1.x 전역 설치

npm install -g @angular/cli

Angular-cli 명령어들

아직 베타 버전임에도 angular-cli에서 기본적으로 제공되는 명령어가 제법 많이 있습니다.

ng new <프로젝트이름> [옵션]

---

angular2 프로젝트를 생성하는 명령어이며 프로젝트 이름으로 폴더가 생성이 된다.

옵션들은 아래와 같다.

--dry-run

실제로 프로젝트는 생성하지 않고 생성된 파일 및 작업 수행 결과만 출력합니다. (약어로 --d로 사용가능)

--verbose

출력시 더 많은 정보를 출력합니다. (약어 --v로 사용가능)

--skip-npm

프로젝트 생성시 npm에 관련된 명령을 실행하지 않는다.

--skip-git

프로젝트의 git 설정을 생성하지 않는다.

--directory

생성될 프로젝트의 경로를 설정한다.

ng init <프로젝트이름> [옵션]

---

angular2 프로젝트를 생성하는 명령어는 동일하나 명령을 실행하는 폴더에서 바로 프로젝트가 생성된다.

옵션들은 아래와 같다.

-dry-run

실제로 프로젝트는 생성하지 않고 생성된 파일 및 작업 수행 결과만 출력합니다. (약어로 --d로 사용가능)

--verbose

출력시 더 많은 정보를 출력합니다. (약어 --v로 사용가능)

--skip-npm

프로젝트 생성시 npm에 관련된 명령을 실행하지 않는다.

--name

생성되는 프로젝트의 이름을 지정한다.

ng completion

---

cli 문서에는 아래와 같이 표기되어있는데

정확히 이해가 안되어서 찾는대로 수정하도록 하겠습니다.

(댓글로 알려주시면 매우 감사합니다.)

내용만 봐서는 쉘 스크립트를 추가할 수 있도록 하는거 같은데 사용 방법이나 어떻게 활용하는지 파악이 안되네요.

Adds autocomplete functionality to your shell for ng commands.

ng doc <키워드>

---

키워드에 해당하는 angular2 문서를 브라우져로 띄워준다고한다.

라지만 저도 사용해본적이 없는 명령어라 한번 실행해보았습니다.

 입력된 키워드로 api reference 페이지에서 검색되어서 브라우져가 띄워지더군요

ng e2e

---

e2e 폴더에 있는 테스트를 모두 실행한다.

e2e(end-to-end의 약자)

ng format

---

프로젝트의 코드형태를 .clang-format에 정의된 규칙으로 변경한다.

사실 처음에는 angular-cli 문서를 보고 무슨말인지 이해가 안가서 조금 찾아보니 .clang-format 파일을 통해 코드 규칙을 관리 할 수 있다고한다.

아래는 .clang-format파일 예시이다.

JavaScriptQuotes: Single

IndentWidth: 2

TabWidth: 2

UseTab: ForIndentation

.clang-format 관련 내용은 아래의 링크에서 확인이 가능하다

ClangFormat

ng generate <type> [옵션]

---

생성된 angular2 프로젝트안에 새로운 코드를 삽입시켜준다

사실 cli의 가장 핵심적인 기능이라고 생각한다. 비슷한 도구로는 yeoman 같은 도구가 있는데 generator 역활을 할 수 있으며

동시에 application structure를 정리해주는 역활을 한다.

아래와 동일한 명령어입니다.

ng g <type> [옵션] 

type의 종류는 아래와 같으며 각각 생성되는 규칙은 다음과 같습니다.

component

ng g component component-name

파일 생성 규칙: path/to/component-name

directive

ng g directive directive-name

파일 생성 규칙: path/to/directive-name

route

ng g route route-name

[route는 현재 지원하지 않습니다. route 지원 방향을 잡고 있다고하니 추후 지원될 것으로 보입니다.]

pipe

ng g pipe pipe-name

파일 생성 규칙: path/to/pipe-name

service

ng g service service-name

파일 생성 규칙: path/to/service-name

class

ng g class class-name

파일 생성 규칙: path/to/class-name

interface

ng g class interface-name

파일 생성 규칙: path/to/interface-name

enum

ng g enum enum-name

파일 생성 규칙: path/to/enum-name

path/to/ 이 부분에 대해 짚고 넘어가자면 아래와 같이 sidebar라는 component를 생성해 보았습니다.

ng g component sidebar

그 후 폴더 구조를 보면 아래와 같은데요.

위에서 알 수 있는것은 angular2에서 권장하고있는 폴더 구조입니다.

angular1.x에서는 사실 폴더 구조라는게 여러가지 케이스가 있다보니 프로젝트마다 성향도 다르고 개발자 개개인마다도 달라 구조 잡는것도 시간을 잡아먹었지만 angular2에서는 애초에 LIFT (Locate, Identify, Flat, Try to DRY)원리를 공식적으로 사용하라고 하고있습니다.

개인적으로 좋아하는 구조이고(개인적으로 큰 규모 어플리케이션에선 해당 방식이 제일 편리하였습니다.)

공식화되어서 다른 프로젝트나 이직시 비슷한 구조로 일할 수 있을것 같아 좋네요.

generate의 옵션들

--flat

해당 옵션은 생성되는 코드들이 LIFT의 폴더 구조로 생성되는게 아닌 app root에 생성됩니다.