[ Angular ] angular-cli.json의 Schema로 알아보는 angular-cli 기능들

최근 Angular-cli와 NativeScript 그리고 electron를 이용하여 간단한 프로젝트 및 seed 프로젝트를 구성하고 있는데 angular-cli에 모르고 있던 기능들이 많아서angular-cli.json의 설정들을 정리하고자 합니다.

해당 포스트는 angular-cli wiki의 내용들을 위주로 작성되었습니다.

작성당시 angular-cli버전은 1.2.2 입니다.

Angular-cli.json의 구성

---

Angular-cli.json의 속성들은 크게 아래와 같이 구성되어있습니다.

- project

- apps

- e2e

- lint

- test

- defaults

- packageManager

- warnings

project(프로젝트 관련 속성)

---

//프로젝트 전역에 해당하는 설정
"project": {
  //프로젝트 이름[string]
  "name": "프로젝트의 이름",
  //eject 여부[boolean](ng eject를 실행하면 webpack 설정을 직접 하도록 변경가능하다.) 기본값: false
  "ejected": false
}

- name(string) : 프로젝트의 이름

angular-cli의 ng new로 프로젝트 생성시 입력되는 이름이 기본값으로 들어갑니다.

- ejected(boolean) : eject 여부 기본값은 false

angular-cli에는 ng eject라는 명령어가 있습니다. 해당 명령은 어플리케이션의 webpack 설정을 cli에서가 아닌 직접 설정 가능하도록 변경하는 기능이며 해당메뉴로 변경시 ejected: true로 angular-cli.json이 변경됩니다.

다시 복구가 불가능하다고 하지만 변경했던 angular-cli.json과 package.json의 script 부분 그리고 의존성 추가된 webpack 관련 loader들만 변경하면 다시 ejected:false 상태로 변경가능합니다.

eject 시 주요 변경 사항

1. package.json - scripts

초기 ng new 시 scripts 속성 구분

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

ng eject 후 변경된 scripts 속성

"scripts": {
  "ng": "ng",
  "start": "webpack-dev-server --port=4200",
  "build": "webpack",
  "test": "karma start ./karma.conf.js",
  "lint": "ng lint",
  "e2e": "protractor ./protractor.conf.js",
  "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
}

2. package.json - devDependencies

개발의존성에 아래의 패키지들이 추가됩니다.(webpack에서 사용되는 모듈로더들이네요)

"devDependencies": {
  "webpack-dev-server": "~2.5.1",
  "webpack": "~3.3.0",
  "autoprefixer": "^6.5.3",
  "css-loader": "^0.28.1",
  "cssnano": "^3.10.0",
  "exports-loader": "^0.6.3",
  "file-loader": "^0.10.0",
  "json-loader": "^0.5.4",
  "less-loader": "^4.0.2",
  "postcss-loader": "^1.3.3",
  "postcss-url": "^5.1.2",
  "raw-loader": "^0.5.1",
  "sass-loader": "^6.0.3",
  "script-loader": "^0.7.0",
  "source-map-loader": "^0.2.0",
  "istanbul-instrumenter-loader": "^2.0.0",
  "style-loader": "^0.13.1",
  "stylus-loader": "^3.0.1",
  "url-loader": "^0.5.7"
}

3. webpack.confing.js 파일 추가

프로젝트 루트에 webpack.config.js이 추가됩니다. cli에서 사용되던 webpack.config.js이며 해당 파일을 수정하여 webpack 설정을 커스텀 할 수 있습니다.

4. angular-cli.json 설정 수정

angular-cli.json에 project.ejected 값이 true로 변경됩니다.

apps(어플리케이션 관련 설정)

---

