쉽고 빠른 웹앱 프로토타이핑을 진행할 수 있게 도와주는 툴입니다. node.js 기반으로 주요 기능으로는 아래와 같습니다. * 스케폴딩으로 인한 빠른 프로젝트 템플릿 구성 * LiveReload를 이용한 라이브 코딩 * 이미지 optimization * Compass, CoffeeScript 자동 컴파일링 * JS 라이브러리의 의존성 체크 및 업데이트 관리 * 정적검사 및 유닛 테스트 * JS/CSS merge 및 minimize 그리고 dist 배포

1. 빠른 프로토타이핑을 위한 웹앱 자동화 툴
(http://yeoman.io)
전 정호

2. 초기 구성은 언제나 그렇듯...
Angular.js 기반 프로젝트를 구성해본다면..
jQuery 등 의존성 있는 라이브러리를 다운로드 받아 js 폴더에
위치하고, css 호환성 체크해 집어넣고 HTML에 연동하고
테스트 코드 작성하고 minify하고..
요게 바로 노가다!

3. 이제 노가다는 그만~
쉽고 빠르게 개발 환경을 만들어보자!
명령어 몇 번으로 개발 환경 세팅 OK!

4. YEOMAN의 구성

5. YO
(https://github.com/yeoman/yo)
새로운 개발 환경을 스케폴딩
개발환경 설정을 책임

6. 스케폴딩이란?
건축 용어로 말하면 ‘비계’
‘건축공사 때에 높은 곳에서 일할 수
있도록 설치하는 임시 가설물’
개발환경의 큰 틀을 잡아줌

7. Grunt
(http://gruntjs.com)
자바스크립트 태스크 러너
빌드, 미리보기, 단위 테스트를 담당
Apache Ant와 유사

8. BOWER
(http://bower.io)
프론트엔드 웹 패키지 매니져
스크립트 라이브러리의 버전 관리
Apache Maven과 유사

9. Work Process

10. 개발 세팅은 나에게 맡겨줘!
빠른 프로젝트 템플릿 구성
Built-in 서버를 이용한 라이브 코딩
이미지 최적화
Front-end dependency 관리
CoffeeScript 및 Compass 자동 컴파일
코드 정적검사 및 유닛 테스트
빌드 및 배포

11. 원하는 개발환경을 골라서 쓰자!
ex> node.js, Angular.js ,
Mobile web, BackBone,
Chrome-extension,
Mean-stack, Ember,
Mocha, Karma, PHP,
wordpress, firefox-os,
bootstrap, d3chart, YUI,
sass, spring...
오픈 소스로 3rd party 기반 yeoman generator를 제공
(http://yeoman.io/community-generators.html)

12. Yeoman 설치

13. 다시 돌아가서..
Yeoman으로 Angular.js 기반 프로젝트를 구성해보자.
간단하죠?

14. Angular.js 프로젝트를 관리하자!
패키지 추가, 테스트, 서버 구동 및 build

15. 더 쉽게?
UI 기반 인터페이스 제공

16. 따라해보기

17. 감사합니다