티스토리 뷰

Javascript&Typescript/Angular2

angular-cli를 이용한 Angular2 시작하기 (Quick Start)

norux 2017. 5. 25. 15:49

angular-cli를 이용한 Angular2 시작하기 (Quick Start)

요즘 Angular2로 개발을 하면서, 구글이 이 프레임워크를 잘 만들기 위해 정말 노력하고 있구나 라는 느낌을 많이 받습니다. 웹에서의 구조화가 이렇게 쉽게 가능한 것에 대해 경이로울정도이고, 개발방법도 직관적이고 디버깅과 테스트도 참 쉽습니다. 각종 벤치마크를 보면 속도와 메모리 사용량도 꽤 괜찮은 편이고, Webpack과 함께 사용한다면 페이지에서 다운로드해야할 리소스(Javascript + HTML...)의 용량도 굉장히 합리적이게 됩니다. 그리고 웹팩과의 연동은 angular-cli를 통한다면 기본적으로 지원되는 사항이라 개발자의 입장에서도 크게 부담스럽지는 않습니다.

본격적으로 시작하기 전에 딱 두 가지 용어만 정리하고 갑시다. 처음에 angular.js 로 시작하다가 2점대 버전으로 올라가면서 어마어마한 변동을 겪고 angular2라고도 불리우고 있습니다. 중요한점은 단순 자바스크립트 라이브러리임을 벗어나 프레임워크라는 이미지를 주기 위해 .js 라는 단어를 뺐습니다.

그래서 앞으로는 기존의 angular.js 1.x 버전은 angular.js로, angular.js 2.x 버전은 Angular로 표현하도록 하겠습니다.

어려운 입문 난이도

하지만 Angular 의 최대 단점이라 생각되는 부분은 최초 진입 난이도가 어마어마합니다. angular.js와 한번 비교해볼까요?

angular.js의 hello world


<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
</script>
</head>
<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
</body>
</html>

Plunker - angular.js 1.5.1 Hello World

위 코드는 angular.js 의 hello world 코드입니다. 위의 plunker에서 실행해보실 수 있습니다. ng-app 이니, ng-controller이니 낯선 attribute같은 것들이 보이지만, 직관적으로 이해할 수 있는 레벨입니다.

Angular의 Hello world

그럼 이제 Angular의 hello world를 한번 볼까요?

index.html


<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
    </my-app>
  </body>

</html>

config.js


System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './app.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

src/app.ts


//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule)

plunker - Angular

위의 코드는 plunker를 이용하여 Angular 프로젝트를 생성하면 주어지는 '기본' 코드입니다. 뭔가 angular.js와 비교하여 어마어마하지않나요? 누가 옆에서 설명해주지 않으면 혼자서 더이상 진행하기 어려울 것 같은 기분이 듭니다.

Angular는 자바스크립트를 모듈화하고 이 만들어진 모듈을 로딩하기 위해서 system.js 라는걸 도입했습니다. system.js가 참조하는 config.js 파일을 보면 로딩하는 모듈도 어마어마합니다. 만약에 이 환경 세팅을 처음부터 하라고 했으면 아마 못했을 것 같습니다. 또 Angular를 쓰고자 함인데, rxjs를 기본 로딩하는 이유는 무엇이며, zone.js는 왜쓰는지, reflect-metadata라는 것은 무엇인지 답답하기만 합니다.

그 다음으로 app.ts를 보며 눈에 들어오는 것은 아... javascript가 아니라 typescript군요..? 첫 줄의 import만 보고 그냥 angular.js를 쓰자고 결정을 내립니다. (사실 import는 ES6에 도입된 공식 자바스크립트 문법이지만..) 아마 Angular를 처음 접하시는 분들은 @component가 뭔지 class가 뭔지는 눈에 들어오지도 않을 겁니다.

이 hello world 코드만 봐도 러닝커브가 너무 가파른 것처럼 보입니다. 네.. 실제로 그렇습니다. 또 배워야할 것은 너무 많은데 한글화된 문서는 별로 없습니다. rxjs나 zone.js를 이해해보려고 해도 이해하기 쉽지 않습니다. 개념 자체가 머리속에 쉽게 들어오지 않습니다. 그래서 데이터의 흐름이 어떻게 흘러가는지 이해하는 것은 더더욱 어렵습니다.

