Angular2 시작하기

2016년 새해 Angular 2가  5월 3일 기준 Release Candidate 버전으로 변경이 되었습니다. 그래서 지난  3개월여 동안 실제 프로젝트에 적용한 경험을 바탕으로 Angular2 대한 글을  써보려고 합니다. 관련된 글 목록은 Angular2 글 목록보기 에서 확인해 주세요.

 

Angular2 프레임워크는 최신 웹프론드 기술을 기반으로 웹 개발을 좀 더 구조적으로 할 수 있는 환경을 제공해 줍니다. 따라서 기존에 서버 개발만 주로 하셨던 분들도 Angular2를 사용하면 좀 더 쉽고 재미있게 웹앱을 개발할 수 있습니다. 갈수록 뜨거워지는 프론트엔드 기술에 눈독 들이고 계셨다면 이번 기회에 Angular2를 학습해 보는 것도 좋은 기회가 될 것 같습니다.  글의 대상 독자가 HTML과 DOM, 자바스크립트 대한 기본적인 지식과 사용 경험을 가지고 있다는 것을 전제로 합니다.

 

오늘은 Angular2 기반의 웹 어플리케이션 개발을 하기 위해서 필수적으로 짚고 넘어가야 할 프론트엔드 웹기술의 배경을 다루는 것으로 시작합니다.

 

Background

Angular2를 공부하기로 마음 먹고 공식 사이트의 튜토리얼매뉴얼을 읽다 보면 “이거 무슨 소리지…” 하는 생각이 들지도 모르겠습니다. Angular2라는 고지를 제대로 점령하기 위해서는 Divide And Conquer의 전략적 접근이 필요합니다.  Angular2 프레임워크 안에 이미 최신의 프론트 엔드 기술과 개념들이 어우려저 사용되고 있기 때문에 우리는 이 개념들을 하나씩 이해하고 넘어가야 합니다. 따라서 Angular2를 사용하려면 적어도 아래와 같은 키워드를 한 번씩 훑어보지 않을 수 없습니다.

  • NPM
  • ES6와 Module(CommonJS, AMD…)
  • Transpiler(Polyfill, shim)
  • TypeScript, (typings, tsd)
  • Angular 프레임워크 관련 개념: MVVM, Change Detector, Observable, Immutable, Two-way Binding, Zone.js
  • RxJs
  • Webpack 등의 Bundler

위에서 열거한 키워드 중에서 본 글에서는 NPM부터 Typescript까지 Angular2를 맛보기 전 프론트엔드 웹 개발 환경을 살펴보도록 합니다.

 

NPM

NPM은 Node Package Management의 약자로 자바스크립트로 쓰여진 패키지 (혹은 라이브러리) 관리 도구 입니다. NPM에 Node가 붙어 있어서 NodeJs를 공부해야만 하는 것은 아닙니다.  또한 NPM은 Angular2 만을 위한 툴도 아닙니다. NPM은 광활한 오픈소스 세계에서 다앙햔 자바스크립트 패키지들을 버전별 의존성 이슈 없이 편리하게 관리하기 위한 툴입니다. Java 에 익숙하신 분들이라면 NPM을 메이븐이나 그래들 정도로 생각하셔도 됩니다.

 

NPM을 통해서 사용할 패키지는 package.json 파일에 정의 되어 있습니다. Angular2가 사용하는 핵심 패키지 정보 역시 package.json 파일에 있습니다. 대표적으로 SystemJs, RxJs 등이 그 예입니다. 다음은 실제 QuickStart에서 볼 수 있는 Angular2의  pacakge.json 파일 내용입니다.

 

 

설정에서 “dependencies”와 “devDependencies”에 각각 Angular2에서 필요로하는 패키지들이 선언되어 있습니다. 속성명에서 유추할 수 있듯이 “dependencies”에 등록된 패키지는 Angular2에 필수 의존 패키지이고 “devDependencies”는 개발에 부가적으로 필요하지만 실제 앱 결과물에는 필요하지 않은 패키지들을 넣습니다.

 

NPM은 패키지 관리 기능 외에 특정 작업을 수행할 스크립트 명령어를 등록할 수 있습니다. 이 명령어는 “scripts” 속성 안에 열거 합니다.  “scripts” 속성 안에 선언된 명령어는 “npm run (명령어)” 형태로 쉘에서 실행이 가능합니다. NPM과 관련된 기본 명령 스크립트는 이후에 다시 설명하기로 하고, 일단 지금은 NPM이 여러분이 만들 웹 애플리케이션에서 필요한 외부 자바스크립트 패키지들을 관리해주는 도구로 생각하는 걸로 합니다.

 

