알아 두면 유용한 Angular CLI 1탄!

오늘은 알아 두면 유용한 Anaular CLI에 대해서 정리 해보도록 하겠습니다.

처음 Angular(version 2)로 프로젝트를 진행 할 때는 Angular CLI를 Angular 기본 구조와 문법을 익히는데 방해가 될 거 같은 느낌이 들어 일부러 잘 사용하지 않았습니다.

하지만 이번에 Angular CLI를 사용 해보면서 알아 두면 정말 Angualr로 개발을 진행 하는데 있어 정말 편하고 개발 시간을 조금이나마 단축 시킬 수 있을거 같아 정리 해봅니다.

우선 CLI를 사용 하기 위해서 Angular CLI를 install 해보도록 하겠습니다.

* Angualr CLI 설치

$ npm install -g @angular/cli

$ npm i -g @angular/cli

위에 보이는 둘 중 어느 명령어를 사용하여도 상관 없습니다.

$ng -v

$ng --version

위 명령어를 실행 하면 아래와 같이 설치 여부를 확인 할 수 있습니다.

그럼 본격적으로 Angular CLI에 대해 살펴 보겠습니다.

* 프로젝트 생성 

$ ng new <project_name>

가장 기본적으로 사용하는게 angular를 손쉽게 생성해주는 new 명령어입니다.

사용법은 위와 같습니다.

new 명령에는 다양한 옵션이 있습니다.

* ng new 

옵션	기능	사용 예
--dry-run( alias: -d )	생성 전에 생성 할 파일들을 보여준다.	$ng new <project_name> --dry-run
--inline-style(alias: -is)	css file을 생성하지 않고 line으로 style을 삽입 한다.	$ng new <project_name> -is
--inlin-template(alias: -it)	html file을 생성하지 않고 line으로 template을 삽입 한다.	$ng new <project_name> -it
--directory(alias: -dir)	앱의 디렉토리 이름을 지어준다.	$ng new <project_name> -dir <dir_name>
--prefix(alias: -p)	selector에 지정 해준 접미사를 삽입 시켜준다.	$ng new <project_name> -p <prefix_name>
--routing	Routing module을 자동 생성 해준다.	$ng new <project_name>
--skip-git	git 의 초기화를  건너뛴다.	$ng new <project_name>
--skip-commit	git의 첫번째 커밋을 건너뛴다.	$ng new <project_name>
--skip-install	node_modules생성을 건너뛴다. 즉, npm install을 하지 않는다.	$ng new <project_name>
--skip-tests	spec file을 생성하지 않는다.	$ng new <project_name>

아래와 같이 프로젝트가 잘 생성 되었다.

다음 알아 볼 명령어는 serve입니다.

serve는 build와 webserver를 start 해주는 명령어입니다.

* ng serve 

옵션	기능	사용 예
--host( alias: -h )	기본 localhost:4200으로 실행	$ng serve --host
--live-reload ( alias: -lr )	수정시 페이지를 자동으로다시 로드 할 지 여부	$ng serve --live-reload
--open ( alias: -o )	웹서버를 가동 할 때 페이지를 오픈 해 준다.	$ng serve -o
--port ( alias: -p )	임의의 포트번호를 지정해 줄 수 있다.	$ng serve -p <port_number>
--ssl	HTTPS로 서버를 가동한다.	$ng serve --ssl
--watch ( alias: -w )	파일이 수정 되면 자동 빌드 한다.	$ng serve -w

명령어를 입력하면 다음과 같이 실행 된다.

* ng generate

generate는 컴포넌트, 서비스, 클래스, 디렉티브, 파이프, 모듈, 인터페이스 등을 자동으로 만들어 주는 명령어입니다..

그럼 자세히 알아보겠습니다.

우선 generate 는 기본적으로 다음과 같이 사용 할 수 있습니다.

$ ng generate <generate_name> <name> [option]

• class - $ng generate class <name> 
• component - $ng generate component <name>
• directive - $ng generate directive <name>
• enum  - $ng generate enum  <name>
• guard - $ng generate guard <name>
• interface - $ng generate interface <name>
• module - $ng generate module  <name>
• pipe - $ng generate pipe <name>
• service - $ng generate service <name>

* 참고 - ng generate 대신 ng g로 대체해서 사용 가능 합니다.

명령어의 실행 예는 이렇습니다.

      

src/app 밑에 css, html, spec, ts 파일 까지 자동 생성 해주는 것을 알 수 있습니다.

* ng doc

ng doc 은 angular https://angular.io/ 로 검색을 할 수 있습니다.

$ng doc <search_keyword>

[Reference] - https://cli.angular.io/