[Angular] Angular CLI 뜯어 보기

오늘은 Angular CLI에 대해서 포스팅을 하도록 하겠습니다.

간단하게 Angular CLI는 NPM을 통해서 쉽게 설치를 할 수 있습니다.

$ npm i -g @angular/cli

---

처음으로 알아 볼 건 프로젝트 생성입니다.

프로젝트 생성은 아래와 같이 new를 사용하여 생성을 할 수 있습니다.

$ ng new [project-name]

추가로 option을 추가할 수 있는 옵션이 꽤 많지만 몇가지만 알아보도록 하겠습니다.

먼저 prefix 옵션에 대해서 알아보겠습니다. 기본 적으로 Angular는 prefix가 app으로 설정이 되어 있습니다. 만약 이걸 다른 걸로 변경을 하고 싶다면 --prefix 옵션(짧게 -p)을 사용하면 됩니다.

예를 들어 prefix를 my로 사용을 하고 싶다면 아래와 같이 사용을 하면 됩니다.

# 기본적으로 사용하는 방법
$ ng new [project-name] --prefix my

# Alias 사용
$ ng new [project-name] -p my

다음으로 알아볼 option은 routing입니다. routing 옵션은 Angular 자체에 있는 Routing module을 생성할 건지 여부를 정하는 옵션입니다. 사용 방법은 아래와 같습니다.

# routing module 사용할 경우
$ ng new [project-name] --routing true

# routing module 사용 안할 경우
$ ng new [project-name] --routing false

여기서 routing module을 생성하지 않는다고 설정을 했어도 나중에 코드에서 추가를 할수가 있습니다.

다음으로 알아볼 option은 --skipTests(짧게 -S) 입니다. skipTests는 명칭에서도 볼 수 있듯이 test를 skip하는 옵션입니다. skipTests 설정을 하게 되면 test 코드가 service나 component 등을 생성할 때 자동으로 생성되지 않도록 할수 있습니다. 사용 방법은 아래와 같습니다(Angular에 기본적으로 테스트 코드가 생성이 되도록 설정이 되어있습니다).

# test 코드가 자동으로 생성되지 않도록 설정
$ ng new [project-name] --skipTests true

# Alias 사용
$ ng new [project-name] -S true



# test 코드가 자동으로 생성되도록 설정
$ ng new [project-name] --skipTests false

# Alias 사용
$ ng new [project-name] -S false

그리고 다음으로 알아볼 option은 style 입니다. style을 설정하지 않으면 추가로 어떤 스타일을 사용을 할건지 선택을 하는 옵션이 제공이 됩니다. 선택할수 있는 옵션은 css, scss, sass, less, stylus가 있습니다. 사용 방법은 아래와 같습니다.

# style css 설정
$ ng new [project-name] --style css

# style scss 설정
$ ng new [project-name] --style scss

# style sass 설정
$ ng new [project-name] --style sass

# style less 설정
$ ng new [project-name] --style less

# style stylus 설정
$ ng new [project-name] --style stylus

---

그 다음으로 알아볼 명령어는 build입니다. build는 Angular 프로젝트를 빌드하는 명령어입니다.

기본적으로 ng build를 하게 되면 Angular 프로젝트 내에 있는 angular.json에 설정이 되어 있는 설정으로 빌드가 됩니다. 사용 방법은 아래와 같습니다.

$ ng build [project-name]

여기서 project-name을 생략을 하게 되면 angular.json에 설정이 되어 있는 "defaultProject"의 값을 사용합니다. defaultProject의 값은 ng new 로 프로젝트를 생성할 때 입력한 프로젝트명으로 기본적으로 설정이 되어있습니다.

그리고 여기서도 추가적으로 사용을 할수 있는 option들이 있습니다. 기본적으로 angular.json에 설정되어 있어 몇가지만 알아보도록 하겠습니다.

먼저 configuration 옵션입니다. --congifuration(짧게 -c)으로 사용을 합니다. angular.json에 project > [project-name] > architect > build > configurations에 있는 값을 가리키는 option 입니다. 사용 방법은 아래와 같습니다.

# production으로 빌드
$ ng build --configuration production

# Alias 이용
$ ng build -c production

configuration 옵션은 보통 테스트 환경과 배포 환경을 분리할 때 많이 사용합니다. 추가로 위의 --configuration production은 아래와 같이 사용을 할 수 있습니다.

$ ng build --prod

---

다음으로 알아볼 명령어는 add입니다. add 명령어는 Angular에서 지원을 하는 라이브러리를 추가할때 사용하는 명령어입니다. 사용하는 방법은 아래와 같습니다.

$ ng add @angular/[name]

add 명령어를 이용하여 material와 angualrfire를 추가해보도록 하겠습니다.

# Material 추가
$ ng add @angular/material

# Angularfire 추가
$ ng add @angular/fire