ES6

Java 언어에도 언어를 구성하는 스펙의 버전이 있는 것처럼 자바스크립트에도 버전이 있다는 것을 혹시 알고 계셨나요? ES6는 ECMA Script6의 약자로 현재 우리가 브라우저에서 사용하는 자바스크립트의 표준의 버전명입니다. 자바스크립트 표준을 제정하는 ECMA와 상당히 오랜만에 확정(작년 6월)된 ES6는 자바스크립트에 참 많은 변화를 가져왔는데요. 그래서 아직 ES6 스펙을 브라우저들이 100% 지원하고 있지는 않습니다. 그래서 각 브라우저마다 그리고 버전 별로 어느 정도 까지 ES6를 지원하는지를 나타내는주는 아래와 같은 사이트도 있습니다.

 

es6_browser_support

Transpiler

생각보다 ES6에 대한 구현이 아직은 충분하지 않은 상황인데요. 그렇다고 해서 ES6를 쓸 수 없는 것은 아닙니다. 아직 브라우저에서 미구현된 언어의 기능을 보완해 주기 위한 polyfill이나 shim이라는 postfix가 붙은 라이브러리들이 있습니다. 네이버 영어사전을 찾아보니 polyfill은 사전적 적의가 “충전솜”이고, shim은 “(두 사물 사이의 틈새 등에 끼우는) 끼움쇠”라네요. 이런 류의 라이브러리들은 대개 브라우저가 미지원하는 기능을 스크립트로 지원하기 위한 용도라는 것을 참고로 알아두시면 될 것 같습니다.

 

이런 라이브러리말고 직접 스크립트를 변경하는 transpiler가 있습니다. compiler는 익숙하지만 transpiler라는 용어는 익숙치 않을 수도 있는데요. 하나의 언어를 다른 형태의 언어로 변환해 주는 기능을 부각시키는 표현으로 compiler라는 표현보다 transpiler라는 표현을 쓰는 것으로 추측되는데, 실상 하는 일은 브라우저가 아직 지원하지 못하는 스펙의 자바스크립트 소스를 현재 브라우저가 지원하는 ES5 기준의 소스로 변환해주는 것입니다. 대표적인 transpiler로 React 덕을 좀 본게 아닌가 싶은 Babel이 있습니다. ECMA와 자바스크립트의 역사나 그 기원(?)이 궁금하신 분들은 온라인에서 무료로 볼 수 있는 Speaking Js 챕터 4장을 참조하시면 도움을 얻을 수 있습니다.

 

Typescript

Angular2는 아래 매뉴얼에서 볼 수 있듯이 Javascript, Dart, Typescript, 까지 총 3가지 언어로 개발할 수 있도록 지원합니다. 선택한 언어에 따라 매뉴얼의 예제도 당연히 다르게 나옵니다.

 

angular2_doc_type

Dart는 구글에서 야심차게 내놓은 언어지만 적어도 국내에서의 사용자가 많지 않으니 (라기 보다는 제가 잘 모르니…) 앞으로 이 블로그 포스트에서는 논외로 합니다. 그럼 이제 자바스크립트 말고 남은 하나 Typescript가 있네요!

 

Typescript는 Microsoft에서 만든 언어입니다. 공식 사이트에서는 Typescript를 이렇게 소개하고 있습니다.

Typescript is typed super set of Javascript that compiles to plain Javascsript.

공식적인 정의는 그렇고 3개월 정도 써보면서 느낀 점은자바스크립트에 “타입”을 추가해서 만든 확장형 자바스크립트 언어라고 볼 수 있습니다.  (똑같은 말인가?..) 자! 이쯤에서 Angular2 개발하기도 전에 Javascript냐 Typescript냐 선택을 해야하는 상황이 놓여있는데요. Angular2 하나 써 보자고 Typescript라는 새로운 언어를 배워야 하는거냐는 질문을 하실 수도 있으시겠지만, 우리는 Typescript를 선택해서 앞으로 Angular2를 개발하기로 합니다. 새로운 것을 배운다면 그에 따른 이점이 있어야 할텐데요. 일단은 Typescript를 만든 사람들이 설명하는 Typescript에 대한 소개 영상을 참고로 한번 보시면 동기부여가 됩니다.

 

 

