프론트엔드 웹 개발을 위한 자동화 관리 툴: Yeoman, Grunt, Bower

이미지 출처: http://yeoman.io/learning

최근에 개인적인 스터디 그룹 프로젝트에 Grunt와 Bower를 적용 해봤는데 정말 재밌었고, 나름대로 상당히 만족을 하고 있다.

잘 배워두고 자주 사용하면 기본적인 구조를 잡는 것부터 각종 라이브러리 설치와 의존성 관리, 그리고 각종 빈번한 작업들(소스 코드 합치기, 압축 등등)을 편리하게 수행하고 관리 할 수 있을 것 같다.

이번 포스팅은 Grunt, Bower와 더불어 Yeoman에 대한 간단한 소개와 참고 링크 정도를 남겨 본다.

Grunt

• 자바스크립트 프로젝트를 위한 테스크 기반의 커맨드 라인 빌드 툴
• 테스크(task)란 무엇인가?
  작업의 단위라고 생각하면 되겠다.
  js, css, html 같은 static 파일들을 하나로 합치고(concat) 압축을 해서 파일 사이즈를 줄이는(minification) 작업들, 테스트, 배포 등등을 각각 하나의 테스크라고 생각하면 쉽다.
  Grunt는 이런 빈번한 작업들을 사용자가 미리 정의해 놓은대로(Gruntfile.js) 자동으로 빌드해주는 툴이다.
  
• Node.js로 만들어져 있다. 따라서 Node.js가 설치 되어 있어야 하고, npm에 등록 되어 있으며 global로 설치 한다.

Bower

• 프론트엔드 컴포넌트 의존성 관리 툴 이다. 쉽게 말해 위에서 Grunt를 설치하기 위해 사용한 npm과 비슷한 것이다.
• 예를 들어, 새로운 프로젝트를 시작하거나 진행하던 프로젝트에 bootstrap3을 설치한다고 했을때 bootstrap 웹사이트에 가서 소스코드를 다운 받고, 프로젝트의 적당한 디렉토리에 복사할 것이다.
  하지만 이미 설치 되어 있는 jquery 버전과 bootstrap에 포함된 jquery 버전과 차이에 의한 의존성 관계가 문제 될 수도 있다.
• bower는 이런 상황에서 각종 컴포넌트들의 설치도 간편하게 해주겠지만, 의존성 부분도 말끔하게 관리해준다.

Yeoman

• 일단은 스캐폴딩 기능만 사용해 봤기 때문에 웹 어플리케이션의 기본 구조를 쉽고, 편하게 잡아줄 수 있는 도구로 생각하고 있다.
• Generator 라는 것을 이용해서 개발하려는 프로젝트 종류(webapp, bootstrap, angularjs 등등)에 따라 기본적인 구조를 알아서 잡아준다.
• 내부적으로 Grunt, Bower를 사용하고 있다.

설치와 사용법 참고 사이트

• Grunt
• [번역]Grunt 공식 사이트, http://gruntjs-kr.herokuapp.com
• 자바스크립트 빌드 도구 Grunt, http://blog.outsider.ne.kr/892
• Bower
• Bower 공식 사이트, http://bower.io
• bower:웹 프론트앤드 패키지 관리자, http://blog.outsider.ne.kr/933
• Yeoman
• Yeoman 공식 사이트, http://yeoman.io

스터디 그룹 프로젝트에 적용해 보면서 생각 한건데 Python Flask 웹앱을 스캐폴딩 해주는 Yeoman Generator가 있었으면 좋겠다는 생각이 들었다.

그랬는데 역시나 있었다. github에서 2개 정도 찾았는데 한개는 angularjs와 flask 조합 제너레이터(generator-angular-flask) 이고, 나머지 하나(flask-app-generator)는 package.json 도 없고, 기타 등등 없는게 많은지 제대로 동작을 안한다.

바로 python virtual 환경 세팅(virtualenv)랑 flask 설치, 그리고 테스트 웹서버 실행까지 Grunt랑 조합해서 가능할 것 같은 생각이 드는데...

간단하게 하나 만들어 봐야겠다.

Read More