웹어플리케이션개발도구 Yeoman 공개 SW 개발자 Lab 오픈소스프론티어 2 기문현경

웹어플리케이션개발도구 Yeoman 공개 SW 개발자 Lab 오픈소스프론티어 2 기문현경

웹어플리케이션을빠르게개발할수있고, 검증된기술스택으로이루어진프로젝트생성을 통해서최신웹기술을빠르게사용할수있도록도와주는 Yeoman 에대해서소개한다. Yeoman 의역사와개발동기를먼저살펴보면서왜 Yeoman 의개발이시작되었고어떻게많은개발도구들을지원하게되었는지, 오픈소스커뮤니티에어떻게공헌했는지알아본다. 그다음 Yeoman 의구조에대해간략히알아보면서 Yeoman 의대표적인제너레이터 2 가지사례를통해실제로어떻게활용하는지단계적으로설명한다. 실제명령등으로프로젝트생성, 프로젝트및라이브러리설치, 빌드도구를통해서생성된 웹어플리케이션개발, 디버깅과프로덕션에사용할수있는최적화된과정을알아보자. [ 목차 ] - Yeoman - Yeoman 의구조 - Yeoman 사용 - yo - bower - gulp/grunt - 추가명령들 - Yeoman 의미래

Yeoman [ 그림 1-1-1] Yeoman 로고 Yeoman 은 Node.js 기반으로구현되었으며, 빠르고강력하며검증된기술스택으로구성된웹프로젝트를생성하도록도와주는도구이다. 2012 년 Google I/O 에서구글크롬의에반젤리스트인 Paul Irish 에의해서소개된이후재능있는많은웹어플리케이션개발자들의공헌으로널리사용되고있는도구다. Yeoman 은구글을포함한관련커뮤니티의개발자들이모여시작한프로젝트다. Yeoman 의코어팀은 jquery 와 HTML5 Boilerplate 등으로알려진개발자들과구글의크롬팀지지자들로이루어져있다. 이멤버들은모두선도적기술을사용하며적절한사용방법 ( 워크플로우 ) 을선정해알리는것에능숙하다. 멤버들은 Yeoman 에서사용된공개 SW 프로젝트또는유망한공개 SW 프로젝트들을발굴하거나, 해당도구의프로젝트들에도역시기여를하고있으며여러채널을통해서알리고있다. 시대적으로그리고웹어플리케이션개발특성상현재웹프론트엔드개발은기존의특정벤더나플랫폼에종속되어정해진학습을통해서개발하는것과달리다양한기술과각기다른사용법과구조를가지고있다. 그에따라여러가지웹프레임워크와도구들이각자의개성에맞게사용되고있다. 하지만다양한개발방법과개발과정이존재하는만큼초급자나새로운프레임워크나도구를사용해보고자하는개발자들에게는정리되지않는개발과정은진입장벽을어렵게했다. 특히어느기술이자신의프로젝트에적합한지여부를검토하거나, 최적의개발과정을진행하기위해서는많은시간을투자할수밖에없다. 이런문제를해결하고자하는문제의식에서출발한도구가 Yeoman 이다.

[ 그림 1-1-2] Yeoman 에서지원하는라이브러리와플랫폼들 Yeoman 은이미널리사용되고있는웹프레임워크나빌드도구그리고최적화도구를이용해서프로젝트를빠르게개발할수있다. 각기술들을가장잘사용할수있는베스트프랙티스 (Best Practices) 와도구를제공하여개발자의생산성을향상시킬수있다. Yeoman 오픈소스의개발자들은지속적으로개발되고있는여러가지개발도구들을점검하고그도구들의장단점을평가한다. 참여한개발자들과열려진공간에서지속적인발전을위해서각개발도구들의장단점을이야기하여적합한개발방법시나리오와적용여부를결정한다. 그뿐만아니라, 대상이되는개발도구의개발자들과도커뮤니케이션을하면서필요한기능을추가하거나도움이될만한기능을제안해서좀더많은개발자들이혜택을볼수있도록생태계를조성해나가고있다. 예를들면 Yeoman 개발과정중에생긴다양한결과물을공개 SW 화해서다른 Node.js 공개 SW 생태계에영향을끼친프로젝트이다. 대표적인예로 Yeoman 에서사용되는도구인 Grunt 에사용되는코어와커뮤니티플러그인등을만들거나기여하고있으며, 프론트엔드패키지인 Bower 와, 새로운테스크매니저인 Gulp 등을 Yeoman 프로젝트에사용하여프로젝트개선에도움을주고있다. Yeoman 프로젝트에관련되어개발되거나파생된공개 SW 프로젝트는수백개이상이될정도로프론트엔드도구개발에많은영향을주고있다.

