Angular CLI

Angular CLI

이 글에선 Angular CLI에 대해 알아보고 설치, 프로젝트를 생성하고 실행하는 것까지 진행하겠습니다.

#1 Angular CLI란?

Angular CLI는 간단한 명령어를 사용해 angular 프로젝트 스캐폴딩을 생성, 실행, 빌드할 수 있으며 angular의 다양한 구성요소를 선별적으로 추가할 수 있는 커멘드라인 인터페이스이다.

개발용 서버를 내장하고 있어 간단히 프로젝트를 실행시켜 동작을 확인할 수 있다.

Angular CLI가 지원하는 기능은

● Angular 프로젝트 생성

● Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성요소 추가

● LiveReload를 지원하는 내장 개발 서버를 사용한 Angular 프로젝트 실행

● Unit/E2E 테스트 환경 지원

● 배포를 위한 Angular 프로젝트 패키징

이렇게 5가지로 볼 수 있다.

---

#2 설치

그럼 이제 바로 Angular CLI를 설치해보자.

설치가 완료되면 ng 명령어를 사용할 수 있다.

잘 설치가 되었는지 ng version 명령어로 버전을 출력하여 확인해보자.

---

#3 프로젝트 생성 & 실행

Angular 프로젝트를 생성하려면 ng new 명령어를 사용한다.

my-app이라는 이름으로 프로젝트를 생성해보자.

프로젝트 트리는 아래와 같다.

my-app/

|-------- .git/

|-------- e2e/

|-------- node-modules/

|-------- src/

|-------- .editorconfig

|-------- .gitignore

|-------- angular.json

|-------- package-lock.json

|-------- README.md

|-------- tsconfig.json

|-------- tslint.json

프로젝트를 실행하려면 ng serve 명령어를 사용한다.

이제 브라우저를 열고 localhost:4200을 입력해 접속한다.

참고로 프로젝트를 실행할 때 --open(줄여서 -o) 옵션을 추가하면 자동으로 브라우저를 열어준다.

Angular CLI가 내장하고 있는 개발용 서버는 코드의 변경을 감지하여 자동으로 리로드하는 LiveReload 기능을 제공한다.

따라서 코드 수정 후 파일을 저장하면 코드 변경을 자동으로 반영하여 번들링이 수행되고 브라우저가 리로드되어 코드 변경 결과를 즉시 확인할 수 있다.

아래와 같이 코드를 수정하고 브라우저로 돌아가보자.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello Angular!'; // 'app' -> 'Hello Angular!'
}

변경 내용을 저장하면 잠시 후 브라우저가 리로드되며 변경된 내용이 반영된다.