머신러닝 같은 강좌나 책을 읽다 보면 간혹 마주치는 단어가 시계열 혹은 시계열화 이란 것입니다. 말은 어려워 보이는데 영어로는 "time series" 라고 합니다. 한글은 어렵지만 영어는 어느 정도 뜻이 이해가 갑니다. 그냥 순차적으로 먼가 하는 거구나... 라는 센쑤~!
개발자들이 디비 등에서 추출한 정보는 보통 테이블 형식의 텍스트로 제공하는 경우가 많습니다. 이것을 보기 좋게 그래프 형태로 변형해서 보여주면, 직관적으로 이해하게 되고, 실시간 의사결정이 가능해 진다고 합니다. 예전부터 알고는 있었지만, 막상 그래프 표현은 좀 어렵기는 합니다.
vuejs에서는 되게 쉽습니다. 시계열의 대표적인 것이 Line Chart 일 것 같아서, 소스로 좀더 쉽게 만들어 보도록 하겠습니다. Line Charts 는 아래와 같은 형태 입니다.
맥에서 입맛에 맞는 에디터 찾기가 쉽지 않습니다. 특히나 맥맹인 저로써는 Visual Studio for Mac도 그리 좋아하지 않습니다. 애초에 텍스트 에디터나 리치 에디터 쪽에는 애플이 별로 신경을 쓰지 않은 것으로 보이네요. 적어도 맥맹인 저에게는 그렇습니다. =_=;;
그나마 마음에 드는 녀석이 바로 WebStorm 이네요. 코딩의 즐거움을 줄이기? 위해서 ReactJS용 템플릿을 만들어 보았습니다. 만든 김에 귀찮아서 package.json, webpack.config.js 템플릿도 만들었습니다. 지우고 다시 설정하면 되도록 계속 조정을 할 생각입니다. ^^
샘플 소스를 따라 하면 마지막에 npm start 가 나옵니다. 이 소스는 특별히 문제가 없어 보이지만, 다음 Tutorial의 소스인 Tour of Heroes를 따라하다 보면 NodeJS 위에서는 정상동작을 하나, 실제 웹서비스에서는 오류가 나옵니다. 데이터를 제대로 읽지 못해서 그런 것으로 보입니다. 그래서 TypeScript를 사용하는 것은 NodeJS 서버 위에서 사용을 해야하는 건가? 하는 고민을 하기도 했습니다. 실은 제가 NodeJS 프로젝트는 WebStorm 에디터를 이용해서 하고 있어서, 툴에 대한 종속성 문제가 생기는 거라, 좀 헤깔렸습니다. NodeJS + AngularJS + TypeScript도 한번 고민해봐야 할 거 같습니다. ^^;;
여튼 지금은 NodeJS를 제외한 상태에서 확인을 하도록 하겠습니다. 저의 경우, 이전 페이지에서 말씀드린 바와 같이 테이블 2개 이상, 입력창 3개 정도에서 데이터를 페이지 갱신없이 동작을 시키지 위한 페이지를 만드려고 하는 것입니다. 이미 웹 어플은 php로 정해져 있기 때문에, 저에게 필요한 것은 html페이지 하에서 onload 이벤트에서 async 하게 동작하는 것이 더 좋습니다. NodeJS는 전혀 고려대상이 아닙니다.
#1. tsconfig.js 작성 후 .vscode/tasks.json 파일 자동 생성 - tasks.json 파일로 TypeScript 컴파일러 설정까지 가능합니다.
#2. typings.json, package.json 작성 후 npm install로 node_modules, typings 폴더 이하 파일 자동 생성 - typings.json은 TypeScript의 정의 파일들, package.json은 필요한 팩키지와 스크립트들을 정의한 파일입니다.
위 두 단계는 진행을 했을 거라고 생각을 합니다. 어렵나요? 저게 어렵다기 보다는 영어가 넘사벽이지 않을까 싶네요. ㅠ,.ㅠ;;
이제 첫번째 프로젝트인 "My First Angular 2 App" 만들기를 본격적으로 시작해 보겠습니다.
index.html
<html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 모바일 가로, 세로 변경에 따른 대응 메타 태그 --> <link rel="stylesheet" href="styles.css">
<!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
[참고] polyfill? 뿔? 최신이 아닌 오래된 버전의 브라우저에서 HTML5 API를 모방한 JS 라이브러리 등의 도움을 받아 정상 작동하도록 하는 대안으로 기능을 구현하는 행위를 의미 하다고 하네요.
app/app.component.ts
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' })
export class AppComponent { }
모든 angular app은 AppComponent 로 이름지어진 최소 한 개 이상의 root component를 가지고 있습니다. 컴포넌트는 angular app의 기본 구성 블록? 입니다. 하나는 컴포넌트는 각 구성 템플릿을 통한 화면(뷰)의 부분(요소)들을 관리합니다. 샘플 소스의 컴포넌트는 index.html의 <my-app> 영역에 '<h1>My First Angular 2 App</h1>' 내용을 출력 할 겁니다. 잠시 구성 내용을 보겠습니다.
import : angular app의 모듈을 호출해서 객체? { 객체명 } (영문으로는 decorator) 으로 선언을 합니다. nodejs에서는 var express = require('express'); 이런 형태가 되지 않을까 싶습니다.
decorator : js에서는 객체? 정도의 개념을 가지고 있을 것으로 보이는데, 번역이 어렵네요. import를 통해서 모듈을 참조한 객체를 활용합니다. 샘플에서는 { Component } 선언하여 '@angular/core' 모듈을 참조시킨 후 @Component로 사용하였습니다.
metadata : @Component decorator 이하 selector, template 가 포함된 { } 영역을 말합니다. 샘플 소스 처럼 모든 decorator는 metadata를 포함하고 있습니다. 해당 모듈 실행을 위한 초기값 정도로 생각하셔도 될 거 같습니다.
selector : jQuery 등을 사용하신 분이라면 익숙한 용어일 겁니다. HTML 태그명을 지칭하고 있네요. 샘플에서는 <my-app>을 찾습니다.
template : selector로 지정된 영역을 대체할 html 내용을 넣으면 됩니다. 파일명을 넣을 경우에는 templateUrl 을 사용하시면 됩니다.
AppComponent : 이 클래스에 속성과 로직을 추가하여 확장이 가능합니다. 샘플소스는 비어 있기 때문에 아무런 일이 일어나지는 않을 겁니다. 해당 내용은 main.ts에서 확인이 가능 합니다.
app/main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
소스만 보셔도 이녀석이 딱! 무슨 일을 하는지 아시겠죠? c에서 main() 함수와 비슷한 녀석으로 보입니다. bootstrap, AppComponent를 import 해서, 다시 bootstrap에 AppComponent를 인자로 호출을 합니다. 결국 main.ts가 실제 실행 파일로 보입니다. bootstrap ('@angular/platform-browser-dynamic')이 앱을 실행하는 방법 중에 하나 라고 하네요. 모바일의 경우에는 Apache Cordovar나 Native Script를 로드해야 합니다. 지금은 페이지가 샘플이라 간단하지만 프로젝트에 따라 훨씬 복잡하게 만들 수도 있습니다.
import {bootstrap} from '@angular/platform-browser-dynamic'; import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; import {HeroService} from './hero.service'; import {AppComponent} from './app.component';
위 내용은 Turorial의 샘플인 Tour of Heroes의 main.ts 파일입니다.
systemjs.config.js
샘플 소스는 다른 앱이나 모듈을 로드하기 위해서 SystemJS를 포함하고 있습니다. 이녀석은 webpack을 포함하고 있습니다. 이 부분은 생산성이나 퍼포먼스를 위해 좋은 방법으로 보입니다. 실제 설정 파일의 내용은 좀 복잡하니 실제 파일을 참고해서 확인하시면 됩니다.
styles.css
css 파일은 아실 거라고 봅니다. html 파일에 대한 스타일 파일이라 굳이 설명할 필요는 없어 보입니다.
실행할 준비는 이제 끝났습니다. 설명이 좀 부족한 거 같기는 한데... ^^ 저도 처음 하는 거라 제가 이해하는 부분까지만 정리를 했습니다.
nodejs를 실행하시는 경우에는 아래의 명령을 콘솔에서 실행하시면 됩니다. 그러면 ts파일을 js파일로 컴파일 후 브라우저를 실행합니다.
npm start
Visual Studio Code에서 직접 실행을 원하신다면 컴파일 명령(⇧⌘B)을 실행하시면 됩니다.
중간까지의 결론, 속도가 왜 이렇게 느리지?
일단 제가 무언가 잘못한 거 같아 보입니다. nodejs와 웹서버에서도 결과물이 나오는데 3초 이상이 소요되는 거 같습니다. 가끔 빠르게 나오기는 하지만 기본적으로 느립니다. 기대 이상으로 느립니다. 샘플 코드가 그러니, 이걸 어쩌나.. 하는 생각이 듭니다. =_=;;
SPA이기 때문에 최초 실행 후 부터는 페이지 갱신이 안되니 빨라 지려나 기대를 하기도 하지만, 애시당초 이를 어쩌나 싶습니다. nodejs를 경유하지 않으려고 하는데... 이걸 어쩌나.. 싶습니다. 아직 페이지는 만들지도 않았는데...
필요에 의해서 웹페이지 하나를 만드는데, 테이블이 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와 비슷하다 상상하시면 안됩니다. 그냥 단순한 텍스트 에디터 + 좀 많은 플러그인 조합? 정도로만 생각하십시오. 맥이 에디터 부분에서는 진짜 빡세게 안좋다는 개인적인 생각입니다.
#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
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 를 설치하고 쓸일이 없었던 분들에게 좋은 기회?가 되었으면 합니다. ^^;;
