Grunt
Bower
Yeoman
들어가며
포스팅을 시작하기에 앞서 미리 밝혀두고 싶은 점은
세상은 넓고, 고수는 많다.
평범한 개발자로서 Angular와 NodeJS를 처음 접해보면서 느낀 점은 어렵다이다. 공부해야 할 내용도 많고, 새로운 툴도 많고, 무엇보다 큰 그림이 잘 그려지지 않았다.
고수들처럼 통찰력이 있는 포스팅을 작성하고 싶었지만, 아직 실력이 미천하여 그런 통찰력을 갖고 있지는 않은것 같다. 하지만, 세상에는 필자처럼 처음 시작하는 사람들도 있을 것이고 이들에게 이 포스팅은 도움이 되지 않을까 싶은 마음에 정리를 하고자 한다. 초보자인 필자의 관점에서 궁금했던 점과 그 궁금증을 해결하기 위한 의식의 흐름에 따라 글을 작성할 것이다. 또한, 해결방안을 찾는 과정과 결정은 지극히 개인적인 선택이였음을 미리 밝혀둔다.
Cleint, Server 분리?? 합쳐??
Angular와 NodeJS를 사용해 보기로 결정을 하고 나서 처음 들었던 생각은 Angular는 Client 브라우져에서 돌아가고, NodeJS는 Express로 REST Server로 동작할텐데, 그럼..이 두가지를 분리해서 관리해야하나? 소스관리도 따로? 같은 프로젝트인데?? 귀찮을 것 같은데..좋은 방법이 없나? 하고 검색을 하다 보니 MEAN Stack이라는 용어에 접하게 된다.
MEAN Stack
MongoDB, Express, Angular, NodeJS 이렇게 합쳐서 DB ~ Frontend 까지 fullstack으로 관리하는 것이구나~ 아 이거 좋아보이네. 그렇다면, MEAN Stack이라는 것은 위의 네가지 기술들을 모아서 사용하자라는 추상적인 개념이고, 실제로 MEAN Stack을 구현하려면 어떻게 해야 하는 것일까? 구글링을 하다보니 대략적으로 아래와 같이 압축된다.
MEAN.io
MEANJS
Yeoman 의 Generator 사용
그냥 첨부터 알아서 (고수만)
4번은 초보자에게 어울리지 않으니, 1~3번 중에서 어떤 것이 더 좋을지 고민이 되기 시작한다. 각 Starter의 장점, 단점 및 비교는 여기에서 확인 할 수 있다.
하지만, 복잡한 비교표에서 딱 와 닿지는 않는다.
MEANJS와 MEAN.io는 굉장히 유사한데, MEANJS는 Yeoman을 사용한다고 한다(참고)
그렇다면 결국, MEAN.io와 Yeoman인데, 이 둘의 차이는 Boilerplate와 Generator의 차이이다. 뒤에 등장 할 generator-angular-fullstack의 제작자인 DaftMonk의 주장에 따르면 Generator를 쓰는 것이 입맞에 맞게 고치기 더 편하다 라고 한다 (원문).
자, 그렇다면 드디어 yeoman을 사용하기로 결정하고 yeoman이 무엇인지 알아보자.
Yeoman
개념
Yeoman의 공식사이트에 들어가 보면 아래와 같이 Yeoman을 설명하고 있다.
THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS
이것은 마치 Rails에서 scafollding으로 자동으로 코드를 만들어주는 것과 유사한 기능을 제공한다는 말인 것 같다. 조금 더 자세히 알아보자.
그림에서 알 수 있듯이, yeoman은 다음 세 가지 패키지의 조합이다.
Scaffolding 기능을 수행하는 Yo
빌드, 테스트 등을 자동화를 해주는 Grunt
프론트엔드의 패키지를 관리해주는 Bower
이를 다시 말하면,
Yo를 통해 필요한 코드의 뼈대를 자동으로 생성하고
Bower를 통해 Frontend에서 사용하는 라이브러리들을 관리하고
Grunt를 통해 코드를 빌드하고, 테스트를 수행하거나 서버를 실행하는 등의 Automation이 가능하다.
주의: Yeoman은 위 세가지 툴의 조합으로서 Angular프로젝트뿐만 아니라, 다양한 상황에서 목적에 맞게 응용해 사용 할 수 있다.
설치
Yeoman은 NodeJS로 구현되어있으므로 설치는 다음과 같이 npm으로 수행한다. (-g 옵션은 글로벌로 설치한다는 의미)
npm install -g yo
추가적으로, NPM 버전이 1.2.10 이하일 경우, grunt의 커맨드라인 툴인 grunt-cli와 bower를 추가 설치한다. (1.2.10 버전 이상일 경우 자동설치되므로 수행할 필요없음)
# For npm versions < 1.2.10. npm install -g grunt-cli bower
Yeoman 의 설치는 굉장히 심플하게 완료된다. 하지만, Yeoman을 제대로 사용하려면, Generator와의 관계를 정확히 이해하고 있어야 하며 자신이 사용할 Generator는 별도로 설치하여야 한다.
Generator
yeoman에서 yo로 scaffolding을 수행하려면 자신이 생성하고자 하는 generator를 설치해야 한다. 사용할 수 있는 Generator는 yeoman 사이트에서 찾을 수 있다. 크게 공식 Generator와 커뮤니티에서 생성된 Generator로 구분 된다. 그 중에서 자신이 원하는 Generator를 설치 후 사용하면 된다.
오호~ 그림에서처럼 다양한 generator가 존재하고, 각각의 Github 시작페이지로 링크가 되어있다. 따라서, 원하는 Generator를 고르고 그 사이트로 이동해 메뉴얼에서 시키는대로 설치하면 간단하게 프로그램의 기본 뼈대가 생성된다. 간단하다~
자, 그렇다면 MEAN을 구현하기 위한 Generator는 무엇을 써야하지?? Generator를 검색하다가 MEAN을 커버하는 Generator 중에서 Star(Github에서 즐겨찾기와 유사한개념)가 가장 많은 generator가 사람들이 제일 많이 쓰는 것이겠거니..하고 아주 단순한 생각으로 결정된 generator가 generator-angular-fullstack 이다.
generator-angular-fullstack
npm install -g generator-angular-fullstack
을 통해 generator를 설치한 후,
mkdir my-new-project && cd $_
테스트 폴더를 생성하고 그 폴더로 이동한다.
yo angular-fullstack yourAppName
라는 명령을 실행하면 아래 그림과 같이 다양한 옵션에 대해 선택 할 수 있고, 옵션을 선택하고 나면 자동으로 코드를 생성하기 시작한다.
각 옵션들에 대한 간략한 설명은 다음과 같다
Client
Client 의 스크립트언어로 무엇을 사용할 것인지? — Javascript, Coffeescript
Markup은 어떤 언어로 작성할 것인지? — HTML, JADE
Stylesheet는 어떤 언어로 작성할 것인지? — CSS, SASS, Less
Angular Router는 어떤 것을 사용할 것인지? — ngRoute, ui-router
(참고: ui-router는 angular팀이 아닌 외부 개발자들이 그 필요성에 의해 ngRoute를 확장한 버전으로 State에 따른 Routing기능 등이 추가구현되어 있다 )
Server
MongoDB와 Mongoose(NodeJS에서 MongoDB를 사용하기 쉽게해주는 툴)를 사용 할 것인가?
기본적인 회원가입, 로그인, 로그아웃 만들어줄까?
Google, Facebook, Twitter oAuth로 로그인 하는 기능 포함?
Socket.io 포함 시킬 것인가?
각 기능들이나 툴들에 대해 전부 알지는 못하더라도 향후에 추가하거나 수정 할 수 있으니 자신이 아는 범위안에서 사용할 옵션들을 선택하고 나면 자동으로 코드가 생성된다. 만약, 생성도중 권한문제로 오류가 발생했다면
sudo npm install bower install
을 수행하여 관련된 라이브러리들을 설치하도록 한다.
설치가 완료되면
grunt serve
명령을 통해 서버를 실행한다. 그럼 아래와 같은 Welcome 페이지를 볼 수 있다.
기본적인 코드 구조는 아래와 같다.
├── client │ ├── app - All of our app specific components go in here │ ├── assets - Custom assets: fonts, images, etc… │ ├── components - Our reusable components, non-specific to to our app │ ├── e2e - Our protractor end to end tests │ └── server ├── api - Our apps server api ├── auth - For handling authentication with different auth strategies ├── components - Our reusable or app-wide components ├── config - Where we do the bulk of our apps configuration │ └── local.env.js - Keep our environment variables out of source control │ └── environment - Configuration specific to the node environment └── views - Server rendered views
각 폴더 구조에 들어있는 코드들이 어떻게 동작하는지는 차차 알아보기로 하고, 이제 기본적인 뼈대는 완성되었고 앞으로 추가 되는 코드들도 generator에서 제공하는 scaffolding기능을 통해 angular의 controller, directive, filter등의 코드와 테스트코드를 자동으로 생성해 줄 수 있다.
뿐만 아니라 generator-angular-fullstack은 Unit 테스트를 위해 Karma, E2E 테스트를 위해 Protractor를 Grunt를 통해 수행할 수 있도록 관련 패키지들도 기본적으로 포함하고 있다. generator-angular-fullstack 사이트에서 더욱 자세한 내용을 확인 할 수 있다.
맺음말
비록 이 예제에서 generator-angular-fullstack으로 기본 코드를 생성하였다고 하더라도 얼마든지 커스터마이징이 가능하다. 예를들어, 프론트엔드 라이브러리가 추가적으로 필요하거나 필요없을 경우 Bower를 통해 추가/삭제 할 수 있고 Automation을 변경하고 싶을 때는 Gruntfile을 수정할 수 있다. 외부 라이브러리가 추가로 필요할 때에는 언제든지 npm install로 추가 라이브러리를 설치 할 수 있다. 따라서, MEAN Stack을 시작하기에 generator-angular-fullstack은 좋은 출발점이라고 생각하며 이를 기반으로 프로젝트를 수행하다보면 충분히 자신이 원하는대로 변경해 가면서 사용할 수 있을 것이다.
댓글 없음:
댓글 쓰기