Angular CLI 사용법

Angular CLI

1. 준비

  Angular CLI는 Node 6.9.0, NPM 3 버전 이상에서 작동한다. 글이 작성된 18. 01. 08일 기준 최신버전은 Node 8.9.4, NPM 5.6.0 이다.

2. 설치

  Angular CLI의 설치는 npm install -g @angular/cli 를 이용하면 설치할 수 있다. 설치를 확인 하려면, ng -v를 이용해 설치된 버전을 확인해보자.

  다음과 같이 설치된 Angular CLI의 버전(작성일 기준 최신버전은 1.6.3이다.)과 Node의 버전, OS의 버전이 표시가된다. 만약 Angular 프로젝트에서 ng -v를 쓰게 되면 프로젝트에 쓰인 Angular의 버전도 표시가 된다.

3. 사용

  Angular CLI의 명령어는 기본적으로 ng help를 사용하면 확인 할 수 있다. 하지만, 아직 CLI에 익숙하지 않은 사람이라면 @angular/cli 위키에서 확인 할 수 있다.

  Angular CLI의 명령어 많이 사용되는 몇가지만 사용해보도록하자.

3-1. ng new

  ng new는 Angular 프로젝트를 수행하는데 있어서 가장 처음 사용하는 명령어이다. ng new [프로젝트이름]을 적으면 Angular CLI는 프로젝트 수행에 필요한 의존성들을 설치하고 git을 초기화하는 작업을 자동으로 수행한다.

  Angular 프로젝트에 루트 routing module이 필요하면 --routing 옵션을 주면되고, 스타일 코드를 css가 아닌 scss 등으로 바꾸고 싶다면, --style scss 등으로 옵션을 주게 되면 스타일 코드를 scss로 만들어준다.

3-2. ng serve

  ng serve는 Angular 프로젝트를 로컬에서 실행해 볼 수 있도록 하는 명령어이다. ng serve는 기본적으로 코드에 변경 사항이 발생할 때, 자동으로 컴파일을 다시 수행하여 반영하는 watch 모드가 기본 설정되어 있다. 포트는 기본적으로 4200 포트를 사용한다. 만약 해당 포트를 사용하고 있다면, --port 포트번호를 이용해 사용할 포트를 변경할 수 있다. 접속은 localhost:포트번호를 통해 브라우저에서 쉽게 접속 할 수 있다.

3-3. ng generate

  ng generate는 프로젝트 수행에서 필요한 Angular의 뼈대를 자동으로 생성해주는 역할을 한다. ng generate로 만들 수 있는 것으로는 class, component, directive, enum, guard, interface, module, pipe, service가 있고 이것을 blueprint라고 한다. 그 중 기본적으로 많이 사용되는 것은 component, module, service 가 있다. 

사용은 ng generate [blueprint이름] [이름]으로 사용한다.

  ng generate를 이용해 module을 만들 때, --routing 옵션을 주게되면 routing module을 함께 자동으로 만들어주며, module을 만든 후 module과 동일한 이름으로 component를 만들게 되면 자동으로 module에 component가 등록된다. 예를 들면 다음과 같이 하면된다.

ng g module apple // apple이라는 이름으로 module 생성.
ng g component apple // apple이라는 이름으로 component 생성, apple이라는 module이 있으면 자동 등록.

  ng generate를 이용해 service를 만들게 되면 module에 등록되지 않은 상태로 만들어지므로, 반드시 사용되는 module에 등록할 수 있도록하자.

3-4. ng build

  ng build는 개발이 완료된 프로젝트를 실제 서비스 하기 위해 번들링 하는 작업을 수행하는 명령어이다.

ng build에서 쓰이는 번들링 도구는 webpack이다.

  앞서 말한 것처럼 ng build는 개발이 완료된 프로젝트를 실제 서비스 하기 위한 작업을 하는 것이므로, 개발과정에서만 사용하는 것들을 굳이 실제 서비스 코드에 넣을 필요가 없다. 그래서 CLI는 --prod 옵션과 --build-optimizer 옵션을 제공하는데, --prod 옵션은 CLI에서 미리 정해놓은 produce 환경에 최적화 하기 위한 작업을 하는데 실제로 사용하지 않는 라이브러리의 함수를 떨어내는 Tree Shacking과 Typescript로 작성된 코드를 미리 컴파일 하는 과정인 AOT(Ahead-of-Time)를 하게된다.

4. 끝으로

  Angular CLI에 대한 기본 사용법을 배워 보았다. 말 그대로 위에 작성된 내용은 Angular CLI의 기본 사용법이므로, 더 자세한 사용법을 알고 싶다면, 공식 문서의 위키 페이지를 참조하면 될 것같다. 영어로 되있긴 하나 간단한 영어로 되어 있어 쉽게 사용법을 익힐 수 있다.