Angular(앵귤러): QuickStart 따라하기

참고: Angular(앵귤러) 연재는 여기를 참조해 주세요. 틀린 부분이나 의견, 피드백은 언제든지 환영합니다. 

들어가기

지난번 에서는 Angular(앵귤러) 프레임워크를 사용하기 위해서 필요한 최소한의 배경 개념을 다루었습니다. 이제 Angular가 어떻게 생겼는지 눈과 손으로 확인을 해 볼 차례입니다. 첫 예제는  공식 매뉴얼에 있는  QUICKSTART입니다. Angular 개발환경 셋팅 후 “Hello World” 보는 것이 목표라고 생각하시면 됩니다.

 

매뉴얼대로 묻지도 따지지도 않고 따라하면 정말 5분 안에 뭔가 나오기는 합니다만, 내가 뭘 했는지 이해하기 쉽지 않습니다. 

Angular 팀은 바로 시작해 볼 수 있는 예제 프로젝트(QuickStart) 소스를 제공합니다.본 글에서는 퀵스타트 소스의 내용을 조금 더 이해하기 쉽도록 풀어보고자 합니다. 일단은 있는 그대로 따라하며 브라우저에 화면을 띄워 본 후에 다시 처음으로 돌아와 설명을 읽어보시기를 권장합니다.

 

에디터 선택

아무리 퀵스타트라지만 개발을 하려면 연장이 필요하겠지요? 필요한 도구는 Typescript를 지원하는 IDE나 에디터 하나만 있으면 됩니다. 대부분의 유명한 에디터나 IDE가 Typescript용 플러그인을 제공하고 있으므로, 가장 손에 익숙한 것을 사용하셔도 됩니다. 본 연재에서는 ATOM 에디터를 사용합니다. 공식 사이트에서 OS에 맞게 install 파일을 받으시고 정상적으로 설치가 완료되면 아래와 같은 화면을 만날 수 있습니다.

 

first_atom

 

그리고 우측 두번째 버튼 “Install a Package”을 눌러 “atom-typescript“만 설치해 주시면 됩니다.

 

typescript_atom

 

개발환경 구성

개발환경 구성은 다음의 순서로 이루어집니다.

  1. Node 설치
  2. 퀵스타트 소스 받기
  3. 프로젝트용 빈 폴더 생성
  4. tsconfig.json 파일 생성
  5. typings.json 파일 생성
  6. package.json 파일 생성
  7. npm, typings 패키지 설치

 

Node 설치

공식 사이트에 들어가서 자신의 OS에 맞는 installer를 받아서 설치합니다. node가 정상적으로 설치되면 터미널에서 node와 npm이 정상적으로 설치되었는지 확인합니다.

 

 

node_js

 

퀵스타트 소스 받기

git을 사용한다면 터미널에서 다음 명령을 실행하여 리파지토리를 클론하면 됩니다.

git을 사용하지 않을 경우에는 직접 Zip 파일을 받을 수도 있습니다.

https://github.com/angular/quickstart/archive/master.zip

 

일단 실행해 보기

소스를 클론한 뒤 quickstart 폴더로 이동합니다. 퀵스타트를 실행하기 위해서 먼저 NPM으로 의존 패키지를 설치해야 합니다. 다음 명령을 실행하여 퀵스타트 프로젝트가 사용하는 패키지를 설치합니다.

 

패키지 설치가 끝나면 바로 퀵스타트 프로젝트를 실행할 수 있습니다. 예제 프로젝트에서 제공하는 다음 명령을 실행합니다.

 

소스가 컴파일 된 후 브라우저에 Hello, Angular라는 문구와 함께 애플리케이션이 실행됩니다.

기본 설정 파일 생성

생성한 프로젝트 폴더 follow-quickstart에 tsconfig.json 파일을 만들고 다음의 내용을 복사해서 붙여넣습니다.

 

 