[ 그림 1-1-3] Yeoman NPM 패키지일별다운로드 Yeoman 은 npm 을통해서배포되고있으며약 3 년동안 Yeoman 제네레이터와 CLI(Command Line Interface) 도구인 yo 는합쳐서현재약천만건정도의다운로드숫자를보여주고있다 Yeoman 의구조웹어플리케이션개발과정은아주다양한요구사항을가지고있다. 기존의플랫폼과프레임워크에의존적인 IDE 를사용하는것과달리개발자의재량에따라다양한개발과정이있다. 이런다양한요구를수용하기위해서 Yeoman 은조금복잡한구조를가진다. Yeoman 코어에설치된 Yeoman 제너레이터 ( 생성기, Generator) 를통해서 Yeoman 워크플로우 (Workflow) 를만들어사용한다. 먼저제너레이터라는도구에대해알아보자. 제너레이터는이름그대로프로젝트를생성시키는도구이다. 사용할웹프레임워크와개발환경에따라준비된프로젝트를생성할수있다. 생성되는프로젝트는웹프레임워크를가장잘사용할수있도록준비되어있으며 Yeoman 팀에서선정한도구와개발프로세스를사용할수있도록구성된다. 선정된도구에는자체적으로개발된플러그인과여러커뮤니티에서개발된도구를조합하여개발자들이손쉽게개발할수있도록도와주고있다. 제너레이터는 Yeoman 팀에서관리하는오피셜제너레이터와외부개발자들이개발해서배포하는커뮤니티제너레이터가있다. 현재에도끊임없이개선되고여러개발자들의기여를통해서향상된다. 제너레이터로워크플로우를가진프로젝트를생성하는것을스캐폴딩 (Scaffolding) 이라고한다. 이러한컨셉은 Ruby-on-Rails 프로젝트에서사용된기술이다. 다음은정식으로관리되는대표적인제너레이터이다. - Google Web Starter Kit : 구글에서배포하는최신웹기술을반영한스타터킷

- Google Polymer Starter Kit : 구글에서배포하는 Polymer 를위한스타터킷 - Webapp generator : Yeoman 팀에서관리하는최신웹기술을반영한스타터킷으로사용된기술들은가장기본적인웹어플리케이션을개발할수있는프로젝트파일들을생성시켜준다. - Angularjs generator: Angularjs 를손쉽게개발할수있는제너레이터. Angularjs 에서사용되는기술과프로젝트구성을제공한다. - node generator: node 패키지를개발할수있는제너레이터 - Chrome extension/apps generator: 크롬앱과익스텐션의개발에필요한프로젝트파일을생성해주는제너레이터 이외에도현재 4,000 개이상의커뮤니티제너레이터가만들어져서배포되고있다. [ 그림 1-2-1] Yeoman 커뮤니티제너레이터 다음워크플로우는유용한도구들와프레임워크들을사용해서 Yeoman 방식 (Opinionated) 으로구축한클라이언트스택 (Client-side stack) 을가진다. 이워크플로우는개발자들이장애물없이모든것이자동으로구축되고, 멋진웹어플리케이션을빠르게만들수있도록도와준다. 워크플로우는특정기술, 웹프레임워크 / 라이브러리를사용함에있어서가장좋다고생각되는베스트-프랙티스를연구해서제너레이터를통해서제공한다. 제너레이터에서생성된설정파일들을통해서 bower, gulp, grunt, webpack 그리고 npm 같은패키지 / 디펜던시매니저와빌드도구를사용할수있다.

[ 그림 1-2-2] Yeoman 워크플로우 Yeoman 팀에서는베스트-프랙티스를끊임없이연구하고워크플로우를개선하기위해서필요한도구들을계속만들어내고있다. 사용자들의피드백을지속적으로받아서반영하고해당기술의새로운버전을발빠르게지원한다. 대표적인워크플로우에는이미지옵티마이저, uglify, minify 를포함하는빌드과정그리고 live-reload, browser-sync 를활용한프리뷰과정이다. Yeoman 에서정립한워크플로우는이후여러비슷한개발도구에도영향을끼치고있다. [ 그림 1-2-3] Yeoman 동작화면

