SPA 방식의 개발을 위해서는 Client에 MV* Framework을 선택해야 한다. 초창기는 Backbone.js(이하, 백본)를 많이 사용하였고, 구현체로 Trello가 있으니 해당 서비스의 아키텍쳐를 참조해 보자. 그리고 SKT에서 코너스톤이라는 이름의 Framework도 백본을 사용하여 "웹앱"을 만들 수 있도록 안드로이드/iOS용 런타임 환경도 제공한다. 백본은 가벼우면서 광범위하게 많이 사용을 하고 있지만 개발 복잡성 비교에서 중간정도에 위치한다.
브라우져에서 동작하는 애플리케이션의 템플릿이 .html 이면서 <chart ../> 와 같이 사용자 정의 html tag를 사용하여 View단을 좀 더 단순화 및 컴포넌트화 할 수 있는 AngularJS를 사용하기로 한다. AngularJS에는 여러 장점이 있지만 "웹 애플리케이션을 견고하게 만드는 방법" 블로깅을 통해 백본대신 왜 AngularJS를 선택했는지 갈음한다. AngularJs 프레임워크 기반의 SPA 개발을 위하여 쉽게 접근하는 방법은 도구를 통하여 하는 것인데, 오스마니님이 개발한 Yeoman을 통하여 AngularJS기반 프로젝트를 쉽게 구성할 수 있다.
1. Yeoman 사용하기
- 사전에 NodeJS 최신버전이 설치되어 있어야 한다.
설치후 npm (Node Package Manager)를 통하여 Yeoman(이하, yo)을 설치함
- Yo 설치하기 : 가이드를 따라서 설치하면 된다
+ yo : angular, express 등 관련 framework에 대한 scaffolding 프로젝트를 자동으로 만들어 주는 기능을 한다
generator-angular, generator-express와 같이 generator-*가 앞에 붙는다. npm 통하여 설치함
generator 만드는 방법은 "generator-angular와 express 연동하기" 블로그 참조한다
+ bower : client단의 필요한 컴포넌트를 자동설치할 수 있다. 의존성관계 bower.json 파일에 설정한다. npm 과 유사함
+ grunt : 개발된 소스를 테스트, 빌드하는 javascript의 ant과 같은 역할을 한다. Gruntfile.js 에 설정한다
- yo 설치후 "yo -h" 수행하면 설치된 generator 목록을 볼 수 있다. 또는 yo라고 수행해도 된다 (보여지는 형식만 틀리다)
// generator와 관련된 MUST HAVE generator
$ sudo npm install -g generator-generator
// angularjs 관련 generator 설치
$ sudo npm install -g generator-angular
// AngularJS 관련 scaffolding 명령 목록
$ yo -h
Angular
angular:app (default : angular)
angular:common
angular:constant
angular:controller
angular:decorator
angular:directive
angular:factory
angular:filter
angular:main
angular:provider
angular:route
angular:service
angular:value
angular:view
// express generator도 설치하자
$ sudo npm install -g generator-express
* 여기서 잠깐!
만일 사용하는 OS가 Windows라면 지금 당장 Linux를 설치해서 사용한다. 우리가 배포하고 서비스하는 서버는 Cloud환경일 가능성이 다분히 높기 때문이다. Windows Server같은 곳에서 Node.js를 운영하는 것은 상상조차 하고 싶지 않다.
- Vagrant를 Windows에 설치해서 쉽게 Linux환경에 접근토록 하자
2. AngularJS 스케폴딩 만들기
- yo를 통하여 AngularJS 기반의 SPA 프로젝트를 만든다. 여기에는 Node.js로 동작하는 서버 코드는 생성되지 않는다
- GitHub에 SmartVisualization 라고 생성을 한다. 각자의 계정에 만든다
// GitHub의 저장소 clone 하고 angular 스케폴딩 명령 수행
$ git clone https://github.com/<자신의 아이디>/SmartVisualization.git SmartVisualization
$ cd SmartVisualization
$ yo angular:app SmartVisualization
[?] Would you like to include Twitter Bootstrap? Yes
[?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? No
[?] Which modules would you like to include? (Press <space> to select)
❯⬢ angular-resource.js
⬢ angular-cookies.js
⬢ angular-sanitize.js
... 모듈들 자동 설치 중략 ...
// npm : package.json
// bower : .bowerrc, bower.json
// grunt : Gruntfile.js
// test 도구인 karma: karma*
// git 관련 : .git*
$ ls -alrt
-rw-r--r-- 1 nulpulum staff 11 2 21 2013 .gitattributes
-rw-r--r-- 1 nulpulum staff 415 4 16 00:02 .editorconfig
-rw-r--r-- 1 nulpulum staff 394 6 10 21:31 .jshintrc
-rw-r--r-- 1 nulpulum staff 56 6 10 21:31 .gitignore
-rw-r--r-- 1 nulpulum staff 44 6 10 21:31 .bowerrc
-rw-r--r-- 1 nulpulum staff 120 7 15 06:32 .travis.yml
-rw-r--r-- 1 nulpulum staff 1304 8 12 05:33 karma.conf.js
-rw-r--r-- 1 nulpulum staff 1348 8 12 05:33 karma-e2e.conf.js
drwxr-xr-x 5 nulpulum staff 170 9 25 08:51 ..
drwxr-xr-x 5 nulpulum staff 170 9 25 09:04 test
-rw-r--r-- 1 nulpulum staff 404 9 25 09:04 bower.json
-rw-r--r-- 1 nulpulum staff 8217 9 25 09:04 Gruntfile.js
drwxr-xr-x 12 nulpulum staff 408 9 25 09:04 app
drwxr-xr-x 16 nulpulum staff 544 9 25 09:04 .
drwxr-xr-x 39 nulpulum staff 1326 9 25 09:04 node_modules
-rw-r--r-- 1 nulpulum staff 1466 9 25 09:05 package.json
- Yeoman을 통하여 AngularJS 프로젝트 스케폴딩을 만들었다면 Grunt명령을 통하여 테스팅을 위한 서버를 기동할 수 있다
// 명령을 수행하면 Node.js를 기반으로 서버가 기동하고 9000 port로 Chrome브라우져가 자동 실행되어 호출된다
// Grunt는 Java의 Ant와 같은 도구이다
$ grunt server
Running "server" task
Running "clean:server" (clean) task
Cleaning .tmp...OK
Running "concurrent:server" (concurrent) task
Running "copy:styles" (copy) task
Copied 2 files
Done, without errors.
Elapsed time
copy:styles 15ms
Total 16ms
Running "coffee:dist" (coffee) task
Done, without errors.
Elapsed time
coffee:dist 10ms
Total 10ms
Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/bootstrap.css" created.
File ".tmp/styles/main.css" created.
Running "connect:livereload" (connect) task
Started connect web server on localhost:9000.
Running "open:server" (open) task
Running "watch" task
Waiting...
// 브라우져 자동 실행 및 9000 포트 자동 호출된 결과물
다음은 AngularJS 에 대하여 알아보자
<참조>
- Client MV* Framework에대한 ToDoMVC 개발 복잡성 비교
'My Services > Smart Visualization' 카테고리의 다른 글
| [Service Design] Product, Flat 그리고 Service 디자인에 대한 생각 (0) | 2013.10.05 |
|---|---|
| [Smart Visualization] 서비스 디자인 - 5 (0) | 2013.09.30 |
| [Smart Visualization] Twitter Bootstrap 고도화 - 4 (0) | 2013.09.27 |
| [Smart Visualization] AngularJS Framework 시작하기 - 3 (0) | 2013.09.25 |
| [Smart Visualization] SPA 파일럿 시작하며 - 1 (0) | 2013.09.24 |
