Angular CLI로 프로젝트 시작하기

Angular로 프로젝트를 진행해보게 되었다. React만 해봤던 나로서 Angular는 완전히 새로운 프레임워크처럼 느껴졌다. 앞으로 프로젝트를 진행하면서 내가 공부한 것들을 적어보려고 한다. 매우 기초부터 시작하는 글이므로 초보자들이 읽기 좋을 것 같다. 

 

[참고한 책]: 앵귤러 마스터 북

http://www.yes24.com/Product/Goods/58054234

따라 하며 배우는 앵귤러 마스터 북

Angular CLI 맛보기

Angular CLI를 설치해보자.

$ npm install -g @angluar/cli

 

적절한 위치로 이동하여 새 프로젝트를 생성해보자. 해당 예제에서는 frontend로 정했다.

# 프로젝트명은 frontend이다.
$ ng new frontend

 

study 디렉터리 안으로 들어가보면 굉장히 많은 것들이 생성된 것을 볼 수 있다.

가장 먼저, src 폴더를 집중해서 쳐다보자.

$ cd src
$ tree -F 
│  favicon.ico
│  index.html
│  main.ts
│  polyfills.ts
│  styles.sass
│  test.ts
├─app
│      app.component.html
│      app.component.sass
│      app.component.spec.ts
│      app.component.ts
│      app.module.ts
│
├─assets
│      .gitkeep
│
└─environments
        environment.prod.ts
        environment.ts

 

 

위와 같은 구조로 구성되어있다. 그렇다면, Angular CLI가 기본적으로 제공하는 환경은 어떻게 생겼는지 직접 확인해보자. 터미널에 아래 명령어를 적어보자.

$ ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

현재 앱은 localhost 4200번 포트에서 실행되고 있다. http://localhost:4200에 접속해보자. 

(만약 4200번이 이미 사용되고 있다고 할 경우, ng serve --port 포트번호 명령어를 활용하여 열어볼 수 있다.)

 

localhost:4200에 접속했을때의 화면

위와 같은 화면이 나온다면 잘 따라오고 있다는 뜻이다. 하지만 위에 적힌 내용을 모두 지우고 처음부터 시작하고 싶었기에 과감히 내용을 지우고 아래와 같이 적어보았다.

 

app.component.html

<p> App Works <p>

컴포넌트 만들기

이제 하나씩 추가해나가보자. 새로운 컴포넌트를 생성하자. 컴포넌트 이름은 board로 정했다.

$ ng generate component board
CREATE src/app/board/board.component.html (20 bytes)
CREATE src/app/board/board.component.spec.ts (621 bytes)
CREATE src/app/board/board.component.ts (272 bytes)
CREATE src/app/board/board.component.sass (0 bytes)
UPDATE src/app/app.module.ts (409 bytes)

.../src/app/board/board.component.ts

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

@Component({
  selector: 'app-board',
  templateUrl: './board.component.html',
  styleUrls: ['./board.component.sass']
})
export class BoardComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

컴포넌트는 크게 두 가지 부분으로 이루어진다. Component 데코레이터, 컴포넌트 정의 클래스이다. 

 

Component 데코레이터

templateUrl은 './board.component.html'이다. 이 뜻은, board 디렉토리내의 board.component.html 파일에서 템플릿이 로드된다는 뜻이다. 

 

.../src/app/board/board.component.html

<p> board works! </p>

앵귤러가 컴포넌트를 로드할 때 위 파일을 읽어 컴포넌트에 템플릿으로 사용하게 된다. 

현재는 어떻게 컴포넌트를 추가하는지만 보기 위함이므로, css작업은 잠시 미뤄두도록 하자.

 

컴포넌트 로드하기

이제 만든 컴포넌트를 사용해서 화면에 띄워보자. 우리는 위에서 board 컴포넌트를 app-board 셀렉터로 설정했기 때문에 템플릿에서 <app-board></app-board>를 사용할 수 있다. 

 

.../src/app/app.component.html

<p> App Works </p>
<app-board></app-board>

 

이제 페이지를 다시 확인해보자.

 

컴포넌트가 추가된 것을 볼 수 있다.

 

여기까지가 컴포넌트를 추가하는 방법에 대한 글이다.

다음글에서는 컴포넌트에 데이터를 추가하는 방법에 대해 적어보려고 한다.