tsconfig.json은 Typescript를 Javascript로 컴파일할 때 적용할 옵션설정을 명시해 둔 파일입니다. 컴파일 할 때 터미널에서 “tsc” 명렁어를 사용해서 컴파일을 하는데 만약 ES5 기준으로 컴파일 하고 싶을 경우 “tsc –target es5″를 입력하면 되는데요. 반복적인 컴파일 옵션은 tsconfig.json에 등록해 두면 터미널에서 불필요하게 파라미터를 추가할 필요가 없습니다. 자세한 컴파일 옵션과 관련해서는 아래의 링크를 참조하면 됩니다.

  • https://www.typescriptlang.org/docs/handbook/compiler-options.html (컴파일 옵션)
  • http://www.typescriptlang.org/docs/handbook/tsconfig.json.html (tsconfig.json 정의)

 

이어서 typings.json 파일을 만들고 역시 다음의 내용을 복사해서 붙여넣습니다.

 

typings는 Typescript를 사용할 때 따라 붙는 필수 툴입니다.  typings에서 대해서 설명하려면 지난 시간에 설명한 Typescript 정의에 대해서 복기해 볼 필요가 있습니다. 지난 글에서 Typescript는 ES5 + ES6 + 타입 등의 추가 Syntax로 이루어진 스크립트 언어라고 설명했습니다. 이 정의에서 중요한 부분은 ECMA에 없는 바로 타입입니다.

 

자 그럼, 질문을 하나 드려보겠습니다. 기존의 Javascript는 타입이 없는데 Typescript로 개발 시 어떻게 jQuery 등의 라이브러리를 어떻게 사용할 수 있을까요? 아니 이 질문 전에 Typescript로 개발하면 기존에 Javascript로 작성된 외부 라이브러리나 코드를 사용할 수가 있는건가요? 질문에 대한 대답은 당연이 “예”입니다. 다만 한 가지 추가적인 작업이 필요합니다. 바로 타입 정보인데요. 만약 우리 소스에 jQuery를 추가로 사용하기로 했는데 타입 정보가 주어지지 않는다면 여러분의 에디터에서는 가차없이 빨간 줄을 jQuery를 사용한 코드에 뿌려줄 겁니다. 아니면 컴파일 시점에 Typescript 컴파일러가 해당 라이브러리를 인식하지 못해 에러를 여러분에게 보여줄 겁니다.

 

Typescript로 개발하는 가장 큰 장점은 정적인 코드 분석 등 IDE와 같은 도구의 지원으로 배포 및 런타임 전에 사전의 발생할 버그나 오류를 잡을 수 있다는 것입니다. 어찌보면 타입이 있는 컴파일 언어에서 당연한 소리이겠지만, 타입이 없었던 Javascript 세상에서는 분명 새로운 이야기임에 틀림 없습니다.

 

처음에 던졌던 질문으로 돌아와서 빨간 줄을 없애기 위해서 추가로 해야할 일이 있다고 말씀 드렸는데요. 그 일은 바로 해당 라이브러리에 타입 정보를 직접 추가해 주는 것입니다. 예를 들어 jQuery의 datepicker를 쓴 다고 가정해 봅시다. 그러면 우리는 아래와 같은 type 정보를 어딘가 선언해 두어야 합니다.

 

 

겨우 하나의 메서드를 선언하는데는 큰 무리가 없지만 jQuery 하나만 해도 적지 않은 메서드가 있는데 일일이 타입정보를 만들려면 힘들겠지요. 다행히도 오픈소스 생태계에서 이러한 작업(이라고 하고 노가다…)를 함께 공유하는 생태계가 있으니 그것이 바로 typings 입니다. 사전 설명이 길었는데 typings는 기존 Javascript 라이브러리들의 타입 정보만을 선언한 파일들을 내려받을 수 있도록 도와주는 툴입니다.

 

NPM을 통해서 우리가 필요한 외부 라이브러리를 쉽게 내려받고 package.json으로 관리하듯이 우리가 필요한 외부 라이브러리의 타입 정보가 필요하다면 “typings install dt~jQuery –save –global” 명령어 하나면 알아서 타입 정보가 담긴 파일을 내려받게 됩니다. –global 옵션은 일단 무시해 주세요. 본 quickstart 예제에서는 typings를 실제로 쓸 일이 없어 다음에 좀 더 자세하게 설명하기로 합니다.

 