사실 Angular에서 제공하는 QuickStart도 있습니다. (그렇지만 이게 과연 퀵스타트인가?) Angular-QuickStart 한 번 구경하고 오세요. 저는 처음 이거 보고 노트북 집어 던질뻔 했습니다.

그럼 왜 써?

그럼 이렇게 복잡한 Angular 를 왜 쓸까요? 구글은 왜 이렇게 열심히 만들고 사람들은 열광하는 걸까요?

이 초기 진입장벽만 지나친다면 그 후의 개발은 체계화된 구조속에 빠르고 안정적으로 개발 해 나갈 수 있습니다. 중복되어 사용되는 뷰는 공통 컴포넌트로 빼놓고 쓰고 싶은 곳에 뿅뿅뿅 가져오기만 하면 되구요. 누군가 만들어놓은 쓸만한 모듈이 있다면 그 모듈을 가져와서 import 해서 쓰기만 하면 됩니다. 무엇보다 이런 체계적이고 구조적인 개발이 가능한 Angular는 대형 프로젝트에서 특히 유리합니다.

Angular cli 의 등장

구글의 Angular팀은 초기 환경 설정의 애로사항에 대한 피드백을 많이 받았나 봅니다. 그래서 환경 설정을 손쉽게 할 수 있는 툴을 개발했습니다. Angular cli를 이용하면 빠르고 편리하게 환경 설정을 할 수 있습니다.

1. 개요

Angular cli는 여러가지 편리한 기능들이 있습니다. 첫 번째로 위에 언급한 환경 설정을 도와주는 부분입니다. 정확히는 프로젝트 생성을 도와줍니다. node.js에서 npm init 이라는 명령어를 통해 packages.json을 생성하는 것처럼, 명령어 하나로 프로젝트 전체를 생성할 수 있습니다. 이 때 프로젝트는 필요한 모든 의존성 패키지를 함께 설치합니다. 프로젝트 생성 이후에는 모듈/컴포넌트/디렉티브 등을 추가하는 역할 또한 Angular cli로 할 수 있습니다.

그리고 두 번째는 라이트한 서버를 내장하고 있습니다. 따라서 다른 서버와의 연동 없이 Angular 프로젝트 하나만으로도 직접 웹페이지에서 랜더링 되는 것을 볼 수 있으며, 디버그 모드로 실행했을 때는 이를 웹소켓으로 연결하고 있어 프로젝트의 내부 소스코드를 수정하게 되면 떠있는 브라우저에서 리소스들을 즉시 핫로딩(hot-loading) 합니다. 그래서 개발시에 디버깅이 굉장히 빠르고 편리해졌습니다.

세 번째로 빌드시스템도 갖추고 있습니다. 기본적으로 Webpack을 내장합니다. 이 웹팩을 통해 typescript를 컴파일해주는 것은 물론, 모든 자바스크립트 파일들을 압축(minifying)까지 해줍니다. 웹팩을 사용할 줄 몰라도 웹팩을 아주 고급지게 사용할 수 있게 된 것입니다.

네 번째, 테스트를 그 어떤 시스템보다 편리하게 지원합니다. Angualr cli를 통해 생성한 프로젝트는 기본적으로 유닛테스트와 E2E(End to End Test)를 포함하도록 되어있습니다. tslint 또한 포함되어 많은 사람들과 협업할 때, 코딩 스타일을 맞추기에도 적합합니다.

2. Quick Start

그럼 이제 Angular cli를 직접 사용 해 보겠습니다.

2.1. 설치


$ npm install -g @angular/cli

설치는 npm 을 이용해서 바로 할 수 있습니다. angular-cli 라는 이름의 npm 패키지도 있는데, 이 패키지가 @angular/cli 로 바뀐거니 이 부분은 참조해주세요. cli이고 커맨드라인 명령어 처럼 사용하기 때문에 웬만하면 global로 설치를 권장드립니다.

2.2. 프로젝트 생성


$ ng new [프로젝트 이름]

Angular cli를 설치하고 나서 new 키워드를 이용하여 프로젝트를 만들 수 있습니다. 관련 의존성 패키지들을 다운로드 받아오기 때문에 약간 시간이 걸립니다. 용량도 꽤 먹으니까 혹시 휴대폰을 이용하여 Hotspot을 사용하고 있다면 데이터 주의!!

