Angular 2 설치 및 Angular-CLI로 프로젝트 실행 방법

/*
 * 이 강의는 2020년 버전으로 update되었습니다. -> 2020년 버전 보기
 */

** 이 카테코리의 이름은 Angular 2이지만, 실제로는 Angular 최신 버전을 다룹니다! Angular 2는 Angular JS와의 구별을 위해 사용된 이름입니다.

Angular

Angular(앵귤러)는 구글에서 개발한 single page application(SPA) 를 만들기 위한 front end framework입니다. 기존의 Angular JS 에 이어 두번째로 개발된 Angular는 Angular JS 2 가 아니라 그냥 Angular 가 되었는데  Angular JS 와는 완전히 다른 framework이 되었기 때문입니다. 이름에서도 알 수 있듯이 Angular는 더이상 JavaScript 만의 framework가 아닙니다. JavaScript, TypeScript, Dart 등의 언어로 코딩할 수 있지만, 대부분 TypeScript 로 작성을 하며 관련자료도 대부분 TypeScript 입니다. 물론 저도 TypeScript 를 기준으로 글을 작성합니다.

Angular JS 가 사이트 제작중에 Angular JS library(js파일)을 불러와서 Angular JS의 기능을 사용하는 방식이였다면, Angular 2 에서는 비어있는 Angular 프로젝트(seed)를 받아온 다음 거기서부터 사이트를 제작하게 됩니다. framework으로서의 역할이 더욱 커지게 된 것이죠.

이 강좌는 MVC 방식 웹사이트 제작의 기본을 알고 있지만 Angular JS, Angular를 접해 본 적 없는 사람을 대상으로 작성했습니다.

Angular 개발 환경

Angular 로 사이트를 개발하기 위해서 다음의 프로그램들을 설치합시다.

Node.js & NPM

https://nodejs.org 에서 다운받을 수 있습니다.
개발이 완성된 Angular 사이트는 Node.js 없이 작동하지만, 사이트 개발을 위해서는 Node.js가 필요합니다. NPM은 Node.js를 설치하면 함께 설치됩니다. Angular CLI 는 Node.js 4.9 버전 이상이 요구되기 때문에 이전에 Node.js를 설치하셨던 분들도 Node.js를 다시 설치해야 할 수도 있습니다. terminal(window: cmd, git-bash등, mac: terminal, bash 등)에서 node -v를 입력하시면 현재 Node.js 버전을 알 수 있습니다.

Angular-CLI(Command Line Interface)

Angular-CLI는 Angular 사이트 개발에 유용한 기능을 terminal에서 사용할 수 있게 해줍니다. "ng"로 시작하는 명령어들이 Angular-CLI를 사용한 명령어들입니다.

Node.js/NPM을 설치한 후 terminal에서 아래의 명령어를 입력하여 설치합니다.

$ npm install -g @angular/cli

-g는 global을 의미하며 단순히 프로젝트 내에서 code library로써 사용되는 것이 아니라 독자적인 프로그램으로 사용되는 경우 사용됩니다. 

Angular 프로젝트 생성 및 실행

$ ng new my-project

ng new 프로젝트_이름 은 새로운 프로젝트를 생성하는 명령입니다. 현재 위치에 프로젝트_이름 (알파벳과 '-'만 사용가능)에 입력한 이름으로 폴더를 생성하고 기본 사이트를 설치합니다. (몇 분 정도 걸릴 수 도 있습니다)

$ cd my-project

생성된프로젝트 폴더로 이동합니다.

$ ng serve --open

사이트를 실행합니다. --open 은 서버를 실행하고 웹사이트를 바로 열어주는 옵션입니다.ng serve 만으로도 서버는 실행됩니다.

Compiled successfully라는 메세지가 보이면 정상적으로 서버가 실행이 된 것이고 --open 옵션을 사용하였다면 자동으로 browser가 실행되며 아래와 같은 화면이 보이게 됩니다.

Angular-CLI 기본 사이트 살펴보기

파일 구조

모든 파일들의 용도를 지금 다 알 필요는 없고 중요한 몇가지 파일 및 폴더만 알아봅시다.

