프론트 개발을 위해 준비해야할 것들은 무엇이 있을까? 우선 개발 및 테스트 프레임워크와 라이브러리 관리, 테스트/코드커버리지/빌드 자동화 수행등 준비할 것들이 많다. 이것을 한번에 준비하고 자동화할 방법은 없을까?
1. Yeoman
- yo : 코드 스케폴딩 역할 (프로젝트를 시작할 때 최초에 디렉토리구조와 템플릿 파일일 제공해 준다) generator-* 로 시작
- grunt : test, lint, concatenate, build등 Java의 Ant와 같은 Task를 자동 수행
- bower : 내부적으로 사용하는 컴포넌트의 버전 의존성 관리 및 설치/업데이트/삭제 관리
- 참조
2. Addy Osmani의 Frontend Workflow
- 자동화는 반복적인 작업을 효율적으로 만드는 과정
- Frontend Automation = Scaffolding + Download Libraries + Download Template + Download Framework
3. PlayHub Workflow 만들기
- 자신의 개발환경에 GitHub 저장소 설정하기
+ mac 또는 windows
+ nitrous.io 같은 PaaS 에도 설정가능
// Node Version Manager 설치
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
$ exit
logout
Connection to 127.0.0.1 closed.
// 현재 CentOS에 설치된 Node version 정보가 나오고 원하는 버전정보를 선택하여 사용할 수 있다. 명령은 help 참조
$ nvm list
N/A
current: v0.11.5
// playhub 디렉토리 만듦 - 해당 디렉토리 밑으로 playhub의 저장소를 놓을 것임
$ mkdir playhub
// playhub의 저장소를 git clone하기 위하여 자신의 ssh 공개키가 없다면 생성한다
// 생성방법 참조
$ cd .ssh
$ ssh-keygen -t rsa -C ysyun@yuwin.co.kr // 이후 쭉 enter
Generating public/private rsa key pair.
Enter file in which to save the key (/home/vagrant/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/vagrant/.ssh/id_rsa.
Your public key has been saved in /home/vagrant/.ssh/id_rsa.pub.
The key fingerprint is:
8a:32:de:ef:de:fd:22:8f:8d:38:70:b0:d7:56:e1:da ysyun@yuwin.co.kr
The key's randomart image is:
+--[ RSA 2048]---+
| |
| . |
| . . |
| . o |
| o .S+ |
| o.o.+ E |
| o .+.. |
| . + .o.=. |
| . .+=.+o+o. |
+------------------+
$ ssh-add id_rsa
Could not open a connection to your authentication agent.
// 두개의 id_rsa 파일 생성
$ ls -lart
-rw-rw-r-- 1 vagrant vagrant 399 2013-10-30 05:59 id_rsa.pub
-rw------- 1 vagrant vagrant 1675 2013-10-30 05:59 id_rsa
drwx------ 2 vagrant root 4096 2013-10-30 05:59 .
$ cat id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAyvfJRNE/Kx+VwuGcQX8+PYbFadT6mCLZ1.. 중략 ..XS0U0uQ== ysyun@yuwin.co.kr
// GitHub -> "Account Settings" -> "SSH Keys"에서 SSH key값 등록
// 이제 GitHub에서 PlayHub의 Palette를 clone 해 보자 (git 기본 설치를 전제로 함)
$ cd ../playhub/
$ git clone git@github.com:playground-ko/palette.git
Initialized empty Git repository in /home/vagrant/playhub/palette/.git/
.. 중략 ..
$ ls - lart
drwxr-xr-x 5 vagrant vagrant 4096 2013-10-30 06:07 palette
// submodule에 대하여 초기화 하고 업데이트 한다 (Git 환경만들기 참조)
$ cd palette
$ git submodule init
Submodule 'backend' (git@github.com:playground-ko/palette.backend.git) registered for path 'backend'
Submodule 'frontend' (git@github.com:playground-ko/palette.frontend.git) registered for path 'frontend'
$ git submodule update
Initialized empty Git repository in /home/vagrant/playhub/palette/backend/.git/
.. 중략 ..
Submodule path 'backend': checked out 'f8276822e8a12a15f2af19e0c62cbd74a9172d84'
Initialized empty Git repository in /home/vagrant/playhub/palette/frontend/.git/
.. 중략 ..
Submodule path 'frontend': checked out 'e1b7201011321e1df2cc990c4eb2042c765c8a3c'
// playhub 디렉토리로 이동하여 bankend, frontend 저장소를 별도로 받아서 개발을 시작한다
$ cd ..
$ git clone git@github.com:playground-ko/palette.backend.git
Initialized empty Git repository in /home/vagrant/playhub/palette.backend/.git/
.. 중략 ..
$ git clone git@github.com:playground-ko/palette.frontend.git
Initialized empty Git repository in /home/vagrant/playhub/palette.frontend/.git/
.. 중략 ..
- yo/grunt/bower, generator-angular 를 설치 또는 업그레이드 하고, frontend 디렉토리로 이동하여 프로젝트를 만든다
// yo를 설치하면 grunt와 bower가 같이 설치된다
$ sudo npm install -g yo
// 현재 버전은 1.0.4 (2013.10.31 기준)
$ yo --version
1.0.0-rc.1.4
$ grunt --version
grunt-cli v0.1.9
grunt v0.4.1
$ bower --version
1.2.7
// 이미 설치되어 있다면 최신버전으로 업데이트 한다
$ sudo npm update -g yo
$ sudo npm update -g grunt-cli
$ sudo npm update -g bower
// angular framework 설치
$ sudo npm install -g generator-angular
// angular 웹앱을 만든다
$ cd palette.frontend/
$ yo angular Palette
// 빌드하면 배포할 수 있는 dist 배포 디렉토리가 나온다.
// dist는 온전한 html, css, js 파일들이고 이것은 어느 웹서버에 가져다 놓아도 구동이 된다
// 즉, 굳이 node.js위에 구동되지 않아도 됨
// 기본적으로 build를 하면 관련 js 파일을 minification하여 사이즈를 줄여준다
// Sublime Text에 Grunt build를 설정할 수 있다
$ grunt build
// karma 통하여 unit, e2e 테스트 수행
$ grunt test
// node.js 기반으로 서버가 열리면서 브라우져(Chrome)도 자동으로 열린다
$ grunt server
// dist 배포본은 python을 통하여 간단히 테스트 해 볼 수도 있다
// 브라우져에서 8000 port를 열어서 배포본이 정상적으로 작동하는지 아이체킹
$ cd dist
$ python -m SimpleHTTPServer 8000
이제 Frontend를 Yeoman을 통하여 개발해 보자
4. BootFlat 적용하기
- yeoman의 generator-bootstrap은 v2.* 버전이 적용되어 있다. Bootstrap v3.* 버전이 적용된 BootFlat 확장판을 적용하기 위한 방법은 기존 블로깅을 참조한다.
<참조>
- Yeoman을 통해 AngularJS 프로젝트 자동 구성하기
'My Services > PlayHub' 카테고리의 다른 글
[PlayHub] 서비스 디자인 - 6 (2) | 2013.11.09 |
---|---|
[PlayHub] Frontend를 위한 Backend 개발 환경 구성하기 - 5 (0) | 2013.11.09 |
[PlayHub] 아키텍쳐 및 Git 환경 만들기 - 3 (0) | 2013.10.28 |
[PlayHub] SRS (Software Requirements Specification) - 2 (0) | 2013.10.28 |
[PlayHub] 잘 놀고 싶다 - 1 (0) | 2013.10.24 |