위 작업이 완료되고 프로젝트 디렉토리에 들어가보면 Angular/QuickStart때와 비슷한 구조가 있습니다. 하지만 퀵스타트때보다는 좀 더 단순합니다. system.js처럼 일부 Angular cli에 머지된 부분이 있거든요. (위에서 언급한것 처럼 system.js대신 웹팩을 내장하여 사용합니다.)

중요한 설정 파일 하나는 .angular-cli.json이라는 파일로 숨어있습니다. (macOS나 Linux계열에서는 .으로 시작하는 파일들은 숨김파일을 의미합니다.) 솔직히 저는 왜 숨겨놨는지 모르겠습니다.. 사용자에게 덜 복잡해보이기 위해 꼼수를 부린건가? 아무튼! 혹시나 기본 설정에서 경로나 이름을 변경하고자 하는 경우, 이 설정파일을 건드리시면 됩니다!

2.3. 서버 실행

그럼 서버를 바로 실행해서 위 프로젝트를 실행 해 봅시다.


$ ng serve

네. 이게 답니다. 그리고 Angular cli를 이용해 프로젝트를 만들면, packages.json에 편리한 각종 스크립트도 미리 만들어주기 때문에 이렇게 해도 됩니다.


$ npm start

실행하게되면 웹팩이 각종 청크파일들을 생성하고 Compiled successfully. 라는 완료 메시지를 띄웁니다. 이 메시지가 떴다면, 브라우저를 띄워 localhost:4200 으로 접속해 봅시다.

그리고 축하합니다. 이제 Angular Cli를 이용한 Angular QuickStart 미션을 완료하셨습니다. :)

3. 프로젝트 둘러보기

그럼 프로젝트는 전체적으로 어떻게 되어있는건지 확인을 해볼까 합니다. '시작하기' 파트이니까 아주 가볍게요. 제가 포스팅 연재에 약해서 이 다음 포스팅은 안올라올지도 모르지만 혹시 모르니까 말씀드려요. 깊은 부분은 다음 포스팅에서 합시다 :)

일단 모든 코드는 src 안에 포함되도록 되어 있습니다. 유닛테스트에 관련된 코드는 생성된 각 ts 파일과 같은 위치에 있습니다. *.spec.ts 라고 spec 이름이 붙어있는 파일들이 유닛테스트용 파일입니다. index.html 을 열어보면 굉장히 간단하죠.

index.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tutorial</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>

meta태그를 추가하는 것이 아닌 이상 이 파일을 수정하는 일은 거의 없을 겁니다.

그 다음으로 polyfills.ts 파일을 열어봅시다.

polyfills.ts


/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
// import 'intl/locale-data/jsonp/en';

각 브라우저마다 Angular를 동일하게 지원하기 위해서 polyfill하는 파일입니다. polyfill 덕분에 멀티 브라우징 지원을 아무런 걱정없이 할 수 있죠. 기본생성값은 많은 항목이 주석처리되어있는데 필요하시다면 주석을 풀고 사용하세요. 39라인을 보면 이제 zone.js를 포함하는 것을 보실 수 있습니다. zone.js 는 Angular 에서 사용하기 위해서 제작된 라이브러리입니다. (물론 Angular말고 다른 프레임워크에서 사용할 수도 있습니다.) zone.js 는 기존의 angular.js의 단점으로 지적된 부분을 개선하기위해 등장했습니다. zone.js를 한마디로 정의하면 "실행 컨텍스트(EC)" 라고 한답니다.

Angular팀에서 아주 추상적으로 고도화했습니다. 그래서 간단한 정의와 사용 방법에 비해 내부구조는 꽤 복잡하고 어렵습니다. 다음에는 zone.js를 더 잘 이해해서 글을 쓰고 싶네요. :) 우선은 백발의개발자님께서 남겨주신 글을 보고 이해하기로 합시다!

main.ts와 test.ts는 거의 수정할 일 없는 코드들입니다. main.ts 코드만 한번 보겠습니다.

main.ts


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Angular의 시작부를 담고 있습니다. 루트모듈이라고 볼 수 있는 AppModule을 시작시킵니다. 중간에 enableProdMode()라는 함수가 있습니다. 보다 편리한 디버깅을 위한 Angular의 개발자모드(development mode)를 끄는 함수입니다. ng serve 또는 ng build를 할때 --env=prod 라는 옵션인자를 함께 넘겨주면 실행되게 됩니다. .angular-cli.json 파일을 보면 환경변수로 dev와 prod를 받았을 때, 어떤 파일을 열어야하는지에 대한 정보를 담고 있습니다.

