Yeoman(모던웹 개발을 위한 관리도구)
최근 프론트쪽을 개발을 하다보면 흔히 볼 수 있는 도구중 하나가 Yeoman이다. Yeoman의 목적은 위의 이미지에 적힌 문구와 동일하다. 현대적인 웹앱을 위한 Scaffolding Tool이다.
Yeoman은 노드위에서 동작하며 3가지 도구(Yo, bower, grunt)를 합쳐 놓은 도구이다.
간략히 설명하자면 Yo는 프론트의 기본 개발구조를 잡아주는 도구이다. angular로 개발하고 싶으면 angular제너레이터를 설치하면 된다. 제너레이터를 설치하면 애플리케이션의 초기 골격을 만들어 준다.
bower는 의존성 라이브러리를 원격으로부터 내려받고 index.html에 자동으로 설정해준다.
grunt는 프론트의 Assets(html, css, js)의 테스트/통합/압축 등 빌드 배포 작업을 수행하는 도구이다. 요즘은 gulp가 대세이다. 무슨 차이가 있을까 검색해 보았지만 기능이 거의 동일하다. 문법이 깔끔해졌다와 같은 조금의 변화는 있지만 사용해본 사람들의 글을 읽어보면 큰차이가 없다는 입장이 가장 많다. 앵귤러의 빌드도구로 사용해서인지 gulp의 인지도가 상당히 높고 많이 사용하고 있다고 한다. 필자역시 gulp만 사용해 보았다.
간단한 테스트만 해 보겠다.
순서는 yo를 설치하고 generator-angular설치, 프로젝트 생성순이다.
npm install -g yo
npm install -g generator-angular
yo angular appName (프로젝트 생성, 몇가지 질문에 답을 하면 그에 맞게 프로젝트가 생성된다.)
위의 명령어 3줄이면 프론트의 앵귤러 기본 셋팅이 끝나다. 정말 편리한 도구이다.
설치중 generator-karma가 없다고 하면 generator-karma도 설치 해 줘야 한다.
npm install -g generator-karma
정상적인 명령어가 입력이 되었으면 관련 라이브러리들을 가져오기 시작할 것이고 시간이 조금 걸릴 것이다.
위와 같이 프로젝트가 생성되었으면 정상적으로 실행된 것이다.
프로젝트 구조에 관해서 간략히 설명하면
app : Assets이 존재한다. SPA의 대부분의 파일이 존재하는 폴더다.
node_modules : package.json에 명시된 라이브러리가 위치한다. 워낙 용량이 크기 때문에 버전관리에 포함시키지 말아야 한다. package.json만 관리하고 개별적으로 받는다.
test : karma는 프론트의 단위테스트 프레임워크인데 실제 사용해보질 않았다. 프론트의 테스트는 언젠가 한 번 다뤄보고 싶다.
요즘은 프로젝트를 하나 구축하기 위해서 사용해야 할 라이브러리들이 너무 많다. 이것들을 수작업으로 한다면 너무나 오랜 시간이 걸리기 때문에 yeoman과 같은 도구들이 생긴것이다. 우린 이 도구들을 이용해서 생산성을 훨씬 높일 수 있을 뿐만 아니라 보편적으로 사용하는 프로젝트 구조까지 알 수 있으니 일석 이조다!
이번에는 yo를 이용한 프론트 구축을 했지만 yo에서 지원하는 제너레이터는 많고 서버까지 구조를 셋팅해주는 제너레이터도 있다. 적절한 제너레이터를 이용해서 빠르게 개발환경을 구축해보자.
bower와 gulp관련해서는 별도의 포스팅을 할 예정이다.