Angular 시작하기

HELLO WORLD🙌·2020년 9월 13일

TIL

목록 보기

19/23

프로젝트 생성

$ ng new <project-name>
$ cd <project-name>
$ ng serve --open

4200포트를 사용중인 경우
$ ng serve --port 4201

프로젝트 구성요소 생성

프로젝트에 새로운 구성요소를 생성하기 위해서는 ng generate 명령어를 사용한다.
ng generate 명령어는 축약형 ng g와 동일하게 동작한다. ex) ng g c 컴포넌트이름

컴포넌트 ng generate component component-name
디렉티브 ng generate directive directive-name
파이프 ng generate pipe pipe-name
서비스 ng generate service service-name
모듈 ng generate module module-name
가드 ng generate guard guard-name
클래스 ng generate class class-name
인터페이스 ng generate interface interface-name

1. 컴포넌트 생성

ng generate component home 명령어를 실행하면 Angular CLI는 아래와 같이 동작한다.

src/app 폴더에 home 폴더를 생성한다.
컴포넌트는 URL 경로의 단위(화면 단위)가 될 수 있기 때문에 폴더로 구분된다.
src/app/home 폴더에 4개의 파일을 생성한다.
- home.component.html
  컴포넌트 템플릿을 위한 HTML 파일
- home.component.css
  컴포넌트 템플릿의 스타일링을 위한 CSS 파일
- home.component.ts
  컴포넌트 클래스 파일
- home.component.spec.ts
  컴포넌트 유닛 테스트를 위한 스펙 파일
루트 모듈 src/app/app.module.ts에 새롭게 생성된 컴포넌트를 등록한다.
컴포넌트 클래스를 import하고 @NgModule 데코레이터의 declarations 프로퍼티에 컴포넌트 클래스를 등록한다.

// src/app/home/home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home', //selector 프로퍼티는 컴포넌트를 마크업으로 표현할 때 사용하는 이름
  templateUrl: './home.component.html', //외부 파일로 작성된 HTML 템플릿(컴포넌트의 뷰를 정의)의 경로 (inline으로도 가능)
  styleUrls: ['./home.component.css'] //외부 파일로 작성된 CSS 파일의 경로 (inline으로도 가능)
})
export class HomeComponent implements OnInit {
//컴포넌트 클래스의 이름운 ng g c 명령어에 지정한 컴포넌트 이름을 파스칼 표기법(PascalCase)으로 자동 변경하여 생성된다.
  constructor() { }

  ngOnInit() { }
}

임포트 영역
컴포넌트에 필요한 의존 모듈을 임포트한다. Angular가 제공하는 Angular 라이브러리 모듈의 경우 @가 붙어있으며 경로를 명시하지 않는다. 또한 npm을 사용하여 설치한 의존 모듈도 경로를 명시하지 않는다. 그 이외의 경우, 상대 경로를 명시하여야 한다.

@Component 데코레이터 영역
@Component 데코레이터에는 메타데이터 객체를 인자로 전달한다. 메타데이터 객체는 컴포넌트 생성에 필요한 정보(셀렉터, 템플릿, 스타일 정의 등)를 담고 있는 객체이다. 예를 들어 메타데이터 객체의 templateUrl 프로퍼티에는 컴포넌트의 뷰를 정의한 템플릿의 상대경로를 설정한다.

컴포넌트 클래스 영역
컴포넌트 뷰를 관리하기 위한 로직을 담은 클래스를 정의한다. 컴포넌트 클래스는 컴포넌트의 내부 관심사인 뷰의 관리에 집중해야 하며 애플리케이션 공통 관심사는 서비스로 분리하여야 한다.

루트 컴포넌트인 src/app/app.component.ts에서 home 컴포넌트를 사용하려면 src/app/app.component.html을 아래와 같이 수정한다.

<!-- src/app/app.component.html -->
<app-home></app-home>

기본 셀렉터 접두사를 변경하고 싶다면 ng new 명령어로 프로젝트를 생성할 때 --prefix 옵션을 추가한다.

$ ng new my-app --prefix <prefix-name>