.angular-cli.json


// ...
  "app": [
    {
     // ...
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
      // ...
    }
  ]
//...

그 다음에 내용은 비어있지만, style.css 라는 파일이 있습니다. 나만의 css 스타일을 정의해야할 필요가 있을 때, 이곳에다 정의하시면 됩니다. 구조상 가장 마지막에 로딩하는 css 파일이 되어, 스타일을 덮어쓰기에 용이합니다.

휴, 여기까지 왔으니 이제 한숨 한 번 돌리구요. app폴더로 이동합시다.

기본적으로 생성되어있는 app.module.ts 는 루트 모듈이라고 생각하시면 됩니다.

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 { }

조금 위의 main.ts 에서 AppModule을 부트스트랩하신 기억 있으시죠? 이게 그 AppModule입니다. 근데 코드를 보면 굉장히 이상한 구조로 보입니다. AppModule 클래스는 비어있고, 이 클래스와 @NgModule과의 연관성은 하나도 보이지 않습니다. 우선 @NgModule 부터 알아보도록 합시다.

@NgModule

C#과 자바에서 사용하는 Annotiation 개념과 비슷하다고 합니다. 공교롭게 저는 C#과 자바 둘다 모릅니다. 저와 같은 분들이 많을까요? 어노테이션을 처음 보는 저는 이 개념이 정말 이해할 수 없었습니다.- Angular 너란 녀석의 러닝 커브는 정말... - 저와 비슷한 분들께 이 설명을 드립니다.

@가 붙은것들은 Decorator패턴(장식자 패턴)을 사용합니다. Decorator패턴을 모르시는 분은 한 번 보고 오시면 이해가 빠를겁니다. 장식자 패턴으로 메타데이터를 넘겨주는 겁니다. 넘어간 메타데이터는 내부적으로 AppModule 클래스에 연결시킵니다. 이 부분을 담당하는 모듈이 아까 어디선가 본 reflect-metadata 입니다.

Imgur [그림 출처: Angular2, decorators and class inheritance]

대충 이해가 가시겠나요? 이 그림을 퍼온곳의 글이 굉장히 좋은것 같아서 다음에 시간나면 번역이나 해볼까 합니다. :) (오늘 지키지도 못할 말 많이 뱉는거 같네요. 이 의지가 미래의 나에게 꼭 전달 되어야 할텐데..)

declarations: 모델에 속하는 컴포넌트, 디렉티브, 파이프 등을 선언하는 부분입니다. 현재 예제에서는 MVC의 V에 해당하는 컴포넌트 하나만 있습니다.
imports: 다른 모듈을 가져와서 사용할 때, import 하는 부분입니다.
providers: 앱 전체에서 쓸 수 있는 service들을 사용할 때, 이곳에 정의해서 사용할 수 있습니다.
exports: 위 예제이는 없지만 컴포넌트, 디렉티브, 파이프등을 외부에서 사용할 수 있도록 할 때 사용합니다.
bootstrap: 루트 모듈에서만 사용할 수 있는 메타데이터이고, 이곳에 선언된 컴포넌트로부터 시작됩니다.

@Component

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!';
}

app.component.ts 를 보면 @Component 어노테이션이 있는 걸 볼 수 있습니다. 우리는 이미 NgModule을 통해 어노테이션을 마스터했으니 안에있는 내용만 보면 될 것 같습니다.

selector: app-root라는 셀렉터를 만듭니다.
templateUrl: 템플릿으로 사용할 html 경로를 선택합니다. (template: "<p> {{title}} </p>" 처럼 템플릿을 직접 정의할 수도 있습니다.)
styleUrls: 이 컴포넌트에 해당하는 고유의 스타일 파일을 선택합니다.

각각의 컴포넌트는 MVC모데에서 View를 담당한다고 보시면 됩니다. 각 컴포넌트별로 html과 css를 새로 가질 수 있다는 점은 대형 프로젝트에서 유지보수할 때 획기적인 도움을 줄 수 있을 것 같습니다. 그리고 AppComponent 클래스를 통해서 각종 private / public 함수와 변수들을 정의하여 사용할 수 있습니다. 본 예제 코드는 퀵스타트용 코드이기 때문에 title이라는 public (아무 지시자도 사용하지 않으면 public으로 지시됩니다.) 변수 하나를 만들었습니다. 이제 app.component.html파일을 보면요