//어플리케이션에 해당하는 설정[array]
"apps": [
  {
    //어플리케이션 이름[string](cli로 생성시에는 입력안되어있다.) 기본값: 프로젝트 이름을 사용함
    "name": "어플리케이션 이름",
    //어플리케이션 실제 소스 경로[string](cli로 생성시 src로 되어있다.)
    "root": "src",
    //빌드된 결과물 소스가 생성될 경로[string] 기본값: "dist"
    "outDir": "dist",
    //프로젝트에서 사용되는 assets 경로[array<string>](cli로 생성시 ["assets", "favicon.ico"]으로 되어있다.
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "deployUrl": "",
    //어플리케이션 시작 html 파일[string] 기본값: "index.html"
    "index": "index.html",
    //어플리케이션 진입 시작 파일[string](cli로 생성시 "main.ts")
    "main": "main.ts",
    //어플리케이션 진입전 polyfill 처리하는 파일[string](cli로 생성시 "polyfills.ts")
    "polyfills": "polyfills.ts",
    //테스트 진입 시작 파일[string](cli로 생성시 "test.ts")
    "test": "test.ts",
    //typescript 설정파일[string] 기본값: "tsconfig.app.json"
    "tsconfig": "tsconfig.app.json",
    //typescript 설정파일 unit Test 파일[string](cli로 생성시 "tsconfig.spec.json")
    "testTsconfig": "tsconfig.spec.json",
    //생성된 selector에 적용될 접두사
    "prefix": "app",
    //실험적인 기능인 @angular/service-worker 사용여부[boolean] 기본값: false
    "serviceWorker": false,
    //빌드시 순환의존성 경고를 표시합니다.[boolean] 기본값: true
    "showCircularDependencies": true,
    //빌드시 포함될 전역 스타일 파일들[string|array<string>]
    "styles": [
      "styles.sass"
    ],
    //css 전처리기 옵션 (less, sass, scss)
    "stylePreprocessorOptions": {
      //포함시킬 경로들 경로는 root경로로 포함됩니다.[array<string>](styles와 다른점은 파일이냐 경로이냐 차이)
      "includePaths": []
    },
    //빌드시 포함될 전역 자바스크립트 파일들[array<string>]
    "scripts": [],
    //환경설정 파일 경로[string](cli로 생성시 environments/ 경로에 위치해있음)
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
]

apps에 주요한 설정이 들어가 있으며 거의 프로젝트 초반단계에선 주로 해당 영역만 보게되는 경우가 많습니다. 그만큼 angular-cli.json의 핵심이라고 봐도되겠습니다.

- name(string): 어플리케이션의 이름

cli로 생성 시 project.name에만 입력되어있습니다. 별도로 설정할 필요 없습니다.

- root(string): 어플리케이션 소스 root 경로

cli로 생성시 src로 입력되어있으며 해당 경로를 변경해야할 경우 root 속성 값을 변경해야합니다. ng new 명령시 --source-dir=src or -sd=src 옵션을 이용하여 생성할때 부터 변경이 가능합니다.

- outDir(string): build된 결과물이 생성되는 경로 기본값은 dist

angular 프로젝트를 build한 결과물이 생성되는 경로입니다. 해당값이 설정이 안되어있는경우 distribute를 의미하는 dist로 설정됩니다.

해당 경로는 .gitignore에 포함되어있어 버전관리 대상이 아니도록 설정되어있습니다.

- assets(array<string>): assets에 파일들을 추가하도록 설정합니다.

프로젝트에서 사용되는 asset 파일들을 추가하는 속성입니다. 폴더 경로를 설정할 수 있으며 파일을 추가할 수도 있습니다. favicon.icon 혹은 manifest.json파일들을 이 속성에 추가하시면 됩니다.

- deployUrl(string): build 된 결과물을 배포할 url를 설정합니다.

만약 aws 클라우드 프론트 같은 서비스를 이용하여 angular 서비스의 js 와 css를 배포하고 있다면 클라우드 프론트의 엔드포인트를 설정하여 운영할 수 있도록 추가된 값입니다. build 결과물에 publicPath를 설정해주며, 미설정시에는 상대경로로 설정되어 결과물이 생성된다.

- index(string): 어플리케이션이 시작되는 html 파일을 설정합니다. 기본값은 index.html

어플리케이션이 시작되는 html의 파일을 설정하는 속성이며, 미설정시 기본값은 index.html입니다.

- main(string); 어플리케이션 진입시작 파일을 설정합니다.

angular 어플리케이션이 시작되는 파일을 설정합니다. cli로 생성시 기본적으로는 main.ts가 설정되어있습니다.

- polyfills(string): 어플리케이션 진입전 polyfill 처리를 하는 파일을 설정합니다.

polyfill이란 poly + fill의 단어로 여러가지를 채우다라는 뜻을 의미하고 있습니다.(자세한 내용은 해당 링크 참고) 구형브라우저들이 지원하지 않는 최신 기능들을(html5) 가능하도록 해주는 js / css를 의미합니다. angular에서는 이러한 polyfill를 쉽게 이용가능하도록 지원해주고 있습니다. angular-cli로 생성된 프로젝트에는 polyfills.ts에 포함되어 있습니다.

- test(string): 어플리케이션 테스트 진입 파일을 설정합니다.

angular-cli에서는 unit test를 위해 karma를 사용하도록 되어있습니다. 테스트 코드 진입 파일을 설정하는 속성으로 기본적으로 cli로 프로젝트 생성했을때는 test.ts로 설정되어 있습니다.

- tsconfig(string): typescript config 파일을 설정합니다. 기본값은 tsconfig.app.json

angular는 기본적으로 javascript / typescript / dart 등의 언어로 개발이 가능하지만 angular-cli는 typescript로 작성되도록 셋팅이 됩니다. typescript로 작업시 typescript의 빌드 옵션을 설정 할 수 있는 tsconfig가 필요하며 angular-cli에서는 build시 사용할 tsconfing를 설정 가능하도록 되어있습니다. 또한 어플리케이션 코드말고 테스트 코드 또한 typescript로 되어있어 어플리케이션 코드와 테스트 코드의 설정 파일을 별도로 나뉘어놨습니다. 해당 속성은 어플리케이션에 해당하는 설정 파일이므로 tsconfig.app.json 파일로 기본값이 되어있습니다.

- testTsconfig(string): 테스트코드의 typescript config 파일을 설정합니다.

위에서 설명한거와 같이 어플리케이션 코드와 테스트 코드 모두 typescript 코드로 작성되어있으며 위에서는 어플리케이션 코드의 typescript 설정파일이였다면 해당 속성은 테스트 코드의 설정 파일입니다. cli로 프로젝트 생성시 설정되어있는 값은 "tsconfig.spec.json"  입니다.

- prefix(string): 생성되는 컴퍼넌트들의 selector의 추가되는 접두사를 설정합니다.

ng generator 같은 명령어로 생성되는 selector에 기본적으로 추가되는 접두사를 설정합니다. cli로 프로젝트 생성시 app이 기본적으로 들어가있으며 이럴 경우 ng generator toolbar 명령시 app-toolbar로 selector가 생성됩니다.

- serviceWorker(boolean): @angular/service-worker 사용여부입니다.  기본값은 false

angular 팀에서 아직 시험단계로 서비스중인 serviceworker 모듈에 관련된 속성입니다. 해당 내용은 google i/o 2017에서 소개된적이 있으며, 그 내용을 cli로 구현하였습니다. 관련 내용은 해당 링크에서 확인 가능합니다.

- showCircularDependencies(boolean): build시 circular-dependency waring 확인 여부입니다. 기본값은 true

webpack build 시 circular-dependency waring이 있는지 없는지 확인 여부입니다.

- styles(string|array<string>): build시 전역으로 포함될 style 파일들입니다.

보통 이 영역에 직접 작성하는 스타일 파일들과 3rd library들을 추가하여 추가하고 있습니다.

- stylePreprocessorOptions(object): css 전처리기에 전달할 옵션속성입니다(현재는 includePaths만 가능)

- includePaths(array<string>): build에 추가할 path를 설정합니다.

해당 속성과 styles와의 차이는 파일이냐 경로냐 정도로 생각하시면 됩니다.

- scripts(array<string>): build시 전역으로 포함될 script 파일들입니다.

styles과 마찬가지로 전역으로 추가할 script 파일들을 설정하는 곳입니다. 주로 hammer.js 같은 3rd library 들을 추가합니다.

- environmentSource(string): 환경파일 설정합니다.

build시 환경에 따른 환경변수들을 설정 할 수 있는 영역입니다. cli로 생성시 기본적으로 "environments/environment.ts" 입력되어 있으며 해당 부분은 환경변수 기본값으로 사용됩니다.

- environments(object): 환경들을 정의 및 사용할 환경변수 파일을 설정합니다.

build시 사용될 환경들에 대한 정의를 할 수 있으며 해당 환경이 사용될 환경변수파일도 설정 가능합니다.

e2e(end-to-end 테스트 관련 설정)

---

"e2e": {
   //angular team에서 만든 angular 용 e2e 프레임워크인 protractor 설정
   "protractor": {
      "config": "./protractor.conf.js"
   }
}

e2e 속성은 angular e2e test 프레임워크인 protractor 관련 설정이 있습니다. protractor 사용법의 경우 윤영식님 블로그의 글을 보시면 자세하게 확인 가능합니다.

lint(TSlint 관련 설정)

---

//TSlint 관련 설정[array]
"lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
]