마지막으로 package.json 파일을 만들고 다음의 내용을 복사해서 붙여넣습니다.

 

필수 패키지 설치

지난 글에서 설명한 대로 NPM을 통해서 Angular2에 필요한 패키지 목록을 다운받을 수 있도록 package.json에 dependencies와 devDependencies가 선언되어 있습니다. package.json에 라이브러리가 선언되어 있으면 install 명령어로 간단하게 위에 열거된 라이브러리들을 설치할 수 있습니다. 명령을 실행하면 package.json에 등록된 패키지와 각 패키지가 의존하는 패키지까지 설치가 자동으로 진행이 됩니다.

 

 

매뉴얼에도 적혀 있지만 install 명령 시에 터미널에서 “npm WARN”은 무시해도 개발에 문제가 없지만 “npm ERR!”은 보이면 안되는 결과입니다. npm install을 할 때 모두에게 평화가 있기를 바랍니다. 정상적으로 설치가 되었다면 현재 폴더 기준으로 node_module이란 폴더가 생성되고 이 폴더 안에 설치된 패키지들이 위치해야 합니다. 만약 패키지가 로컬 폴더에 정상적으로 설치되었는지 확인하고 싶다면 다음의 명령어로 현재 로컬 폴더에서 사용하는 패키지 목록을 확인할 수 있습니다.

 

 

npm_list

 

이후에 jQuery 등과 같은 외부 패키지가 필요할 때에 NPM을 통해서 패키지 관리가 가능합니다.  다음 기회에 필요한 패키지 설치하는 법을 설명하도록 하겠습니다.

 

Hello Angular2

개발환경 설정에 생각보다 긴 시간이 흘렀습니다. 지금까지 제대로 따라오셨다면 ATOM 에디터에 다음과 같은 폴더 구조가 보여야 합니다.

 

dev_env

 

드디어 Angular2를 만나볼 차례입니다. 위에서 생성했던 폴더 follow-quickstart에 스크립트 소스가 자리할 “app” 폴더를 만들고, 여기에 app.component.ts 란 이름의 파일을 생성 후 아래 코드를 붙여 넣습니다. app.component.ts 파일의 확장자 ts는 Typescript 파일을 의미합니다. 드디어 우리는 첫 번째 Tyescript로 만들어진 Angular2 소스를 만나게 되었습니다.

 

 

ATOM 에디터 설치 후 “atom-typescript” 패키지가 정상 설치가 되었다면 에디터에서 자동으로 ts파일을 컴파일 하여 app.component.ts외에 app.component.js와 app.component.map 파일을 생성해 줍니다. 어떻게 ts 확장자의 스크립트 소스가 js로 변환되는지 궁금하신 분들은 한번 확인해 보셔도 됩니다. 우리에게 익숙한 ES5형태의 자바스크립트 소스를 만날 수 있습니다. (map 파일은 디버깅 용도를 위한 추가 정보로 필수 요건은 아닙니다.)

 

first_compile

 

우리는 방금 Typescript로 짠 최초의 Angular2 컴포넌트를 만들었습니다. Angular 앱은 기본적으로 Tree 구조를 갖고 있으며 따라서 반드시 적어도 하나의 최상위 부모 컴포넌트가 있어야만 합니다. 방금 여러분이 작성한 소스가 이 부모 컴포넌트에 해당합니다. 컴포넌트는 웹앱 개발 뷰 템플릿을 관리하는 하나의 독립된 정도로 생각하면 좋을 것 같습니다. “컴포넌트”의 의미에 대해서는 추후에 다시 설명하도록 하겠습니다.

 

첫 컴포넌트 작성에 사용된 소스를 한 번 살펴보도록 하겠습니다. 먼저 관례적으로 최상위 컴포넌트를 AppComponent라고 이름 짓습니다. 소스 내용을 보면 생소한 부분들이 많이 있는데요. 여기서 주의하셔야 할 부분이 위 소스의 대부분이 이번에 ES6에 새로 추가된 자바스크립트 문법 이라는 점입니다.  Typescript나 Angular2에서만 문법이 아니라는 뜻입니다.

 