app.component.html


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

이렇게만 들어가 있습니다. {{ }} 키워드를 통해 컴포넌트의 클래스에 선언된 변수, 또는 함수에 접근하여 사용할 수 있습니다. Angular 자체적으로 같은 클래스로 보는 것인지, title 변수를 private으로 지시해도 html에서 바로 접근하여 사용 가능합니다.

Selector에 app-root라고 되어있는데, 이걸 본 기억 있으신 분들이 계실까요? 아~까 index.html 파일에서 사용하고 있었습니다.


...
<body>
  <app-root>Loading...</app-root>
</body>
...

우와.. 드디어 모든 연결고리가 이어지는거 같지 않으신가요? :)

컴포넌트 생성

포스팅을 마무리하기전에 마지막으로 새로운 컴포넌트를 추가하는거 하나만 해보고 가도록 합시다.


$ ng generate component new-comonent

오랜만에 ng 명령어가 나왔네요. 위 명령어는 축약형으로 이렇게 쓸 수도 있습니다.


$ ng g c new-component

new-component 라는 이름의 컴포넌트를 만듭니다. 위 명령어를 치면 new-component라는 폴더아래 컴포넌트 관련 파일들이 생성되고, app.module.ts 의 declarations에 새로운 컴포넌트를 포함하도록 수정합니다. selector는 app-new-component로 생성되어 있을 것입니다. 이걸 app.component.html에 추가해보도록 합시다.

app.component.html


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

<app-new-component></app-new-component>

끝입니다. ng serve를 통해 한 번 실행시켜 보시죠 :)

포스팅을 마무리하며..

드디어 끝자락에 왔습니다. 간단한 설명과 실습을 진행하며 Angular는 참 구조화하기 쉬운 프레임워크다라는걸 혹시 느끼셨나요? 어떻게 구조화를 하느냐에 따라서 정말 멋진 코드가 될 수 있습니다. 조금 고민해보세요~ 고민이 많아질수록 구조는 좋아집니다. :)

zone.js는 간단히 설명을 했지만 RxJS는 간단하게도 설명을 못했네요. Observable이라는 객체를 이용해서 Event-based 프로그래밍을 할 수 있게 하는 라이브러리입니다. zone.js와 마찬가지로 Angular에서 아주 중요하게 사용되는 핵심 라이브러리중 하나입니다. (이것도 역시 나중에 글 쓸 기회가 될까요? ㅎㅎ)

아, 그리고 자연스럽게 지나치고있는데 이 코드들은 전부 타입스크립트로 작성되어 있었습니다. ECMA6이상을 사용하는 javascript와 유사하다고 생각되실 겁니다. (혹시 타입스크립트라는 걸 못 알아채신 분도 있지 않을까요? ^^;) 사실 빡세게 typescript로만 짜야겠다 한다면 tsconfig.json 의 옵션을 제어하여 일반 자바스크립트처럼 절대 작성할 수 없게 되어있습니다.


export class AppComponent {
  title: string = 'app works!';
}

위에서 클래스를 선언한 부분만 봐도 title에 대한 타입의 명시를 강제하도록 설정할 수 있습니다. 하지만 기본적으로 해당 옵션들은 다 꺼져있으므로, 자연스럽게 자바스크립트처럼 작성해도 별 문제 없는겁니다. 이러한 부분들은 조금 낫네요. ^^ 한마디로 Angular를 배우는데 타입스크립트는 큰 제약사항이 아닐 것 같습니다.

이상으로 Angular2 시작하기 포스팅을 마칩니다!

참조

저작자표시 비영리 변경금지

'Javascript&Typescript > Angular2' 카테고리의 다른 글

[번역] 아직도 NgZone이 단순하게 Angular의 변화감지(Change Detection)를 위해서만 필요하다고 생각하시나요? (0)	2018.04.23
[번역] Angular에서 Zones(zone.js)의 역할 (0)	2018.04.15
[번역글] Angular에서 Rx.js의 Observable 관리하기 (0)	2018.04.09

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

노루의 씨분투 세상

티스토리 뷰