lint 속성은 Tslint 관련된 속성으로 각 프로젝트(어플리케이션 / unit test / e2e test 등)별로 tslint를 설정을 처리할 수 있습니다. 위의 json은 cli로 생성시 기본적으로 설정될 json으로 project 속성 말고 files / tslintConfig / exclude 같은 속성들이 존재합니다만 딱히 설정할 일이 크지는 않을 것 같습니다. 각 항목들은 아래와 같습니다.

- files(string|array<string>): lint 대상 파일들을 추가합니다.

각 프로젝트별로 config파일들에 보면 아래와 같이 설정되어있습니다. 아래는 cli 설치 후 tsconfig.spec.json 입니다.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

보시면 files가 있는데 이 부분을 cli.json에 직접 설정도 가능합니다. files는 glob를 지원합니다.

- project(string): tsconfig 파일의 위치를 설정합니다.

프로젝트의 tsconfig 파일위치를 설정하며, 대부분 lint의 속성들은 저 파일안에 포함시켜서 작성하고 있습니다. 위에서 project 속성외에는 딱히 설정할 일 없다는

이유가 이 때문입니다. 

- tslintConfig(string): tslint.json의 위치를 설정하는 항목입니다. 기본값 "tslint.json"

프로젝트별로 tsconfig를 따로 써야할 경우 설정 할 수 있겠지만 project 속성에 포함하는 파일로 변경이 가능하니 tsconfig.app.json 같은 파일에 수정하시는걸 추천드립니다.

