SystemJS 로 Angular2 로컬 개발 환경 만들기

소스 보기

개요

  • 꼭 필요한 최소한의 라이브러리만 이용합니다.
  • SystemJS 를 사용하였습니다.
  • angular-cli 를 사용하지 않았습니다.
  • jspm 을 사용하지 않았습니다.
  • 브라우저에서 미리 TypeScript 를 트랜스파일한 형태의 JS 파일만을 이용합니다.
  • SystemJS 에서는 트랜스파일하지 않습니다.
  • 테스트용 로컬 서버는 http-server 를 이용하였습니다.

angular2 가 의존하는 라이브이러리 설명 (2.4.2 기준)

  • core-js
    • 자바스크립트를 위한 표준 모듈 라이브러리입니다.
    • 상위 버전의 자바스크립트 스펙 사용을 위한 폴리필의 역할을 합니다.
    • reflect-metadatacore-js 에 포함되어 있기 때문에 따로 추가할 필요가 없습니다.
      • reflect-metadata 는 Decorator Metadata 를 위한 ES7 Reflection API 를 사용할 수 있게 해주는 라이브러리 입니다.
  • zone.js
    • Change Detection 의 역할을 합니다.
    • 모델의 변경을 감지하기 위해 angular 가 제공하던 방식이 아닌 범용 디텍션 라이브러리 입니다.
  • rxjs
    • The ReactiveX library for JavaScript 입니다.
    • 말이 필요없네요. Go
    • angular2 에서 기본 탑재한 패키지입니다.

그래서 최종 설치한 패키지 리스트

  • SystemJS 패키지
    • “systemjs”: “^0.19.41”
  • angular2 최소 패키지
    • “@angular/common”: “^2.4.2”
    • “@angular/compiler”: “^2.4.2”
    • “@angular/core”: “^2.4.2”
    • “@angular/platform-browser”: “^2.4.2”
    • “@angular/platform-browser-dynamic”: “^2.4.2”
  • core-js 패키지
    • “core-js”: “^2.4.1”
  • zone.js 패키지
    • “zone.js”: “^0.7.4”
  • rxjs 패키지
    • “rxjs”: “^5.0.3”
  • TypeScript 패키지 (트랜스파일하기 위한)
    • “typescript”: “^2.1.4”
  • http-server 패키지 (테스트용 로컬 서버를 띄우기 위한)
    • “http-server”: “^0.9.0”

Hello Angular2 with angular-cli

angular cli 를 이용해서 빠르게 Hello 부터 찍어보겠습니다.
공식 사이트인 https://cli.angular.io 에서 사용법을 쉽게 확인할 수 있습니다.

https://cli.angular.io

커맨드 라인 인터페이스를 이용해서 angular2 웹페이지를 띄우기가 이렇게도 쉽습니다.

angular2-cli

npm 을 이용해서 커맨드 라인 인터페이스를 설치합니다.

npm i amgular-cli -g

cli 가 성공적으로 설치 되었으면, ‘ng new [프로젝트명]’ 이라는 명령어를 사용하여 프로젝트를 새로 만듭니다.

ng new hello-angular2

프로젝트가 성공적으로 만들어진 후, 해당 프로젝트 폴더로 이동합니다.

cd hello-angular2

‘ng serve’ 라는 명령어로 서버를 실행합니다.

ng serve

ng-serve

사이트를 바로 볼 수 있습니다.

ng-serve-site

angular-cli 를 통한 디렉토리 구조를 잠시만 살펴보고,

angular-cli-structure

브라우저에 찍힌 ‘app works!’ 부분을 고쳐보도록 하겠습니다.

hello-angular2/src/app/app.component.ts 파일에 적힌
‘app works!’ 부분을
‘Hello Angular2!’ 로 바꾸고 저장을 합니다.
저장만 해도 브라우저에 적힌 글귀가 자동으로 바뀝니다.

app.component.ts

일단은 브라우저에 Hello 를 빠르게 찍어 보았습니다. 다음 포스팅에는 디렉토리 구조에 대해 자세히 알아보겠습니다.

hello-angular2-site

SystemJS

systemjs-github