• src/index.html : 사이트 접속시 처음으로 로딩이 되는 html파일입니다. head를 변경하거나 외부 library를 추가해야 하는 경우 여기에 추가하게 됩니다.
• src/style.css : global css style이 저장되는 곳입니다. angular는 기본적으로 모든 view들이 각각의 css를 가지게 되며 서로 다른 view에 영향을 끼치지 않게 되어 있습니다.
• src/favicon.ico : favicon icon 파일입니다. 이 파일을 바꾸면 favicon 모양이 바뀌게 됩니다.
• src/assets : 외부에서 직접 접근이 가능한 폴더입니다. 예를 들어, src/assets/js/jquery.js를 두게 되면 웹사이트/assets/js/jquery.js로 바로 접근이 가능하게 됩니다. 그림파일, 외부 library를 저장하는 용도로 사용됩니다.
• src/app : 실제 angular의 코딩이 이루어 지는 영역입니다. 
• src/environments : enviroment.prod.ts와 environment.ts의 파일이 있는데, 사이트 실행 환경(개발용, 출판용)에 따라 다른 값을 설정할 필요가 있는 경우 사용됩니다. 잘 모르겠으면 신경안써도 됩니다. ng serve 로 앱이 실행되는 경우는 enviroment.ts의 값을 읽어옵니다.

기본 코드

src/app 폴더에 있는 파일들을 좀더 자세히 살펴봅시다. 코드는 typeScript로 작성이 되어 있는데, Atom text editor를 사용하시는 분들은 atom-typescript package를 설치하시기 바랍니다.(File > Settings > Install)

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.ts는 다른 Angular module들을 관리하는 파일입니다. 대부분의 ts파일들은 새로 생성이 되면 이 파일에 등록이 되어야 사용할 수 있습니다.

import { class_이름 } from 파일위치는 다른 파일에 있는 class를 불러오는 코드입니다.
package로 설치된 파일(위 코드에서 @angular로 시작하는 것들) 혹은 현재 파일 위치에서 상대위치(위 코드에서 ./app.component)에서 불러올 수 있습니다.

마지막 줄에서 AppModule class를 정의하고 있으며, export를 붙여 다른파일에서 import로 불러올 수 있게 하고 있음을 알 수 있습니다. class 안은 { } 로 비어 있습니다.

@NgModule(...) 부분은 분리되어 있는 코드가 아니라 AppModule class에 붙어있는 Class Decorator입니다. decorator들은 @decorator_이름(오브젝트)의 형태로 되어 있고 decorator들도 class로 import를 한 후에 사용할 수 있습니다(code 2번째 줄에 NgModule이 import되어 있습니다.)

Class decorator들은 해당 class에 역할을 부여하게 되는데, 예를들어 NgModule class가 필요한 위치에 NgModule decorator가 없는 class를 넣게 되면 오류를 내게 됩니다. Decorator에 들어가는 오브젝트에 각종 값들이 설정이 되고, 그렇기 때문에 AppModule은 비어있는 class지만 이 설정값들로 의미를 가지게 됩니다.

다음으로 app.module.ts에 import되어 있는 app.component.ts파일을 봅시다.

// src/app/app.component.ts

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


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

@angular package에서 Component class를 import하였고 AppComponent class는 Component decorator가 사용되었음을 알 수 있습니다.

Component는 Angular사이트에서 view를 구성하는 구성요소로 src/index.html을 제외한 모든 view들은 component에 담기게 됩니다. index.html에서 AppComponent를 호출하고 나머지 component들은 AppComponent, 혹은 다른 하위 component들의 html에서 호출이 되는 구조입니다.

Component decorator에 설정되어 있는 값들을 살펴봅시다.

• Selector: html에서 호출하게 되는 이름입니다.
• TemplateUrl: component에서 사용하게 될 html 파일의 위치입니다.
• StyleUrls: template에서 사용하게 될 css파일들의 위치입니다. 여러개를 호출할 수 있습니다.

AppComponent에는 title이라는 항목에 'app work!'라는 값이 있습니다. 사이트를 실행했을 때 보이는 app works!라는 문구는 여기서 오는 것입니다.

다음은 app.component의 template인 app.component.html입니다.

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

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

{{ expression }}은 해당 expression을 text로 나타내게 됩니다. title은 expression이 아니므로 해당 template을 가지고 있는 component class 즉 AppComponent class에 해당 항목이 존재하는지 살피고 그 항목의 값을 text로 나타내게 됩니다. 1+1을 넣는다면 2가 나올 것이고, "Hello World!"를 넣게 되면 해당 값이 나오게 됩니다. component에 있는 함수를 호출할 수 도 있으며 해당 return값이 표시되게 됩니다.

<!-- src/index.html -->

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyProject</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

 마지막으로 index.html을 살펴보면 body에<app-root>Loading...</app-root> 가 있는데, app-root는 AppComponent의 selector로 AppComponent를 호출하고 있습니다.  Loading...은 Angular의 로딩이 완료되기 전까지 보이게 될 문구입니다.

마치며..

Angular2의 개발을 위해 관련 프로그램 설치와 Angular-CLI를 이용하여 기본 프로젝트를 생성하는 방법을 알아보았습니다. 다음 강의는 Angular 공식사이트의 tutorial을 따라해 보는 Tour of Heroes 에서 이어집니다.