material은 Material design component들을 사용할 수 있는 라이브러리이고 angualrfire는 angular와 firebase를 연동하는 라이브러리입니다.

---

다음으로 알아볼 명령어는 generate(짧게 g)입니다. generate는 component와 service 등을 생성할 때 사용하는 명령어입니다. 기본적으로 사용하는 방법은 아래와 같습니다.

$ ng generate <schematic> [options]

여기서 schematic은 여러가지가 있는데 그중에 몇가지만 알아보겠습니다.

첫번째로 알아볼 schematic은 component(짧게 c)입니다. component를 생성하게 되면 기본적으로 component annotaion을 사용하는 .ts와 해당 component에 사용하는 template용 .html과 스타일용 .(css | scss | sass | less | stylus)가 생성됩니다. 스타일은 프로젝트 생성 시 설정한 스타일 파일로 생성이됩니다. 사용 방법은 아래와 같습니다.

# 기본적으로 사용하는 방법
$ ng generate component [component-name]

# Alias 사용
$ ng g c [component-name]

그리고 component 생성 시 어떤 module에 추가가 될건지 설정을 하는 --module(짧게 -m) 옵션이 있습니다. 생성한 모듈과 같은 경로에 컴포넌트를 생성을 할 경우에는 해당 모듈로 자동으로 추가가 되지만 그렇지 않을 경우에는 모듈을 설정을 해줘야합니다. 사용 방법은 아래와 같습니다.

# 기본적으로 생성이 되는 root module에 추가
# 여기서는 Angular에서 기본적으로 사용되는 prefix를 변경하지 않은 경우
$ ng g c [component-name] -m app

 

그리고 test 파일을 생성 여부를 설정할 수 있는 --skip-tests 옵션이 있습니다. 사용 방법은 아래와 같습니다.

# test를 생성하고 싶지 앞을 경우
$ ng g c [component-name] --skip-tests

# test를 생성하고 싶을 경우
$ ng g c [component-name] --skip-tests false

그리고 다음으로 알아볼 schematic은 directive 입니다. directive는 component 생성과 똑같이하면 됩니다. 사용 방법은 아래와 같습니다.

$ ng g directive [directive-name]

$ ng g d [directive-name]

그리고 다음으로 알아볼 schematic은 module 입니다. 사용 방법은 아래와 같습니다.

$ ng generate module [module-name]

$ ng g m [module-name]

추가로 해당 모듈에 routing module을 사용한다면 --routing 옵션을 추가해주면 됩니다.

$ ng g m [module-name] --routing

그리고 다음으로 알아볼 schematic은 service 입니다. 사용 방법은 아래와 같습니다.

$ ng generate service [service-name]

$ ng g s [service-name]

여기서도 test 파일을 생성 여부를 설정하는 --skip-tests 옵션이 있습니다.

# 테스트 코드를 생성하지 않도록 설정
$ ng g s [service-name] --skip-tests

# 테스트 코드를 생성하도록 설정
$ ng g s [service-name] --skip-tests false

---

다음으로 알아볼 명령어는 serve(짧게 s)입니다. serve는 Angular 프로젝트를 실행하는 명령어입니다. 기본적인 사용방법은 아래와 같습니다.

$ ng serve <project-name]> [options]

여기 있는 project-name의 경우는 build와 똑같이 설정을 하지 않을 경우 angular.json에 설정이 되어 있는 defaultProject 가 됩니다. 그리고 options도 build와 똑같습니다.

# production 설정으로 실행
$ ng s --prod

# angualr.json에 test configuration을 했을 경우
$ ng s -c test

 

---

그리고 다음으로 알아볼 명령어는 test(짧게 t) 입니다. test는 Angular 프로젝트에 작성되어 있는  test 코드를 실행하는 명령어입니다. 사용 방법은 아래와 같습니다.

$ ng test <project-name> [options]

여기서 project-name은 build, serve와 동일하게 설정을 하지 않았을 경우 angular.json에 설정되어 있는 defaultProject가 됩니다.

# production configuration 테스트
$ ng t --prod

# test configuration이 설정되어 있을 경우
$ ng t -c test

---

그리고 이번 포스팅에서 마지막으로 알아볼 명령어는 deploy 입니다. deploy는 Angular 프로젝트를 배포하는 명령어입니다. 기본적인 사용 방법은 아래와 같습니다.

$ ng deploy <project-name> [options]

 여기서 project-name은 입력하지 않았을 경우 angular.json 파일에 있는 defaultProject가 됩니다. 그리고 angularfire를 ng add 명령어를 사용하여 추가할 경우 firebase 배포 환경이 자동으로 설정이 됩니다.

추가적으로 옵션으로 configuration을 사용하여 production 배포와 test 배포를 할수 있습니다.

추가적으로 알고 싶은 Angular CLI 명령어가 있다면 Angular 공식 홈페이지에서 확인이 가능합니다.

Angular