마지막으로 Yeoman 코어입니다. 제너레이터에서사용되는 API 와기본 CLI 도구들을가지고있으며제너레이터스 (Generators) 와 yo 가있다. 제너레이터스는위에서언급한제너레이터를만들수있는 API 를가지고있는기본프로그램이다. yo 는 Yeoman 에서만든 CLI 도구다. yo 를통해서설치된각종제너레이터를로딩하여 Yeoman 프로젝트를생성한다. Yeoman 팀은이크게세가지부분을개발, 운영하고개발자들에게새로운제너레이터를만들도록독려하고있다. 오피션제너레이터에서는활발한의견교류로좀더낳은방법을찾도록하고있으며 Yeoman 코어에서는개발자에친숙하고초심자도쉽게사용할수있는새로운제너레이터를개발할수있도록다양한 API 를지속적으로개발하고있다. Yeoman 사용 Yeoman 워크플로우는웹어플리케이션개발성향상과최적화된웹어플리케이션을빌드하기 위해서아래와같은세가지도구를사용하고있다. [ 그림 1-3-1] Yeoman 동작과정 - yo: 스캐폴딩툴 (Scaffolding, 개발에필요한기반환경 ) 이다. 새로운어플리케이션개발에필요한파일을생성한다. Grunt 나 Gulp 같은빌드시스템에서사용되는환경설정파일하고필요한플러그인을설치한다. 그리고선정된 Bower 패키지 ( 프레임워크, 라이브러리 ) 를사용할수있도록준비하고디렉토리등프로젝트에관련된기타사항을모두구축한다.

- Build System: 빌드시스템을이용해서웹어플리케이션을빌드하고프리뷰그리고테스트를가능하도록도와주는툴이며 Grunt/Gulp 를사용한다. - Package Manager: 패키지매니저는워크플로우에서사용되는프레임워크와라이브러리패키지들의의존성을관리해준다. 개발자는더이상수동으로스크립트파일들을관리할필요가없다. npm/bower 가사용된다. 위세개의도구들은각자개발되고관리되지만 Yeoman 에서는이도구들을잘사용해서좋은 워크플로우를개발할수있도록개발되고있다. yo yo 는 Yeoman 에서관리는툴이다. 제너레이터와프로젝트템플릿을이용해서프로젝트기반환경을구축한다. 템플릿에는개발에사용되는도구들에대한설정과기본적으로필요해서매번생성해야하는 (Boilerplate) 파일이나리소스를정해진디렉토리구조에맞게복사하거나생성한다. yo 는설치된제너레이터를통해서웹어플리케이션을스캐폴딩한다. 따라서원하는웹어플리케이션을 Yeoman 을통해서사용하시려면별도의제너레이터설치가필요하다. 이문서에서는대표적인오피셜제너레이터이면서가장기본적인웹어플리케이션을만들수있는 generator-webapp 과 Angularjs 를사용할수있는 generator-angular 의사용법에대해서알아보겠다. yo 설치하기 먼저 yo 는 Nodejs 기반의도구다. 반드시최신버전의 Nodejs 를설치해야한다. 설치는 npm 을 통해서아래와같이설치한다. npm install -g yo 만약 npm 1.2.10 이상을사용하면 grunt, bower 는자동으로설치가될것이다. 아니라면아래 명령으로툴을설치한다.

yo webapp npm install -g grunt-cli bower Basic scaffolding, 기본웹앱프로젝트스캐폴딩하기 yo 의설치가끝났으면가장기본이되는웹앱프로젝트를위한제네레이터를설치해보겠다. 이름은 generator-webapp 이다. 역시 npm 을통해서아래와같이설치한다. npm install -g generator-webapp 이것은 Yeoman 에서제공하는가장기본적인형태의웹앱프로젝트이다. 이프로젝트는커뮤니티에서제안하는 HTML5 Boilerplate, jquery, Modernizr, 그리고 Bootstrap 을포함하고있으며사용하는개발자는설치옵션을통해서사용 / 미사용을선택할수있다. 제너레이터를설치한후아래처럼디렉토리를생성한다. mkdir my-yo-project cd my-yo-project 그다음 yo 를이용해서프로젝트를생성한다. 설치과정에서개발과정에서사용될 Grunt task 를다운로드한다. generator-webapp 은가장심플하면서필요한요소들가진웹앱프로젝트를생성한다. 그외에도 Yeoman 에서는여러프레임워크를지원하는제너레이터가있다. 각제너레이터는프로젝트에사용되는 View, Models, Controller 와같은것도스캐폴딩할수있다. 다음에서설명할 generator-angular 를통해서더자세하게알아보자.