먼저 첫 번째 줄의 import는 ES6에서 추가된 대표적인 문법으로, Javascript 모듈을 불러올 때 사용합니다. Javascript 진영에서 모듈화와 관련된 여러 개별적인 움직임들이 있어 왔는데요. 드디어 언어적으로는 ES6에서 공식 지원이 됩니다.  Angular 역시 모든 요소들이 모듈화 되어 있고, 필요한 것은 반드시 import한 후에 사용이 가능합니다. Javascript의 모듈과 관련한 자세한 내용은 이후에 다루도록 합니다.

 

@Component는 데코레이터라고 하며, 앞으로 Angular 앱 개발 시 자주 보게 될 부분입니다. @Component안에 정의된 객체가 Angular에게 어떤 뷰 템플릿을 사용할지, 어떻게 컴포넌트를 생성할 지 등 메타 정보를 담고 있습니다. 위에서 selector의 의미는 이 컴포넌트가 갖게될 tag의 이름을 지칭하고, template은 유추할 수 있듯이 실제 컴포넌트가 렌더링 될 템플릿 정보입니다.

 

마지막으로  export class AppComponent를 한 번 분석해 봅시다. 이 문장에 총 3개의 단어가 있는데요. 뒤에서 부터 다음과 같이 읽을 수 있습니다.

  1.  “AppComponent”라는 이름의
  2. 클래스를 선언하고
  3. 이 클래스를 외부에 모듈로 공개

클래스 역시 ES6에 정식으로 추가된 것입니다. 눈치가 빠르신 분들은 아실 수도 있겠지만 클래스 선언 앞에 export가 붙는 순간 다른 파일(모듈)에서 위에서 설명한 import가 가능합니다. 자 그럼 한 번 AppComponent를 import 해볼까요?

 

Bootstraping

위에서 생성한 AppComponent는 우리가 QuickStart에서 사용할 루트 컴포넌트임을 설명했습니다. 그런데 어떻게 이 루트 컴포넌트를 실행시킬까요? Angular의 최초 진입점이 어디일까요? 이제 우리는 진입점 역할을 하는 소스가 하나 더 필요합니다. 진입점 역할을 하는 파일 main.ts를 만들어 봅시다.

 

 

처음 AppComponent 소스 보다는 눈에 좀 더 들어오지 않나요? Angular에서는 최초 실행을 위해서 bootstrap 메서드를 제공하고 있고, 이를 사용하기 위해서 역시 bootstrap을 import하고 있는게 눈에 들어오네요. import의 출처를 보면 ‘@angular/platform-browser-dynamic’으로 되어 있는데요. 이는 angular2가 bootstrap 될 환경이 browser에만 국한되지 않는다는 것을 보여줍니다.즉  bootstrap될 환경에 따라 다른 bootsrap 메서드를 import할 수가 있습니다. 예를 들면, 현재 Angular2는 네이티브 앱 및 서버 렌더링까지 지원을 가지고 있습니다.

 

Index.html

마지막으로 지금까지 작성한 두 소스를 실제 웹페이지에서 실행해 봅시다. 우리가 작성한 AppComponent 실행을 위해 다음의 index.html 파일을 프로젝트 폴더에 하나 생성합니다. (app 폴더 밑이 아닙니다.)

 

 

주석에 이미 적혀 있듯 index.html 안에도 설명이 필요한 부분이 세가지가 있습니다.  먼저 Angular2에서 필요로하는 의존 스크립트를 로드하는 것입니다. 각각의 용도는 다음과 같습니다.

  • es6-shim: 지난 시간에 설명하였던 내용으로 브라우저에서 지원하지 않는 es6 기능 지원을 위한 스크립트
  • zone.js: Angular2 에서 이벤트 detecet를 위해 사용하는 필수 라이브러리, 추후에 자세히 설명
  • Reflect.js: Angular2 에서 사용하는 @(데코레이터)를 위한 필수 라이브러리
  • System.js: Angluar2 모듈 로더

 

System.js

