Blog

bower 설치 및 사용하기, bower-installer

March 23, 2015

bower 설치 및 사용하기, bower-installer

python, flask 를 이용해서 웹 서비스나 API를 구축하는것이 주 업무다 보니 사실 flask 는 너무 유연해서 뒷단(백엔드 부분은) uwsgi 나 mod_wsgi – apache의 조합으로 사용해 왔는데, 앞단(프론트 엔드)을 어떻게 해야 할지 고민하다가 예전에 본 outsider 님의 슬라이드를 보고 bower, grunt 등에 대해서 테스트 해보게 되었다.

npm 설치

원래 node.js를 안해봤던 터라, npm으로 설치하라고 하는데, npm은 node.js를 깔아야 자동으로 설치가 된다고 하고 뭔가 약을 산 느낌.. 아무튼, 여기를 가서 윈도우용 nodejs를 설치.

커맨드 창에서 node -v 라고 치면 버전 나오면 설치 완료된것이다. 

$ node -v
v0.12.0

npm -v 쳐보면 제대로 설치 된것을 확인할 수가 있다. 


bower 설치 

$ npm install -g bower 
bower -v 로 설치 확인해보자. 하나의 프로젝트 예를들면, test 를 만들고 
그 안이 나중에 app.py(main)이 python, flask 로 작업할떄 위치하는 공간이라고 가정하자.


bower 사용하기 

$ mkdir test
$ cd test
$ bower install jquery

bower는 특이하게 모든 것의 기준의 현재 디렉토리 기준으로 설치가 된다. 위에서 처럼 jquery 를 bower를 이용해서 설치하게 되면, 현재 디렉토리 기준 ./bower_components 가 생성되고 하위에 install 한 패키지가 생긴다. 삭제는 uninstall 을 사용하면 된다.

여러개를 인스톨 하려면 아래와 같이 한칸띄고 써주면 된다.

$ bower install jquery bootstrap

flask를 많이 사용하는 나로서는 ../bower_components 에 설치되는 것이 짜증이지만 일단은 참고 인터넷에서 매번 찾아서 내려받는 수고를 하지 않아도 된다는 것에 감사하자.
물론 CDN를 쓰면 더 좋겠지만, 그 외의 다른 CDN 이 없지만 bower를 지원하는 라이브러리들은 쉽게 내려받아서 
내 프로젝트에 배치 할수 있는것이 장점인것 같다.


찾을려면 search 명령어를 사용하면 된다.

$ bower search table //패키지 명에 table 이 들어간 패키지들을 찾느다.

$ bower lookup table //패키지 명이 table 인 패키지를 찾는다.

$ bower info jquery //해당 패키지의 정보, 버전정보를 보여준다.

bower init

bower init 을 하게 되면 해당 디렉토리(현재 test)에 bower.json 이라는 파일이 생기는데, 설치한 패키지에 대한 정보를 명시하는 역할로 npm 에서 package.json, maven 에서 pom.xml 과 같은 역할이라고 보면 될것 같다.

bower init 을 하게되면 사실 바로 bower.json 이 생기는 것이 아니라, 여러가지 문답형으로 물어 보는데, 
별 다른것은 없고 만약 이전에 bower install 을 이용해서 패키지를 설치 했다면, 설치된 패캐지를
bower.json에 넣을것인지 물어보는데 넣는다고 y를 누르면 dependencies 부분에 아래와 같이 생기게 된다. 

개인적으로는 bower install을 하기 전에 bower init 을 하고 bower install을 할때 아래와 같이 
-save 옵션을 줌으로써 bower.json 에 의존성을 기록하게 하는것이 제일 좋은것 같다. 
$ bower install jquery -save


bower-installer 사용하기

앞에서도 언급했지만, ./bower_components 에 패키지들을 다운로드 받아 주는데 문제는
flask 에서 사용하는 static/css, static/js 가 더 편하기 때문에 어떻게 하면 옮길수가 있을까 했는데
bower-installer
라는 것이 있다.
아래와 같이 설치를 하면되는데

$ npm install -g bower-installer

설치하고 나서 해줘야 할 부분은 다음과 같이 js, css 부분을 static/js, static/css 로 옮긴다는 지정을 bower.json에 
아래와 같이 추가 해주어야 한다.

“install”: {
  “path”: {
    “css”: “static/css”,
    “js”: “static/js”
  }
그리고 나서 아래와 같이 bower-installer를 실행해 준다. 
./test 에서 bower.json 이 있는 위치에서 실행해야 한다. 
$ bower-installer 
실행하고 나면 기존의 ./bower_components 는 그대로 있고(삭제되는것이 아니다.) 
static/js, static/css 에 가보면 하위 디렉토리로 /static/js/bootstrap, /static/js/bootstrap-table, 
/static/js/jquery 이런식으로 되어있고 그 안에 js 파일이 있는 것을 확인 할 수 있다.

다음에는 grunt 를 이용해서 이러한 자바스크립트 파일들은 검증 하거나, 작게 만들거나 하는 식의 작업을 해보도록 하겠다.
References


The post bower 설치 및 사용하기, bower-installer appeared first on LAB84.