Angular로 웹 애플리케이션을 작성하기 위해 MacOS에 Angular CLI로 개발 환경을 구축하기위한 비망록

Angular CLI란 무엇입니까?

Angular를 사용하여 개발하기 위한 명령줄 도구입니다. Angular를 사용하는 경우에는 기본적으로 이것을 사용하게 될까 생각합니다만, 장점은 여러가지 있습니다.

CLI가 프로젝트의 큰 프레임과 유형을 제공합니다.

이 점에 대해서 생각할 필요는 없어진다

유지 보수성 향상

환경 구축을 간단하게 할 수 있게 된다

비즈니스 로직 구현을 신속하게 진행

Angular CLI를 설치하는 방법

npm install -g @angular/cli

참고 : Angular CLI를 npm install하려고하면 EEXIST : file already exists ....와 같은 오류가 발생한 경우

이번 버전은 다음과 같습니다.@angular/[email protected]

프로젝트 만들기

프로젝트 이름 결정

이번은 자주 있는 것입니다만 my-app 로 해 보겠습니다

명령

% ng new my-app

↑ 명령을 두드리면 ↓와 같은 질문 프롬프트가 표시됩니다.
이것에 대답합니다.

? Would you like to add Angular routing? (y/N)
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

그러면 다음과 같은 파일들이 생성됩니다.

CREATE probless/README.md (1026 bytes)
CREATE probless/.editorconfig (274 bytes)
CREATE probless/.gitignore (631 bytes)
CREATE probless/angular.json (3670 bytes)
CREATE probless/package.json (1258 bytes)
CREATE probless/tsconfig.base.json (458 bytes)
CREATE probless/tsconfig.json (475 bytes)
CREATE probless/tslint.json (3184 bytes)
CREATE probless/.browserslistrc (852 bytes)
CREATE probless/karma.conf.js (1020 bytes)
CREATE probless/tsconfig.app.json (292 bytes)
CREATE probless/tsconfig.spec.json (338 bytes)
CREATE probless/src/favicon.ico (948 bytes)
CREATE probless/src/index.html (294 bytes)
CREATE probless/src/main.ts (372 bytes)
CREATE probless/src/polyfills.ts (2835 bytes)
CREATE probless/src/styles.styl (80 bytes)
CREATE probless/src/test.ts (753 bytes)
CREATE probless/src/assets/.gitkeep (0 bytes)
CREATE probless/src/environments/environment.prod.ts (51 bytes)
CREATE probless/src/environments/environment.ts (662 bytes)
CREATE probless/src/app/app-routing.module.ts (246 bytes)
CREATE probless/src/app/app.module.ts (393 bytes)
CREATE probless/src/app/app.component.styl (0 bytes)
CREATE probless/src/app/app.component.html (25757 bytes)
CREATE probless/src/app/app.component.spec.ts (1065 bytes)
CREATE probless/src/app/app.component.ts (213 bytes)
CREATE probless/e2e/protractor.conf.js (869 bytes)
CREATE probless/e2e/tsconfig.json (299 bytes)
CREATE probless/e2e/src/app.e2e-spec.ts (641 bytes)
CREATE probless/e2e/src/app.po.ts (301 bytes)
⠼ Installing packages...
✔ Packages installed successfully.
    Successfully initialized git.

프로젝트 이동

$ cd my-app
$ ng serve

↑의 명령을 두드리면 다음과 같은 텍스트가 표시됩니다.

Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.9 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.64 MB [initial] [rendered]
Date: 2020-07-09T08:47:41.158Z - Hash: 485f10dac3e8cce82aab - Time: 8120ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

잇달아 컴파일되어 가, localhost:4200 로 브라우저로부터 확인할 수 있게 됩니다.



일단 이것으로 개발할 수 있는 환경은 갖추어졌습니다.