컴포넌트 클래스 이름은 루트 모듈(src/app/app.module.ts)에 자동으로 import되고 @NgModule 데코레이터의 declarations 프로퍼티에 자동으로 추가된다.

2. 디렉티브 생성

ng generate directive highlight 명령어를 실행하면 Angular CLI는 아래와 같이 동작한다.

src/app 폴더에 2개의 파일을 생성한다.
- highlight.directive.ts
  디렉티브 클래스 파일
- highlight.directive.spec.ts
  디렉티브 유닛 테스트를 위한 스펙 파일
루트 모듈 src/app/app.module.ts에 새롭게 생성된 디렉티브를 등록한다.
디렉티브를 import하고 @NgModule 데코레이터의 declarations 프로퍼티에 디렉티브를 등록한다.

컴포넌트를 생성할 때와는 달리 디렉티브를 위한 폴더는 생성되지 않으며 기본적으로 src/app 폴더에 생성된다.

// src/app/highlight.directive.ts
import { Directive } from '@angular/core';

@Directive({
  selector: '[appHighlight]' // 디렉티브의 이름 appHighlight은 HTML 어트리뷰트처럼 사용된다. 
})
export class MyDirectiveDirective {

  constructor() { }

}

3. 모듈 생성

ng generate module todos 명령어를 실행하면 Angular CLI는 아래와 같이 동작한다.

src/app 폴더에 todos 폴더를 생성한다.
src/app/todos 폴더에 1개의 파일을 추가한다.
- todos.module.ts
  모듈 클래스 파일
- todos.module.spec.ts
  모듈 유닛 테스트를 위한 스펙 파일

생성된 모듈은 해당 모듈을 사용하려는 다른 모듈의 imports 프로퍼티에 등록되어야 한다.

👇 루트 모듈에 생성한 모듈을 등록하는 예시

// src/app/app.module.ts
...
import { TodosModule } from './todos/todos.module';

@NgModule({
  ...
  imports: [
    ...
    TodosModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 서비스 생성

ng generate service data 명령어를 실행하면 Angular CLI는 아래와 같이 동작한다.

루트 폴더에 2개의 파일을 생성한다.
- user.service.spec.ts
  서비스 유닛 테스트를 위한 스펙 파일
- user.service.ts
  서비스 클래스 파일

컴포넌트를 생성할 때와는 달리 서비스를 위한 폴더는 생성되지 않으며 기본적으로 src/app 폴더에 생성된다.

생성된 data.service.ts를 살펴보면 @Injectable 데코레이터 함수에 전달된 메타데이터 객체의 providedIn 프로퍼티 값으로 ‘root’가 설정되었다.

// src/app/data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
  //프로퍼티 값으로 ‘root’를 설정하면 루트 인젝터에게 서비스를 제공하도록 지시하여 
  //애플리케이션 전역에서 서비스를 주입할 수 있도록 한다. (Angular 6이상)
})
export class DataService {
  constructor() { }
}

프로젝트 빌드

 $ ng build

빌드가 완료되면 프로젝트 루트에 빌드 결과물이 포함된 dist 폴더가 생성된다.

Angular CLI 빌드 기능은 내부적으로 모듈 번들러인 webpack을 사용하며 아래와 같은 작업의 자동화를 지원한다.

TypeScript에서 JavaScript로의 트랜스파일링
디버깅 용도의 source map 파일 생성
의존 모듈과 HTML, CSS, 자바스크립트 번들링
AoT 컴파일
코드의 문법 체크
코드의 규약 준수 여부 체크
불필요한 코드의 삭제 및 압축

프로덕션 빌드와 배포

ng build 명령어를 실행하면 Angular CLI는 src/environments/environments.ts 파일을 참조하여 빌드를 수행한다.

// src/environments/environments.ts
export const environment = {
  production: false
};

이때 실행된 빌드는 개발환경 빌드로 프로덕션 용도로 최적화되어 있지 않다. 프로덕션 빌드를 수행하기 위해서는 아래의 명령어를 실행한다.

$ ng build --prod

HELLO WORLD🙌

#frontend

이전 포스트

크로스 브라우저 테스팅(Cross Browser Testing)

다음 포스트