빠른 프로토타이핑을 위한 웹앱 자동화 툴

(http://yeoman.io)

전 정호

초기 구성은 언제나 그렇듯 ...

Angular.js 기반 프로젝트를 구성해본다면 ..jQuery 등 의존성 있는 라이브러리를

다운로드 받아 js 폴더에 위치하고 , css 호환성 체크해 집어넣고 HTML 에 연동하고

테스트 코드 작성하고 minify 하고 ..요게 바로 노가다 !

이제 노가다는 그만 ~

쉽고 빠르게 개발 환경을 만들어보자 !

명령어 몇 번으로 개발 환경 세팅 OK!

YEOMAN 의 구성

YO(https://github.com/yeoman/yo)

새로운 개발 환경을 스케폴딩

개발환경 설정을 책임

스케폴딩이란 ?

건축 용어로 말하면 ‘비계’

‘ 건축공사 때에 높은 곳에서 일할 수

있도록 설치하는 임시 가설물’개발환경의 큰 틀을 잡아줌

Grunt(http://gruntjs.com)

자바스크립트 태스크 러너

빌드 , 미리보기 , 단위 테스트를 담당

Apache Ant 와 유사

BOWER(http://bower.io)

프론트엔드 웹 패키지 매니져스크립트 라이브러리의 버전

관리Apache Maven 과 유사

Work Process

개발 세팅은 나에게 맡겨줘 !

빠른 프로젝트 템플릿 구성Built-in 서버를 이용한 라이브 코딩

이미지 최적화Front-end dependency 관리

CoffeeScript 및 Compass 자동 컴파일

코드 정적검사 및 유닛 테스트빌드 및 배포

원하는 개발환경을 골라서 쓰자 !

ex> node.js, Angu-lar.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)

Yeoman 설치

다시 돌아가서 ..Yeoman 으로 Angular.js 기반

프로젝트를 구성해보자 .

간단하죠 ?

Angular.js 프로젝트를 관리하자 !

패키지 추가 , 테스트 , 서버 구동 및 build

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

따라해보기

감사합니다