Yeoman으로 AngularJS 프로젝트 구성하기

WebApp을 개발하기 시작하면 수작업으로 프로젝트 구성, 빌드 및 배포 환경 구성, 테스트 환경 구성 등을 하나하나 직접 만들어 주어야 한다. 또한 프로젝트에 필요한 라이브러리가 있다면 해당 라이브러리 배포 사이트에서 직접 다운 받아서 소스에 코딩해 주어야만 한다. 이 글에서는 이런 일련의 작업들을 편하게 구성할 수 있는 Yeoman에 대해서 알아보고, 직접 Yeoman을 사용해서 프로젝트를 구성하는 방법에 대해서 알아 본다.

Yeoman은 개발자가 직접 처리하는 일명 노가다 작업을 간단히 몇 줄의 명령만으로 알아서 척척 진행해 준다. 참 고마운 놈이다^^. 폴더를 직접 만들어 주기도 하고, 라이브러리를 웹에서 찾아서 직접 다운로드 해준다. 더불어 소스 코드에도 다운 받은 lib의 정보를 추가해 준다. 즉 Yeoman은 스케폴딩이라는 프로젝트의 뼈대를 알아서 잡아 주는 역할을 한다. 또한 라이브러리의 의존성을 관리 해주고, 테스트를 쉽게 할 수 있도록 지원하며, 빌드를 자동화 시켜 준다.

처음 AngularJS로 프로젝트를 진행할 때 프로젝트 구성 및 폴더 구조를 어떻게 잡아야 할까를 많이 고심하게 되는데, 이 글에서 소개하는 방식으로 설정을 잡고, 설치된 폴더의 구조를 분석 해보면 어떻게 프로젝트 구조를 가져가야 할지 감을 잡을 수 있을 것이다.

위에서 간략하게 설명한 역할을 수행하기 위해서 Yeoman이 스스로 모든 일들을 처리하는 것은 아니다. Yeoman 사이트에서 가져온 아래 이미지처럼 3개의 라이브러리가 각각의 역할을 담당하고 있다.

yeoman은 webapp을 만들 때, 뼈대 및 발판 역할을 담당하고, bower은 라이브러리 설치 및 의존성을 관리해 주며, grunt는 미리보기, 테스트, 빌드를 담당해서 전체적으로 프로젝트를 구성하고 빌드하기 까지의 프로젝트 생명주기를 관리한다.

이제 아래 순서에 따라서 AngularJS 프로젝트를 구성하고, 확인해 보도록 하겠다.

1. node.js, git 설치

yo, bower, grunt를 설치하기 위해서는 node.js를 설치해서 npm(Node Package Manager)이 사용 가능해야 하며, git을 사용하는 경우를 위해서 git도 받아서 설치해 준다. 아래 사이트에서 다운 받아서 기본으로 설치해 주면 된다. 참고로 git은 시스템 환경 설정에서 Path를 잡아 주도록 한다.
- node.js (http://nodejs.org/)
- git (http://git-scm.com/)

2. Yeoman, Bower, Grunt 설치

설치는 간단하다 아래의 명령어를 순서대로 실행한다.

npm install -g yo
npm install -g bower
npm install -g grunt-cli

3. angular generator 설치

yeoman을 이용해서 angular 프로젝트 구성을 하려면, angular generator가 먼저 설치되어 있어야 한다. 아래 명령어를 실행한다.

npm install -g generator-angular

4. Project 생성

- 원하는 위치에 프로젝트 폴더를 만들고, 해당 폴더로 이동한다.
- 프로젝트명을 아래와 같이 입력한다.

yo angular first  : first라는 프로젝트 생성
     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? n
[?] Would you like to include Twitter Bootstrap? y
[?] Which modules would you like to include? (Press to select)
 ⬢ angular-resource.js
 ⬢ angular-cookies.js
 ⬢ angular-sanitize.js
 ⬢ angular-route.js

5. 프로젝트 폴더 확인

- app 폴더 하위에 필요한 파일들을 생성시켜서 프로젝트를 진행하면 된다.

- test 폴더에 테스트할 파일과 설정을 하고 테스트를 진행하면 된다.

6. Grunt를 이용해서 확인하기

grunt test : 테스트
grunt build : 빌드
grunt serve : 프리뷰

마지막 명령어를 실행해서 아래처럼 화면이 출력되면 최종 설정이 완료된 것이다.

이제부터는 이렇게 구성된 프로젝트를 이용해서 controller를 추가하고, directive를 정의하고, view를 추가해 가면서 프로젝트를 풍성하게 만들어 가면 되겠다. 이렇게 프로젝트를 구성해 보았지만 사실 아직 갈 길이 멀고도 멀다. 여기에 간략하게 풀어놓은 각각의 도구들을 잘 활용할 수 있도록 계속 연습하고 학습해서 익혀야 하고, 또한 AngularJS도 자유자재로 다룰 수 있도록 많은 학습이 필요하다.