System.js는 우리가 app 폴더 하위에 작성한 Angular2 앱 모듈을 브라우저에서 실제 로딩하기 위한 툴로 쓰입니다. Javascript에서 모듈의 개념은 AMD, CommonJS과 같은 방식으로 이미 있던 개념이지만 위에서 잠깐 맛 본 import, export와 함께 ES6를 통해서 이제 언어에서 공식적으로 지원하게 되었습니다. Angular2 에서는 특정 모듈 로더를 사용하도록 제한하고 있지 않지만 간단한 예제용으로  System.js를 사용하고 있습니다. 본 연재에서는 추후에 System.js대신 webpack을 설명할 예정입니다.

 

일단 모듈 로더가 정상적으로 동작하기 위해서도 필요한 설정이 있습니다. 이를 위해 프로젝트 루트 폴더에 systemjs.config.js  파일을 생성 후에 아래 내용을 붙여 넣습니다. systemjs.config.js 파일의 내용을 보면 결국 사용할 패키지 선언과 실행할 앱을 설정하는 내용에 불과합니다. 지금은 자세한 내용을 이해하려 하기 보다는 모듈을 로드하기 위한 설정이 필요하다는 점만 인식합니다.

 

지금까지 index.html의 1,2번 주석에 대한 내용을 설명하였고 이제 마지막으로 다음의 내용만 확인하면 됩니다.

 

 

body 태그 안에 “my-app”이란 태그는 우리가 제일 처음 작성한 AppComponent의 “selector”에서 선언한 태그명과 동일하다는 것을 알고 있습니다. 여러분이 예측하시는 것과 같이 my-app이란 태그는 Angular2는 selector에 있는 태그명과 연결되어 실제 렌더링 시에는 AppComponent의 템플릿이 my-app 태그 위치에 자리하게 됩니다.

 

마지막으로 index.html에 styles.css가 import되어 있는데, styles.css 파일을 생성 후 공식 사이트에 있는 css를 그대로 옮겨 놓습니다.

 

 

이제 모든 작업이 끝났습니다! 터미널 창에서 다음과 같은 명령어를 통해서 간단한 http 서버를 띄워서 결과를 확인할 수 있습니다.

 

 

package.json에 “scripts” 속성에 이미 “start”라는 명령 스크립트가 선언되어 있습니다. 이 명령은 “tsc” 명령으로 타입스크립트를 컴파일하면서 동시에 “concurrently” 명령을 통해서 “npm run tsc:w”와  “npm run lite”명령까지 병렬적으로 실행합니다.

“tsc:w”는 타입스크립트 컴파일을 watch 모드로 계쏙 실행하는 코드이고, “lite” 명령은 devDependency에 선언되어 있는 “lite-server”  http 서버를 실행하는 명령어 입니다. 따라서 명령을 수행하면 자동으로 http서버가 실행되고 매뉴얼에서 볼 수 있는 것과 동일한  화면을 만날 수 있습니다.

 

 

한번 AppComponent 안에 template을 여러분의 기호에 따라 변경해 보시고 실제 브라우저에 반영되는지 확인해 보시기 바랍니다.

여기까지 따라오셨으면 이 예제의 폴더 구조는 다음과 같을 것입니다.

first_app_structure

 

정리하기

오늘은 Angular2 공식 예제 첫 번째인 Quickstart를 함께 따라해 보았습니다. 영어가 편한 분들은 사실 직접 매뉴얼을 읽으셔도 무방합니다. 그러나 이 연재의 서두에서 말씀드렸던 것처럼 다양한 개념들이 한 꺼번에 쏟아져 나오기에 읽어도 내용이 한 눈에 들어오지 않을 수 있습니다. 따라서 본 글에서는 각 내용을 너무 깊이 다루지는 않으면서도 최소한 예제를 이해하는데 도움을 줄 수 있는데까지 설명하는 것을 목적으로 하고자 노력했습니다.

 

워낙 여러 개념들이 쓰이다 보니 부족한 부분이나 잘못된 부분이 있을수도 있습니다. 또한 현재 angular.io 사이트의 가이드라인도 수시로 업데이트 되고 있어 본 포스팅의 내용과 달라진 것도 있을 수 있기에 의견 및 질문은 언제든 환영입니다.

Angular2 글 목록보기