'grunt'에 해당되는 글 1건

  1. 2014.08.20 Webapp, AngularJS 개발 환경 셋업 (node.js, yeoman)

Webapp, AngularJS 개발 환경 셋업 (node.js, yeoman)

2014. 8. 20. 18:04 from Dev

항상 프로젝트 처음 시작할 때면 가벼운 마음(?)으로 깨끗한 환경을 만들고 하게 됩니다. 옛날에는 그냥 했던 건데, 요새는 dependency도 그렇고 이것저것 고려해야 할 것들이 많지요. -_-;;

저 같은 경우도 몇번씩 새로 개발 환경을 셋업하다 보니 한번에 정리를 해 놓는게 나을 것 같기도 하고, 다른 개발자 분들도 단순 과정을 반복할 때 이 포스팅 보시고 생각없이 따라만 하면 될 수 있도록 정리를 해볼까 합니다.


 아, 그리고 git은 기본적으로 설치되어 있어야 합니다. ^^;;


1. node.js 설치

먼저 node.js를 설치해주어야 합니다. 다음 과정들에서 npm을 많이 이용하게 되기 때문이지요.

node.js를 방문하셔서 INSTALL하시면 됩니다. 


2. yo, grunt 설치

그 다음에는 yeoman의 툴 중에 yo를 먼저 설치합니다. 


npm install -g yo


-g 옵션은 globally 의미이구요, 위와 같이 하면 grunt, bower까지 한번에 설치가 됩니다. 

bower는 package manager라고 보시면 됩니다. 




3. webapp 개발 환경 셋업

이제 한번 webapp 개발 환경을 만들어 보겠습니다. 
webapp 개발시 많이 쓰이는 환경은 jQuery, Modernizr, Bootstrap 같은 것들이 있지요. 먼저,


npm search yeoman-generator


하면 이용가능한 generator들이 나옵니다. 처음 실행하시면 시간이 많이 먹히니 안 궁금하면 그냥 패스합니다.

그럼,


npm install -g generator-webapp


하고 기다리면 설치가 완료됩니다. 그 다음에 프로젝트 폴더를 만들고 그 폴더로 간 후에,


yo webapp




이제 그림처럼 필요한 요소를 정해주고 나면 커피 한잔 마시면서 뭐가 설치되고 있는지 느긋하게 보면 됩니다.

다 설치된 후에는 프로젝트 폴더의 app/ 폴더에 index.html이 있습니다.

이 화면이 나오면 정상적으로 설치된 것입니다.



혹시 이 화면이 정상적으로 나오지 않는다면 일부 요소들이 설치되지 않은 것이니, 에러 메시지가 있었는지 잘 살펴보시고요, 제일 많은 경우는 git이 설치되지 않았거나, 설치되었어도 PATH에 안 걸려있는 경우입니다. 


그럼, 다음에는 angularJS로 한번 가보도록 하겠습니다. ^^

'Dev' 카테고리의 다른 글

laravel + mongodb 개발  (0) 2015.02.05
[IONICBOX] IONIC에서 공개한 하이브리드앱 hybrid app 개발 framework  (2) 2014.09.20
[mysql] Stored Procedure (1)  (0) 2012.04.09
twitter test  (0) 2012.03.30
Posted by banasun :