Universal dynamic module loader – loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS.

  • Universal : 범용 모듈 로더입니다.
    • 자바스크립의 모듈 로딩 방식은 여러가지 입니다.
      1. NodeJS 에서 사용하는 CommonJS 1
      2. RequireJS 로 대표되는 비동기 모듈 로딩 방식인 AMD (Asynchronous Module Definition) 2
      3. CommonJS 와 AMD 를 다 지원하는 모듈 구현 방식인 UMD 3
      4. ES6 의 표준안인 import 4 / export 5
    • global 스크립트도 로딩할 수 있습니다.
  • Dynamic : 동적 모듈 로더입니다.
    • 설명
  • 브라우저와 NodeJS 둘다 사용이 가능합니다.

TypeScript 2.1 is now available.

ProtoPie-3.0.0 작업 중인 2016년 12월 8일 TypeScript 2.1 이 릴리즈 되었습니다. 늦게나마 정리를 해보게 되었습니다.

1. keyof and Lookup Types

JavaScript 에서는 속성 이름을 매개 변수로 사용하는 API를 사용하는 것이 일반적이지만, 이러한 API 에서 발생하는 타입들의 관계는 표현할 수가 없습니다.

2. Mapped Types

3. Object Spread and Rest

2.1 버전부터 ‘ES2017 Spread 와 Rest 1 ‘ 를 지원합니다.
Array 에서 사용하듯이 2 Spread 와 Rest 를 사용할 수 있습니다.

작성하면서 그 동안 react 에서 state 를 props 로 넘겨줄때 많이 사용했기 때문에 이게 왜 새로운 스펙이지 싶었는데, 찾아보니 ‘babel-preset-react’ 와 ‘babel-preset-es2015’ 에는 해당 스펙이 들어있지 않았습니다. 현재는 state-3 에 ‘transform-object-rest-spread’ 라는 이름으로 포함되어 있었습니다. 무심코 ‘babel-preset-stage-0’ 까지 같이 사용하다보니 당연한줄 알았네요 ㅎㅎ 아무튼 객체의 copy, merge, pick apart (떼어내기) 에 상당히 편리합니다.

const original = {a: 'a', b: 'b'};
const copy = { ...original };
copy; // {a: 'a', b: 'b'}
const foo = {a: 'a', b: 'b'};
const bar = {x: 'x': y: 'y'};
const merged = { ...foo, ...bar };
merged; // {a: 'a', b: 'b', x: 'x', y: 'y'}
const obj = { a: 'a', y: 'y' };
const newObj = {...obj, x: 1, y: 2};
newObj; // {a: 'a', x: 1, y: 2}
let obj = { x: 1, y: 1, z: 1 };
let { z, ...obj1 } = obj;
obj1; // {x: 1, y: 1}

4. Downlevel Async Functions

5. Support for external helpers library (tslib)

6. Untyped imports

7. Support for --target ES2016, --target ES2017 and --target ESNext

컴파일러 옵션 3 중 기존 옵션인 ‘taget’ 옵션에 ‘ES2016’, ‘ES2017’, ‘ESNext’ 가 추가 되었습니다.
--target, -t 옵션으로 설정하며, Type 은 string 에 Default 는 ‘ES3’ 입니다.

  • Value 가 특정 버전으로 설정된 경우 해당 버전 이하의 스펙은 트랜스파일하지 않습니다.
    ES2016 -> ** operator 하지 않음.
    ES2017 -> async, await 하지 않음.
  • Value 가 ‘ESNext’ 이면 가장 최신의 제안된 스펙도 트랜스파일하지 않습니다.
    최신 제안된 스펙은 여기서 확인 가능합니다.

8. Improved any Inference

9. Better inference for literal types

10. Use returned values from super calls as ‘this’

11. Configuration inheritance

12. New --alwaysStrict

컴파일러 옵션 3--alwaysStrict가 새로 추가 되었습니다.
옵션의 Type 은 boolean 이고, Default 는 false 입니다.
--alwaysStrict 을 사용하면 다음과 같은 결과가 발생합니다.

  • 모든 코드를 ‘strict 모드’ 로 파싱합니다.
  • 모든 컴파일된 파일의 최상단에 'use strict';가 쓰여집니다.

원래 모듈 파일들은 자동적으로 ‘strict 모드’ 로 파싱되기 때문에, 이 옵션은 모듈이 아닌 코드에 사용하길 추천합니다.