- exclude(string|array<string>): lint에 제외할 경로나 파일을 설정합니다.

 lint 대상이 아닌경우를 추가합니다. 보통 아래와 같이 많이 사용합니다.(아래는 cli로 생성시 기본 tsconfig.app.json)

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

test(unit test 관련 설정)

---

//unit test와 관련된 설정
"test": {
  "karma": {
    "config": "./karma.conf.js"
  }
}

angular-cli에서는 기본적으로 karma를 이용해서 unit test를 할 수 있도록 지원하고 있습니다. 해당 속성에는 karma / codeCoverage 에 대한 속성을 지원하고 있습니다.

- karma

- config(string): karma config 파일 경로를 설정합니다.

karma의 설정 파일 경로를 설정하는 속성으로 cli로 프로젝트 생성시 프로젝트 root에 karma.conf.js 파일이 생성되어 있습니다.

- codeCoverage

- exclude(array<string>): karma coverage 체크시 제외할 파일이나 경로를 설정합니다.

해당 속성은 glob pattern을 적용합니다.

defaults(generate 명령시 기본값 설정)

---

"defaults": {
    //style 파일형태[string](cli로 생성할때 --style 옵션에서 선택 가능합니다.)
    "styleExt": "sass",
    //component 생성시 설정
    "component": {
      //어플리케이션 루트에 생성할지 여부[boolean](true시 apps.root 경로에 소스가 생성됩니다.) 기본값: false
      "flat": false,
      //test 코드 생성 여부[boolean] 기본값: true
      "spec": true,
      //inline style로 생성할건지 여부[boolean](true시 스타일 파일이 생성안되고 component 메타데이터 안에 스타일을 입력합니다.) 기본값 : false
      "inlineStyle": false,
      //inline html로 생성할건지 여부[boolean](true시 html 파일이 생성안되고 component 메타데이터 안에 html를 입력합니다.) 기본값 : false
      "inlineTemplate": false,
      //view 캡슐화 모드[string] Emulated / Native / None 기본값: "Emulated"
      //https://angular.io/guide/component-styles#view-encapsulation
      "viewEncapsulation": "Emulated",
      //change detection 전략 모드[string] Default / OnPush 기본값: Default
      "changeDetection": "Default"
    },
    //watch.poll 옵션값[number] 기본값: undifined
    "poll": 1000,
    //class 생성 시 설정
    "class": {
      "spec": false
    },
    //derective 생성 시 설정
    "directive": {
      "flat": true,
      "spec": true
    },
    //guard 생성 시 설정
    "guard": {
      "flat": true,
      "spec": true
    },
    //interface 생성 시 설정
    "interface": {
      //인터페이스 이름에 접두사 설정합니다.[string]
      "prefix": ""
    },
    //module 생성 시 설정
    "module": {
      "flat": false,
      "spec": false
    },
    //pipe 생성 시 설정
    "pipe": {
      "flat": true,
      "spec": true
    },
    //service 생성 시 설정
    "service": {
      "flat": true,
      "spec": true
    },
    //ng serve 명령 시 설정
    "serve": {
      //실행될 서버 port[number] 기본값: 4200
      "port": 4200,
      //실행될 서버 host[string] 기본값: "localhost"
      "host": "localhost",
      //ssl 여부[boolean] 기본값: false
      "ssl": false,
      //sslKey 경로[string](ssl 사용시 sslKey 위치) 기본값: "ssl/server.key"
      "sslKey": "ssl/server.key",
      //sslCert 경로[string](ssl 사용시 sslCert 위치) 기본값: "ssl/server.crt"
      "sslCert": "ssl/server.crt"
    }
  }

