Skip to content

2. 프로젝트 생성하기

Angular CLI를 사용하면 애플리케이션의 기본 틀을 구성할 수 있다. 이렇게 만든 기본 틀을 기반으로 히어로들의 여행 앱을 구현해 보자.


이 문서에서는 다음 내용에 대해 다룬다.


1] 개발환경 설정하기

2] 애플리케이션 프로젝트 생성하기

3] 애플리케이션 실행해보기

4] 애플리케이션 개발 시작하기


Note


1. 워크스페이스와 애플리케이션 기본 틀 생성하기

Angular 애플리케이션은 Angular 워크스페이스 안에서 개발한다. 워크스페이스는 여러 개의 프로젝트로 구성되는 단위이며, 프로젝트는 애플리케이션이나 라이브러리, 엔드-투-엔드(e2e) 테스트를 구성하는 파일들의 집합을 의미한다. 이 튜토리얼에서는 새로운 워크스페이스를 만드는 것부터 시작한다.


워크스페이스를 새로 만들고 애플리케이션을 구성하려면 다음 순서대로 진행한다:


아직 Angular 워크스페이스 폴더 안에 아무것도 있지 않은 것을 전제로 한다. 이전에 시작하기 문서를 진행하면서 이미 만든 워크스페이스가 있다면, 이 폴더 밖에서 작업한다.


node -v

v18.0.0

npm init
npm install @angular/cli


Angular CLI 명령 ng new를 실행해서 angular-tour-of-heroes라는 이름으로 워크스페이스를 생성한다:


ng new angular-tour-of-heroes


커맨드 창에서 ng new 명령을 실행하면 프로젝트에 어떤 설정값을 추가로 지정할지 물어본다. 엔터키를 눌러서 기본값으로 진행한다.


이 과정으로 진행하면 Angular CLI가 Angular npm 패키지와 서드파티 패키지를 설치하기 때문에 시간이 약간 걸릴 수 있다.


그리고 이 명령은 몇 가지 프로젝트 파일을 준비하기도 한다:


  • angular-tour-of-heroes라는 폴더 이름으로 새로운 워크스페이스를 생성한다.
  • 서브 폴더 src/app를 생성하고 이 폴더에 애플리케이션 초기 코드를 생성한다.
  • 환경설정 파일을 생성한다.


이제 간단한 Welcome 앱이 완성되었다.


2. 애플리케이션 실행하기

워크스페이스 폴더로 이동해서 애플리케이션을 실행한다.


cd angular-tour-of-heroes
ng serve --open


Note

  • ng serve 명령을 실행하면 개발서버가 시작되며, 이 서버는 변경된 파일의 내용을 자동으로 반영하는 워치 모드로 동작한다.
  • ng serve 명령을 실행할 때 --open 옵션을 함께 사용하면 서버의 주소인 http://localhost:4200/를 기본 브라우저로 열 수 있다.


브라우저가 실행되면 앱이 실행되는 것을 확인할 수 있다.


3. Angular 컴포넌트

처음 보이는 페이지는 애플리케이션 셸이다. 애플리케이션 셸은 AppComponent란 이름의 컴포넌트이며, Angular가 직접 관리하는 컴포넌트이다.


컴포넌트는 Angular 애플리케이션의 기본 구성 요소이다. 컴포넌트는 화면에 데이터를 표시하고, 유저의 입력을 기다리며, 유저의 입력에 반응하면서 어떤 동작을 수행한다.


4. 애플리케이션 수정하기

자주 사용하는 에디터나 IDE로 프로젝트를 열고 src/app 폴더로 이동한다. 이제부터 파일을 수정해 보자.


AppComponent는 3개의 파일로 구성된다:


1] app.component.ts: TypeScript로 컴포넌트 클래스 코드를 작성한다.

2] app.component.html: HTML로 컴포넌트 템플릿을 작성한다.

3] app.component.css: 이 컴포넌트에만 적용되는 CSS 스타일을 작성한다.


1) 애플리케이션 제목 수정하기

컴포넌트 클래스 파일(app.component.ts)을 열어서 title 프로퍼티의 값을 'Tour of Heroes'로 바꿔보자.


app.component.ts (title 프로퍼티)
title = "Tour of Heroes";


그리고 컴포넌트 템플릿 파일(app.component.html)을 열어서 Angular CLI가 자동으로 생성한 기본 템플릿을 삭제하고 아래의 HTML 코드로 교체한다.


app.component.html (템플릿)
<h1>{{title}}</h1>


이중 중괄호({{}})는 Angular가 제공하는 문자열 바인딩(Interpolation binding) 문법이다. 문자열 바인딩을 사용하면 컴포넌트의 title 프로퍼티 값을 HTML 헤더 태그에 표시할 수 있다.


변경된 내용을 저장하면 브라우저가 자동으로 갱신되며 수정한 애플리케이션 타이틀이 표시된다.


2) 애플리케이션 전역 스타일 지정하기

애플리케이션에 존재하는 모든 페이지의 스타일은 일관되게 구성해야 한다. Angular CLI로 프로젝트를 생성하면 빈 내용으로 styles.css 파일이 생성되는데, 이 파일에 스타일을 정의하면 애플리케이션 전역에 지정되는 스타일을 지정할 수 있다.


src/styles.css 파일을 열고 아래에 다음 코드를 추가한다.


src/styles.css (일부)
/* 애플리케이션 전역에 적용되는 스타일 */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2,
h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body,
input[type="text"],
button {
  color: #333;
  font-family: Cambria, Georgia, serif;
}
/* 모든 엘리먼트에 적용되는 스타일 */
* {
  font-family: Arial, Helvetica, sans-serif;
}


5. 최종 코드 리뷰

이 튜토리얼에서 언급한 소스코드를 확인해 보자.


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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "Tour of Heroes";
}

<h1>{{title}}</h1>

/* 애플리케이션 전역에 적용되는 스타일 */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2,
h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body,
input[type="text"],
button {
  color: #333;
  font-family: Cambria, Georgia, serif;
}
/* 모든 엘리먼트에 적용되는 스타일 */
* {
  font-family: Arial, Helvetica, sans-serif;
}


6. 정리

이번 튜토리얼을 진행하면서 다음과 같은 내용에 대해 알아봤다.


  • Angular CLI를 이용하면 애플리케이션의 기본 틀을 생성할 수 있다.
  • Angular 컴포넌트를 사용하면 컴포넌트에 있는 데이터를 화면에 표시할 수 있다.
  • 이중 중괄호를 사용하면 컴포넌트 프로퍼티 값을 템플릿에 바인딩할 수 있다.

References