My First Angular 2 App 만들기
[링크] Angularjs 2 샘플 소스 다운받기 (QuickStart)
샘플 소스를 따라 하면 마지막에 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">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script> // es6의 필수 기능
<script src="node_modules/zone.js/dist/zone.js"></script> // 구버전 대응 polyfill
<script src="node_modules/reflect-metadata/Reflect.js"></script> // 구버전 대응 polyfill
<script src="node_modules/systemjs/dist/system.src.js"></script> // 구버전 대응 polyfill
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script> // systemjs library
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 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';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
HeroService
]);
위 내용은 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를 경유하지 않으려고 하는데... 이걸 어쩌나.. 싶습니다. 아직 페이지는 만들지도 않았는데...
혹시 누가 아시는 분이 있다면 저에게 지식을 나누어 주시길 바랍니다. ㅠ,.ㅠ;;