AngularJS 웹앱스캐폴딩하기 다음은 AngularJS 를지원하는제너레이터를사용보자. 새로운제너레이터를사용하기위해서는 반드시먼저 npm 을통해서설치해야한다. npm install -g generator-angular 그다음역시프로젝트를위해서새로운디렉토리를만들고아래명령을실행시킨다. yo angular 제공되는여러제너레이터는웹앱프로젝트를위해서설치옵션 (flag) 를제공한다. generatorangular 를예를들면아래와같이사용가능하다. yo angular --minsafe 위의명령을사용하면가장많이사용되는디렉토리구조에 AngularJS 의지시자 (directives) 와컨트롤러 (conrollers) 코드를가진파일로웹프로젝트를생성시켜준다. 생성된 AngularJS 웹앱프로젝트에지시자나컨트롤러가아래명령으로추가가능합니다. 프로젝트진행중에언제든지사용가능하다. yo angular:controller mycontroller yo angular:directive mydirective yo angular:filter myfilter yo angular:service myservice 각웹프레임워크의특징별로위와같은기능이제공될수있으며이를서브 - 제너레이터 (subgenerator) 라고부른다.

Bower Bower 는웹앱프로젝트에서의존하고있는자바스크립트, 이미지그리고 CSS 라이브러리를효과적으로관리할수있는패키지매니저이다. 웹에서사용하는패키지를 Bower 를통해서관리해보겠다. # 검색 bower search <dep> # 설치 bower install <dep>..<depn> # 설치된패키지리스트. bower list # 패키지업데이트 bower update <dep> yo 로생성된프로젝트와 Bower 를사용해보자. 먼저기본웹앱프로젝트를생성하고 jquery 플러그인을추가해본다. Gulp / Grunt Gulp / Grunt 는테스크 (task) 기반의자바스크립트프로젝트를위한코맨드라인툴이다. 현재는 공식적으로는 Gulp 를주로프로젝트빌드시스템으로사용된다. yo 에서생성한웹앱

프로젝트에서는 Yeoman 팀에서개발된여러 Gulp 테스크를통해서프로젝트를빌드한다. 대표적인 Gulp 명령을살펴보자. # 내장웹서버제공과변경사항을추적하여프리뷰제공. gulp serve # 유닛테스트 gulp test # 프로덕트버전빌드 gulp # 새로운웹앱프로젝트를생성합니다. yo webapp # `jquery-pjax` 를검색해봅니다. bower search jquery-pjax # 찾은플러그인을 bower.json 이라는설정파일에저장하도록설치해보겠습니다. bower install jquery-pjax --save # 다음 ( 만약 RequireJS 사용하지않는경우 ) 아래 gulp 명령을사용하면설치된패키지들이자동으로 `index.html` 에추가됩니다. 모든제네레이터가 bower install 기능을지원하지않을수있습니다. 만약관련된내용을더알고싶다면다 gulp 태스크 (task) 를찾아보세요. gulp wiredep 추가명령들 Yeoman 은다양한환경, 다양한도구들을사용해서동작하기때문에초기에여러가지설치 / 실행문제들이있다. 그래서자체적으로 doctor 기능을추가했다. 다음명령을사용한다면현재여러분의시스템에서 Yeoman 을사용할수있는환경에대해서검사를수행한다. yo doctor

Yeoman 의미래 Yeoman 은현재도활발히개발되는프로젝트다. 여전히웹어플리케이션개발을위해서새롭고다양한도구들이개발되고개발효율을높여주는프레임워크와라이브러리들이개발되고있다. 대표적인예로 React, Webpack 이나 Electron 을지원하는제너레이터를들수있다. 이런추세에발맞춰 Yeoman 도새로운제너레이터를추가하거나 Node.js 의버전업에맞추어퍼포먼스개선을포함한새로운버전의 Yeoman core 를지속적으로업데이트및릴리즈하고있다. 더욱이 Yeoman 프로젝트는공개 SW 로여러가지기능이분리되어개발되고인터페이스를통해서동작하기때문에공개 SW 를처음시작하는개발자에게적합한프로젝트다. 새로운제너레이터를만들어보거나, 사용되는플러그인을업데이트, 또는버그를수정하거나 Yeoman 코어에중요한기능을추가할수있다.