SPA 만들기를 시작하면서
필요에 의해서 웹페이지 하나를 만드는데, 테이블이 2개, 셀렉트 박스가 3개가 서로 맞물려서 데이터를 주고 받아야 하는데, 이걸 처리하려고 하니 일반 웹페이지에서는 페이지 갱신을 여러번 해줘야 하고, 그럴때 마다 할일없이 데이터 요청을 계속하게 되는 악순환?이 생겨서, 처음에는 그냥 페이지 로드하면서 백단에서 async하게 ajax call을 해볼 생각이었다.
문득 백단에서 호출하는 녀석을 ajax로 할 거면 angularjs로 하는 것도 괜찮지 않을까? 하는 생각을 했다. 그러면 이번에 나온 angularjs 2는 어떨까? 그러고 보니 angularjs가 typescript를 지원한다는데... 이참에 그것도 한번 해볼까? typescript를 잘 지원하는 에디터가 visual studio code라든데 그것도 한번 써볼까? 머 이런 꼬리에 꼬리를 무는 의구심으로 또다시 헬게이트에 발을 디뎠네요.
헬게이트라고 말하는 것이 대부분의 문서가 영어고, 구글성님이 영어만 알려줘서..., 기존 한글 문서들 보다 제가 멀 어떻게 잘 할 수 있을까 하는 생각도 있고, 그래도 그 문서들은 잘 이해는 안가고... =_=;;
여튼 문서를 따라가다 보니 AngularJS + TypeScript => SPA를 만드는 것으로 귀결되어서 일단은 퍼포먼스를 고려하지 않고 진행을 합니다. 그러다 봉사 문고리 잡는 방법이 생기면 계속 공유를 하겠습니다.
개발 환경 (참고)
OS X El Capitan
visual studio code
AngularJS
TypeScript
NodeJs (v5.8.0)
Visual Studio Code 설치 및 설정
Visual Studio Code는 Visual Studio와 비슷하다 상상하시면 안됩니다. 그냥 단순한 텍스트 에디터 + 좀 많은 플러그인 조합? 정도로만 생각하십시오. 맥이 에디터 부분에서는 진짜 빡세게 안좋다는 개인적인 생각입니다.
링크 : VS Code Extensions 중 TypeScript 관련 다운로드
AngularJS 2 프로젝트 생성
프로젝트 폴더 생성 : angularjs2-quickstart (샘플 코드에 나온 폴더)
mkdir angularjs2-quickstart
cd angularjs2-quickstart
tsconfig.json 파일 생성 (VS Code에서 ts 컴파일 가능 설정)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
(NodeJs에서 컴파일 가능 설정)
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Visual Studio Code에서 ts 컴파일 가능하도록 설정
#1. HelloWorld.ts 파일 생성
class Startup {
public static main(): number {
console.log('Hello World');
return 0;
}
}
Startup.main();
#2. tasks.json 생성 (F1 클릭) - TypeScript - tsconfig.json 선택 > .vscode/tasks.json 파일 생성
#2-1. tasks.json 파일
{
// See http://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
#3. 맥에서 ts 컴파일 방법 - ⇧⌘B
>>> 컴파일 오류가 나는 경우, typescript 설치
$ npm install -g typescript
typings.json 파일 생성
{
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
}
}
package.json 파일 생성
{
"name": "app",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.0",
"@angular/compiler": "2.0.0-rc.0",
"@angular/core": "2.0.0-rc.0",
"@angular/http": "2.0.0-rc.0",
"@angular/platform-browser": "2.0.0-rc.0",
"@angular/platform-browser-dynamic": "2.0.0-rc.0",
"@angular/router-deprecated": "2.0.0-rc.0",
"@angular/upgrade": "2.0.0-rc.0",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.5",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^0.8.1"
}
}
node-module 설치
> npm install
node_modules 폴더가 생성되고 package.json을 기준으로 의존적인(dependencies) 모듈들을 설치해 줍니다.
샘플 파일 생성
샘플 소스 : https://angular.io/docs/ts/latest/quickstart.html 참조
VS Code vs NodeJS 컴파일 비교
VS Code에서 컴파일(⇧⌘B) 하는 경우, 일반 컴파일러에서 하는 것 처럼 에러 로그 메시지를 보면서 확인이 가능합니다.
NodeJS에서 컴파일(node start)을 할 경우에는 3000번 포트의 웹페이지를 실행해서 결과물까지 직접 확인 가능합니다.
[추가] 현재 Visual Studio Code에서 컴파일을 한 경우에는 Duplicate 메시지가 많이 나옵니다. 그래도 돌아는 가네요. 먼가 불안한 모습을 보이고는 있지만 곧 해결이 되지 않을까 싶습니다.
# 에러메시지 샘플
app/app.component.ts(7,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
typings/browser/ambient/es6-shim/index.d.ts(8,14): error TS2300: Duplicate identifier 'PropertyKey'.
typings/browser/ambient/es6-shim/index.d.ts(11,5): error TS2300: Duplicate identifier 'done'.
typings/browser/ambient/es6-shim/index.d.ts(12,5): error TS2300: Duplicate identifier 'value'.
typings/browser/ambient/es6-shim/index.d.ts(250,5): error TS2300: Duplicate identifier 'EPSILON'.
이상으로 AngularJS 에 대한 허접한 설치, 설정 방법을 정리해 봤습니다. 관련 페이지 내용은 다음에 다시 정리하도록 하겠습니다. Visual Studio Code 를 설치하고 쓸일이 없었던 분들에게 좋은 기회?가 되었으면 합니다. ^^;;
참고 URL
angularJS 홈페이지 : https://angular.io/docs/ts/latest/quickstart.html
visual studio code 홈페이지 : https://code.visualstudio.com/Docs/languages/typescript