defaults 속성은 주로 ng generate 명령어와 관련된 설정들입니다. angularjs의 경우 yoman의 generator들을 이용하여 컴퍼넌트나 서비스 파일들을 추가했었는데 프로젝트 진행시 generator들이 지원되지않거나 수정이 필요한 경우 포크를 받아 별도 generator를 만들어 사용해야하는 불편함이 있었는데 angular-cli는 이러한 점을 어느정도 설정이 가능하도록 제공하고 있습니다. 대부분은 flat / spec 속성만 있으며 component나 interface 생성시는 다른 옵션이 보입니다.

대부분 속성들의 세부항목이 반복되어서 반복되지 않는 속성들만 알아보겠습니다.

- styleExt(string): style 코드 확장자를 결정합니다.(css / scss / less / sass / stylus)

해당 속성은 component 생성시 angular-cli.json의 defaults.component.inlintstyle = false 인 경우 스타일 코드 생성될 확장자를 결정합니다. 또한 ng new 명령으로 프로젝트 생성시 --style=sass 와 같이 옵션을 넣어 생성 가능합니다.

- component(object): ng generate component 명령시 관련된 설정입니다.

- flat(boolean): 생성되는 소스가 angular-cli.json의 apps.root 디렉토리에 생성할지 여부를 설정합니다.

ng generate 명령과 관련된 설정들은 거의 대부분 이 하위속성이 들어가 있습니다. 모두 같은 내용이며 단지 기본값만 속성마다 다릅니다. component의 경우 기본값이 false입니다.

- spec(boolean): 생성하는 코드의 테스트 코드를 생성할 것인지 설정합니다.

이 속성도 flat과 마찬가지로 대부분 하위속성으로 포함되어있으며 마찬가지로 기본값만 다릅니다. component의 경우 기본값이 true입니다.

- inlineStyle(boolean): 생성하는 컴퍼넌트 소스의 inlineStyle 여부를 설정합니다. 기본값: false

해당 속성은 컴퍼넌트에 관련된 설정으로 Component 메타 데이터에 style를 inline 방식으로 할지 아니면 style url 방식으로 할지 결정합니다. false인 경우 컴퍼넌트 생성시 styleExt 설정한 확장자로 스타일코드도 같이 생성됩니다.

- inlineTemplate(boolean): 생성하는 컴퍼넌트 소스의 inlineTemplate 여부를 설정합니다. 기본값: false

마찬가지로 Component 메타 데이터의 템플릿이 inline 방식으로 할지 결정합니다. false인 경우 컴퍼넌트 생성시 html 파일도 같이 생성됩니다.

- viewEncapsulation(string): view 캡슐화 모드를 설정합니다.

해당 설정은 Component의 캡슐화 모드를 설정합니다. 미설정시 메타데이터에 encapsulation항목이 미입력되며 이럴경우 Emulated 로 설정됩니다. encapsulation항목에 대해서는 공식 문서에 나와있습니다. 설정 가능한 항목값 (Emulated / Native / None) 

