Successfully reported this slideshow.

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

1,997 views

Published on

쉽고 빠른 웹앱 프로토타이핑을 진행할 수 있게 도와주는 툴입니다.

node.js 기반으로 주요 기능으로는 아래와 같습니다.

* 스케폴딩으로 인한 빠른 프로젝트 템플릿 구성
* LiveReload를 이용한 라이브 코딩
* 이미지 optimization
* Compass, CoffeeScript 자동 컴파일링
* JS 라이브러리의 의존성 체크 및 업데이트 관리
* 정적검사 및 유닛 테스트
* JS/CSS merge 및 minimize 그리고 dist 배포

Published in: Technology
  • Be the first to comment

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

  1. 1. 빠른 프로토타이핑을 위한 웹앱 자동화 툴 (http://yeoman.io) 전 정호
  2. 2. 초기 구성은 언제나 그렇듯... Angular.js 기반 프로젝트를 구성해본다면.. jQuery 등 의존성 있는 라이브러리를 다운로드 받아 js 폴더에 위치하고, css 호환성 체크해 집어넣고 HTML에 연동하고 테스트 코드 작성하고 minify하고.. 요게 바로 노가다!
  3. 3. 이제 노가다는 그만~ 쉽고 빠르게 개발 환경을 만들어보자! 명령어 몇 번으로 개발 환경 세팅 OK!
  4. 4. YEOMAN의 구성
  5. 5. YO (https://github.com/yeoman/yo) 새로운 개발 환경을 스케폴딩 개발환경 설정을 책임
  6. 6. 스케폴딩이란? 건축 용어로 말하면 ‘비계’ ‘건축공사 때에 높은 곳에서 일할 수 있도록 설치하는 임시 가설물’ 개발환경의 큰 틀을 잡아줌
  7. 7. Grunt (http://gruntjs.com) 자바스크립트 태스크 러너 빌드, 미리보기, 단위 테스트를 담당 Apache Ant와 유사
  8. 8. BOWER (http://bower.io) 프론트엔드 웹 패키지 매니져 스크립트 라이브러리의 버전 관리 Apache Maven과 유사
  9. 9. Work Process
  10. 10. 개발 세팅은 나에게 맡겨줘! 빠른 프로젝트 템플릿 구성 Built-in 서버를 이용한 라이브 코딩 이미지 최적화 Front-end dependency 관리 CoffeeScript 및 Compass 자동 컴파일 코드 정적검사 및 유닛 테스트 빌드 및 배포
  11. 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. 12. Yeoman 설치
  13. 13. 다시 돌아가서.. Yeoman으로 Angular.js 기반 프로젝트를 구성해보자. 간단하죠?
  14. 14. Angular.js 프로젝트를 관리하자! 패키지 추가, 테스트, 서버 구동 및 build
  15. 15. 더 쉽게? UI 기반 인터페이스 제공
  16. 16. 따라해보기
  17. 17. 감사합니다

×