1. 도구를 활용한 더 나은 웹 개발: Yeoman
2013.01.24 / nhn_박재성 (alberto.park at gmail.com)
http://www.flickr.com/photos/75905404@N00/7126147125/sizes/l/in/photostream/

2. 오늘날의 웹 개발은?
▪ 라이브러리 다운로드
 라이브러리가 다른 dependency를 필요로 하는 경우 추가 다운로드 필요
 최신버전 업데이트 반영
▪ 페이지에 소스 include
▪ 라이브러리의 사용 가이드에 따른 코드 작업
▪ 빌드 & 배포
- 웹 서버 설치 및 설정
- Static 파일들의 minification & merging
- 이미지 파일의 경우 용량 최적화 처리
▪ 테스트
- 단위 테스트
- linting (코드 품질 검사)
…
웹 서비스를 개발하기 위해서는 수많은 외부 라이브러리,
프레임워크 및 도구의 사용은 필수적!

3. 자, 그럼 이제 어떤
도구들을 사용해 볼까요?

4. http://nodejs.org/
http://gruntjs.com/
http://livereload.com/
http://twitter.github.com/bower/ http://phantomjs.org/
http://pivotal.github.com/jasmine/ http://compass-style.org/
http://modernizr.com/
http://visionmedia.github.com/mocha/

5. http://html5boilerplate.com/ http://backbonejs.org/
http://twitter.github.com/bootstrap/
http://requirejs.org/
http://coffeescript.org/
http://angularjs.org/
http://emberjs.com/ http://jquery.com/
http://sass-lang.com/

6. 도구들을 사용해 개발을 시작해 볼까요?
일단 웹 서버가 필요하고, 웹 서버를 설치하고, jQuery를 다운로드 받아야 하고,
Require.js를 사용해서 모듈형태로 비동기 로딩을 하도록 구성해야 하니까 require.js를
다운로드 받아서 작업 폴더로 복사하고, MVC 패턴을 적용해야 하니까 backbone을 사용해야겠군.
그럼 다시 다운로드를 받고…
그럼 이제 기본 HTML 파일을 만들어서 작업을 시작해 볼까?
http://www.youtube.com/watch?v=_0Vkm6J6els

7. Yeoman?
http://yeoman.io/
- Released : 2012/09/10
- BSD license
Yeoman is a robust and opinionated set of tools, libraries, and a workflow that
can help developers quickly build beautiful, compelling web apps.

8. 특징
▪ 가볍고 빠른 스캐폴딩
▪ CoffeeScript & Compass 자동 컴파일 지원
▪ 스크립트 품질 검사(JSHint) 수행
▪ 프리뷰를 위한 빌트인 서버
▪ 이미지 최적화 (OptiPNG, JPEGTran)
▪ AppCache manifest 생성
▪ 패키지 매니징을 통해 다양한 외부 패키지들을 손쉽게 관리
▪ 브라우저를 사용하지 않는 WebKit 기반의 단위 테스트 수행 (PhantomJS)
▪ r.js를 통한 AMD 모듈 컴파일
▪ 빠른 프로토타입 개발
▪ DRY(Don't Repeat Yourself) - 반복적인 코드 작성을 하지 않는 것
▪ 패키지 관리 - 의존성 라이브러리 관리 및 업데이트
▪ Live reload 지원을 통한 소스 변경내역 확인

9. 설치 #1
$ curl -L get.yeoman.io | bash
참고 URL :
https://github.com/yeoman/yeoman/wiki/Manual-Install
http://decodize.com/css/installing-yeoman-front-end-development-stack-windows
지원환경 : Mac, Linux (공식적으로 윈도우 환경은 지원하지 않음)
Requirement :
▪ Command line tools for Xcode
--> Menu : Xcode > Preferences > Downloads > Components > Command Line Tools install
▪ Homebrew (http://mxcl.github.com/homebrew/)
--> ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"
OS X에 기본으로 포함되어 있지 않은 UNIX 도구들을 유연하게 설치 및 관리하게 도와주는 도구
▪ NodeJS >= 0.8.x  http://nodejs.org/download/
▪ Ruby >= 1.8.7  ruby -v로 버전 확인

10. 설치 #2
▪ Compass - CSS Authoring Framework (http://compass-style.org/)
1) gem update --system
2) gem install compass
▪ PhantomJS (http://phantomjs.org/)
--> brew update && brew install phantomjs
--> or http://phantomjs.org/download.html에서 다운로드 설치
▪ JPEGTran
--> brew install jpeg-turbo && brew link jpeg-turbo
--> or
1) curl http://www.ijg.org/files/jpegsrc.v6b.tar.gz > /tmp/libjpeg.tar.gz
2) tar -xzvf /tmp/libjpeg.tar.gz
3) cd /tmp/jpeg-6b
4) ./configure
5) sudo make install
▪ OptiPNG (http://optipng.sourceforge.net/)  brew install optipng
▪ yeoman global npm module  npm install -g yeoman

11. 명령어
명령어 설명
init 새로운 프로젝트를 생성하거나, 템플릿 생성자를 통한 스캐폴드 코드 생성
build 최적화된 서비스 배포 버전의 프로젝트 생성
server 프리뷰를 할수 있는 서버 실행
test 커맨드 라인에서 Mocha 테스트를 수행
install 패키지 설치
uninstall 패키지 제거
update 최신 버전의 패키지로 업데이트
list 설치된 패키지 목록 출력
search 레지스트리에서 패키지 검색
lookup 특정 패키지를 검색

12. 사용방법
프로젝트를 시작할 폴더로 이동해 ‘yeoman init’ 명령어로 프로젝트 생성
$ mkdir 폴더명 && cd 폴더명
$ yeoman init
# for backbone project and generator
$ yeoman init backbone
$ yeoman init backbone:model testModel
$ yeoman init backbone:view testView

13. 기본 프로젝트 구조
/app : 프로젝트 파일
/test : 테스트 관련 파일
/dist : yeoman build를 통해 생성된 배포 버전 파일
(build 명령을 통해 생성)
Gruntfile.js :
빌드 및 프로젝트 전반에 사용되는 각종 환경설정 파일

14. 서버실행
프리뷰 서버 실행
$yeoman server

15. 빌드
$yeoman build
* dist 폴더에 빌드된 파일이 생성
▪ 모든 JavaScript 파일은 JSHint로 체크됨
▪ CoffeeScript와 SASS 파일은 서비스를 위해 컴파일됨
▪ AMD 모듈은 r.js를 통해 컴파일되거나 최적화됨
▪ 스크립트 파일과 스타일시트 파일들은 병합 및 최소화(minification) 처리됨
▪ PNG는 OptiPNG, JPG는 JPEGtrans-turbo를 통해 압축됨
▪ PhantomJS를 통한 WebKit 브라우저의 단위테스트 실행
▪ Confess.js를 통한 Application Cache manifest 생성
▪ 파일명에 리비전 적용

16. 고맙습니다.
http://www.flickr.com/photos/hollyladd/4513146360/sizes/o/in/photostream/