- changeDetection(string): 컴퍼넌트 변화감지 전략을 설정합니다.

해당 설정은 Default / OnPush 값들이 설정 가능하며 미설정시 메타데이터에 changeDetection 항목이 미입력되며 이럴경우는 Default 로 설정됩니다. 성능상의 이슈로 OnPush로 설정하는 컴퍼넌트들이 있겠지만 모든 컴퍼넌트 생성시 OnPush로 해야 할지는 잘 모르겠네요. changeDetection관련 내용은 해당 링크에서 확인 가능합니다.

- poll(number): watch.poll에 전달되는 속성값으로 미설정(undefined)이 기본값입니다.

webpack watch에 관련된 설정으로 파일 변경체크를 몇초(밀리세컨드)마다 하는지 설정하는 값입니다.

- class(object): ng generate class 명령 시 설정입니다.

class 생성시에는 spec 설정만 가능합니다. flat 여부는 설정 불가능하며 apps.root 경로에 무조건 생성됩니다.

- directive / guard / module / pipe / service(object): ng generate [property] 명령시 설정입니다.

해당 속성들은 모두 하위 속성으로 flat / spec 속성을 가지고 있으며 기본값이 모두 다릅니다.(기본값은 위의 angular-cli.json 예시 참고)

- interface(object): ng generate interface 명령 시 설정입니다.

위의 명령들과 다르게 prefix 속성만 설정 할 수 있습니다.

- prefix(string): ng generate interface 명령 시 생성되는 인터페이스 네임에 접두사를 설정합니다.

ng generate interface 명령시 코드는 apps.root 경로에 생성되며 생성되는 인터페이스 코드 네임에 접두사를 설정합니다. 미설정시 접두사 없이 생성명령에 붙인 이름으로만 생성됩니다.

- serve(object): ng serve 관련 설정입니다.

해당 속성들은 모두 ng serve에 관련된 속성들로 이게 언제부터 지원했는지는 잘 모르겠는데 정말 편하네요. 딱히 추가 설명드릴게 없어 하위속성만 나열했습니다.

- port(number): ng serve로 생성되는 서버의 포트를 설정합니다. 기본값: 4200

- host(string): ng serve로 생성되는 서버의 호스트를 설정합니다. 기본값: "localhost"

- ssl(boolean): https 프로토콜 여부입니다. 기본값 false

- sslKey(string): ssl 사용시 sslKey 파일 위치입니다. 기본값: "ssl/server.key"

- sslCert(string): ssl 사용시 sslCert 파일 위치입니다. 기본값: "ssl/server.crt"

packageManager(패키지 매니저 설정)

---

//패키지 매니저 어떤걸 사용할지 여부[string](npm / cnpm / yarn)
"packageManager": "npm"

cli에서 작업시 패키지 매니저 관련 작업을 어떤 툴을 이용할지 선택할 수 있습니다. 미설정시 npm으로 설정됩니다. ng set --global packageManager=yarn 명령으로 설정 변경이 가능합니다. 

warnings(경고 표시 설정)

---

//console 경고 사용여부 설정
"warnings": {
  //노드 버전이 호환 가능하지 않을 때 경고 표시여부[boolean] 기본값: true
  "nodeDeprecation": true,
  //사용자가 cli를 설치하였을때 경고 표시여부[boolean] 기본값: true
  "packageDeprecation": true,
  //글로벌 버전이 로컬 버전보다 새로운 경우 경고 표시여부[boolean] 기본값: true
  "versionMismatch": true
}

해당 속성들은 기본적으로 안건드리는걸 추천드립니다. 정말 필요에 의해서 무시해야하는 경우만 설정하시면 될 듯 하네요.

마무리

---

이 글을 처음 작성할려고 생각했을때는 금방 작성이 끝날거라 생각했었는데, 생각보다 cli에 많은 옵션들이 있었습니다.

블로그로 글 작성시 잘못된 정보를 남길순 없어서 최대한 자료조사를 하다보니 제가 모르던 옵션들이 너무 많아 자료조사만 2일이 걸렸습니다. 그 만큼 이 글을 통해 다른분들에게 조금이나마 도움이 되었으면 좋겠습니다.

해당 포스트에 잘못된점이 있거나 궁금하신 점 피드백 모두 환영입니다.