빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,009 views

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

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

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

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

Statistics

Views

Total Views
1,009
Views on SlideShare
1,008
Embed Views
1

Actions

Likes
6
Downloads
6
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 빠른 프로토타이핑을 위한 웹앱 자동화 툴 (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, 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)
  • Yeoman 설치
  • 다시 돌아가서.. Yeoman으로 Angular.js 기반 프로젝트를 구성해보자. 간단하죠?
  • Angular.js 프로젝트를 관리하자! 패키지 추가, 테스트, 서버 구동 및 build
  • 더 쉽게? UI 기반 인터페이스 제공
  • 따라해보기
  • 감사합니다