다만 아쉬운 점은 영상이 영어라서 한글 자료는 없는데요. 아래 그림을 보면 훨씬 Typescript의 위치가 어디에 있는지 도움이 될 것 같습니다.

 

참조: Typescript Won (링크는 하단 참조)

 

보시다시피 Typescript는 새로운 언어라기 보다는 기존의 자바스크립트(ES5)와 위에서 설명한 ES6 스펙에 type과 관련된 추가적인 syntax가 추가된 언어입니다. 따라서 학습곡선이 그렇게 높지 않아 꼭 권하고 싶습니다. 왜냐하면 그림이 이미 설명하듯이 Typescript를 쓰다 보면 자연스럽게 최신의 자바스크립트 Syntax에 익숙해 질 수 있기 때문입니다. 시간날 때 틈틈히 매뉴얼 한 번 읽으면 누구나 Typescript를 쓸 수 있습니다. Typescript를 사용해야 하는 또 다른 이유는 실제로 Angular2 프레임워크 자체도  Typescript로 쓰여져 있기 때문입니다.  이 내용이 지난해 3월 MSDN에 공식 발표되기도 했었지는데요. 오프라인 상에서도 Angular 개발팀과 Typescript 팀이 활발하게 교류하고 있다고 합니다. Angular2에서 Typescript를 얼마나 활발하게 쓰는지 보여주는 단적인 예가 데코레이터라고 하는 문법입니다.  하단의 코드 샘플에서 @Component… 문법이 데코레이터라고 하는 것인데, 아직 Typescript 정식 문법은 아니고 실험버전이라 반드시 Typescript 컴파일 설정에 emitDecoratorMetadata를 “true”로 해줘야 합니다.

 

 

지금은 무슨 내용인지 이해하려고 노력하지 않으셔도 됩니다. 요지는 Angular2는 Typescript를 아주 깊게 사용하고 있으며, Typescript가 가진 장점이 많기 때문에 우리도 Typescript로 Angular2를 개발하자는 것입니다.

 

이번 글에서는 Angular2를 본격적으로 개발하기에 앞서 Angular2를 둘러싼 기반 기술과 개념 중 일부인 NPM, ES6, Transpier, Typescript까지 살펴보았습니다. 이어지는 포스팅에서 본격적으로 Typescript를 사용하여 간단한 Todo App을 작성해 보고, Angular2의 기본 배경 및 개념을 다루도록 하겠습니다. 추가로 아래는 3개월여 공부하면서 참조한 자료들을 첨부하였습니다. 그럼 다음 포스팅에서 뵙겠습니다.

Angular2 글 목록보기

참고 링크

  • http://ngcourse.rangle.io/handout/why_angular_2.html (Angular2 학습에 필요한 전반적인 기술 다룬 내용, 강추)
  • https://angular.io/docs/ts/latest/tutorial/ (공식 튜토리얼)
  • http://victorsavkin.com/ (angular2 개발 커밋 1등공신의 블로그, angular2 동작원리 잘 설명되어 있음
  • http://blog.thoughtram.io/categories/angular-2/ (angular 전문 컨설팅 독일 회사 블로그 내용 설명 좋음)
  • http://seokjun.kr/ecmascript-6-features/ (ECMA6 간략 설명)
  • http://xgrommx.github.io/rx-book/ (Rx.js 설명: Angular2 에서 아주 열심히 Rx.js 씀)
  • http://rxmarbles.com/ (Rx 이해를 돕는 애니매이션 사이트)
  • http://mobicon.tistory.com/category/Angular.io (한글 개인 블로그)
  • http://es6-features.org/#StatementBodies (ES6 와 ES5 코드 비교)
  • https://kangax.github.io/compat-table/es6/ (ES6 브라우저호환성)
  • http://han41858.tistory.com/3
  • http://sculove.github.io/slides/2016_FETrend/#/
  • https://kangax.github.io/compat-table/es6/
  • https://medium.com/@basarat/typescript-won-a4e0dfde4b08#.2xxoq0vo8 (Typescript Won)
  • https://www.gitbook.com/book/basarat/typescript (Typescript 학습자료)

영상 참고

2015년 angular 컨퍼런스에서 창시자가 angular2의 개념에 대한 설명