[Angular2] Angular CLI 사용하기

 

Angular CLI 소개

CLI(Command Line Interface)는 개발자가 Angular 개발에만 집중할 수 있도록 개발에 필요한 Angular 프로젝트의 설정이나 프로젝트의 전반적인 관리를 명령어 기반으로 수행할 수 있게 지원합니다

 

Angular CLI 설치

$ npm install -g angular-cli

-g를 통하여 전역으로 설치를 진행하고나면 ng명령어를 이용하여 Angular CLI에 제공하는 기능을 실행할 수 있습니다

$ ng -help

위의 명령어로 어떤 명령어들을 사용할 수 있는지 볼 수 있습니다

 

Angular CLI 프로젝트 생성

$ ng new hello-ng2

위의 명령어로 프로젝트를 생성할 수 있습니다

$ cd hello-ng2
$ ng serve

serve 명령어를 실행하면 CLI에서 제공하는 개발 서버가 실행됩니다

실행 되고나면 기본적으로 4200포트를 사용하기때문에

 

http://localhost:4200/

 

를 통하여 접속을 할 수 있습니다

 

Angular CLI 빌드

개발을 모두 마치고 나면 프로젝트를 배포하여야 하는데요. Angular CLI로 만들어진 프로젝트의 코드는 타입스크립트 기반이기 때문에 빌드를 통해 브라우저에서 동작 가능한 자바스크립트로 변경해야 합니다

이러한 과정을 위하여 빌드 명령어를 사용하여 빌드해주어야 합니다

$ ng build

명령어를 실행하면 dist 폴더가 생성됩니다 하지만 프로덕션 환경을 위한 빌드 명령어가 아니기 때문에 파일 크기면에서 최적화가 되어있지 않습니다 프로덕션용 빌드 명령어를 실행하려면 prod옵션을 추가해야합니다

$ ng build --prod --env=prod
// or
$ ng build -prod

성공적으로 프로덕션 빌드가 완료되면 dist 폴더안에 빌드 결과가 생성됩니다.