Bower를 사용합시다.

(부제, 운영중인 웹 프로젝트 package를 bower를 통해 관리 하도록 변경 해 보기 :)

예전에 Bower에 대해서 들어는 보았지만, 이를 실제 프로젝트에 적용해 보지는 않았습니다. 새로 시작하는 프로젝트도 아니였고, 벌써 세팅 되어있는 package들을 아까운(?) 시간을 투자해서 새로이 관리 할 필요성을 느끼지 못했다는 핑계를 대 봅니다.:)
오래 전 시작했었던 프로젝트가 있었습니다.
시간이 흐르면서 여기에 사용된 package들이 bug fix(or patch) 되면서, 전반적으로 package들을 업그레이드 해야 할 필요성이 생겼습니다. :0
이왕 하는거 package들의 dependency, 그리고 나중에 또 있을지 모르는 버전 업그레이드를 염두해 두고, 이제는 Bower를 통해 쉽게(?) 관리 해 보기로 합니다.

이 글에서는 Bower의 소개와 기초사용법은 다루지 않습니다.

다만, 운영중인 웹프로젝트에서 package management migration with Bower 정도로 보시면 도움이 되실 듯 합니다. (실제 버전업그레이드 후 일어날수 있는 side effect에 관한 부분도 패스 합니다. 그냥 Bower를 통한 버전관리 하는 방법에만 중점을 둡니다.)

아참, 그리고 효과적인 package management를 위해 bower-installer라는 툴도 함께 사용하고 있습니다. 아쉽지만, bower-installer의 기초 사용법 또한 이 글에서는 다루지 않음을 알려드립니다. ;P

ps. 그래도 아쉬우니 간단하게나마 bower-installer에 대해서 말씀 드려봅니다. Bower만을 통해 package를 관리하면, 관리는 쉽지만 모든 entire repository들을 포함하기에 용량이 제법 큽니다. 모든 파일들을 서버에 올릴 필요는 없겠죠. 각각의 package들의 필요한 js, css 등등의 파일들만 골라내는 역할을 한다고 생각하시면 쉽습니다. 또한 대부분 xxxxx.js보다는 xxxxx.min.js를 사용하실텐데, 이 또한 bower-installer를통해 간단히 설정할 수 있습니다. 자세한 설정법은 아래에서 진행합니다. :)

작업 시작에 앞서 현재 운영중인 프로젝트 폴더 구조입니다.

사용중인 package들은 resources밑에 이렇게 대략 이런식으로 존재합니다.

package들을 크게 4가지로 분류하고 src/main/webapp/resources 아래에 각각의 그룹으로 관리하고자 합니다

group 1. bowerAssets

  • Bower을 통해 관리할 수 있는 package
  • 대부분의 package들이 이곳에 위치하게 됩니다.
  • bower-installer를 통해 이곳에 필요한 file(js, css, font, etc)들만 추려 내는 것이 이 글의 핵심이자 나누고자 하는 사항입니다. :)

group 2. extAssets

  • Bower search를 통해 검색되지 않아 직접 관리해야 할 package

group 3. vendorAssets

  • 돈을 지불하고 사용해야하는 package

group 4. wiseecoAssets

  • wiseeco(우리회사 ~:)에서 소유하고 있는 package

나중엔 잘(?) 정리되어 아래처럼 관리하게 될 예정입니다. :)

그럼 package management migration을 본격적으로 시작해 봅시다.

예상되는 기본 작업 순서는 아래와 같습니다.

step0. .bowerrc 파일에 관하여

step1. bower install 명령으로 package 받기

step2. bower init 명령으로 bower.json 생성

step3. bower.json에 bower-installer에서 사용할 install key 생성

step4. bower-installer 명령

step5. 최종 bowerAsserts 그룹 생성 확인

step6. .gitignore 설정

step7. 작업 고고 :(

step0. .bowerrc파일에 관하여

  • .bowerrc파일은 linux에서 사용되는 여느 dotfile과 비슷한 설정파일입니다. 기본적으로 사용중인 계정의 home 폴더에 두시면 전체 적용이 되고, 프로젝트별로 조금씩 설정값이 상이하다면 해당 프로젝트의 home이 되는 폴더에 하나 더 두시면 마지막 파일 기준으로 override 된다고 생각하시면 됩니다. .bowerrc 파일이 없다면 모든 설정값들은 default로 사용됩니다. 설정값들에 대한 디테일한 설명은 API 링크로 대신합니다.

저는 이렇게 사용해 보겠습니다.

{
“directory”: “bower_components/”,
“analytics”: false,
“timeout”: 120000,
“color” : true
}

step1. bower install 명령으로 package 받기

  • 프로젝트의 home에서 아래의 명령으로 package를 설치합니다. (기본은 최신버전을 다운 받습니다.)
bower install package_name
  • package의 특정 버전을 설치하고 싶으시면 package 명 뒤에 #버전 을 사용합니다.
bower install package_name#package_version
  • jquery와 angular를 설치 해 봅니다.
  • 기본 프로젝트의 home 아래에 bower_components폴더가 생성 되었고, 그 아래 jquery, angular가 다운받아짐을 확인 할 수 있습니다.

step2. bower init 명령으로 bower.json 생성

  • 프로젝트의 home에서 bower.json을 생성하기 위해 아래의 명령을 사용합니다.
bower init
  • 기본적으로 항목들의 값을 입력합니다. 이때 입력한 값들은 혹시나 모를 지금 생성된 bower 파일을 배포하거나 할 때 사용됩니다.
  • 설정 값 중에 주의깊게 보아야 할 것은 ‘set currently installed components as dependencies?’ 입니다. 이 물음은 init명령을 통해 bower.json을 생성할 때, 이전에 bower를 통해 설치한 package들을 dependencies 설정값에 넣겠느냐 확인하는것입니다. 다른 설정 값들은 몰라도 bower.json의 dependencies의 값은 설치된 package들의 관리에 꼭 필요한 값이라는것을 알아두세요. 추후 bower.json파일만 있으면 bower install 명령으로 똑같은 패키지 환경을 새로 생성할 수있습니다.
  • 이미 bower.json이 생성 되었을 경우 package를 추가해야 할 때가 있습니다. 이때는 아래의 명령으로 package설치와 함께 dependencies에도 추가합니다.
bower install package_name -S
  • 같은 명령으로는 -S 대신 — save 옵션을 줄 수 있습니다. (참고로 dependency 종류는 위에서 알아보았던 dependencies와 devDependencies가 있습니다. 자세한 옵션은 API 링크를 걸어둡니다. :)
bower install package_name — save
  • 최종 생성된 bower.json을 확인합니다.

step3. bower.json에 bower-installer에서 사용할 install key 생성

  • 이전 단계들로 부터 설치된 package들을 확인해 봅니다. 명령어는 아래와 같습니다.
bower list
  • jquery같은경우 bower list 명령으로 확인했을때 3번 나오지만, 실제로는 1번이 설치되었고 dependency는 자동으로 bower에서 관리해 주는듯 합니다. :)
  • 설치된 package들을 확인 해 보면, 필요 이상의 파일들이 있습니다. 많은 파일 중, 해당 package를 돌리는데 필요한 파일들만 추출(?) 하는 설정을 bower.json에 입력합니다.
  • 문서에서는 ‘Bower installer provides an easy way for the main files to be installed or moved to one or more locations. Simply add to your bower.json an install key and path attribute’라고 설명하고 있습니다. 기본 구조는 아래와 같습니다.
“install” : {
“path” : {}
}
  • 기본 path attribute에 sources attribute를 써야지 좀 더 디테일하게 원하는 파일들만 추출할 수 있습니다. 여기서는 base attribute도 설정해서 조금더 타이핑을 줄여 봅니다. ~~:)
sources에 대해서 조금 더 보충설명 드립니다. sources attribute를 사용한다면, 여기에 등록한 package들에 대해서만 bower-installer를 통해서 추출하고 나머지 package들은 bower list — paths 라는 명령어를 통해서 나오는 파일에 대해서만 path attribute에 설정된 장소로만 복사 됩니다.
만약 위의 sources에서 bootstrap이 없다면, jquery-ui, angular, jquery에 설정된 4개의 파일만 설정된 path로 복사되고, bootstrap package에 대한 file들은 bower list — paths명령으로 보이는 파일에 한해서만 해당 path에 이동됩니다. 여기서 주의 할 점 한가지는 파일의 확장자명으로 이동되는 장소가 결정되는데, 이는 path와 매핑되어 해당되는 곳으로 복사 됩니다. 만약 path가 없다면 기본 프로젝트폴더에 파일이 복사 됩니다. 한번 해 보시면 이해 되십니다. 실습이 꼭 필요합니다. :)

step4. bower-installer 명령

  • bower_components 폴더에 설치된 package의 file중에서 내가 원하는 파일들만을 추려내는 명령은 아래와 같습니다. 프로젝트의 home에서 아래의 명령을 입력합니다. :)
bower-installer

step5. 최종 bowerAsserts 그룹 생성 확인

  • 프로젝트의 home에서 bower.json의 install key의 base attribute로 설정한 bowerAsserts로 이동합니다. (./src/main/webapp/resources/bowerAsserts)
  • 생성된 폴더와 파일들을 확인합니다.
  • 한가지 팁을 알려드린다면, 생성된 bowerAssets아래의 폴더 구조는 설정하는 path에 따라 구조를 바꿀 수 있습니다.
  • step3에서의 path를 아래와 같이 설정해 보고 bower-installer명령을 내려 봅니다.(기존에 생성된 bowerAsserts를 지우고 테스트 해 보시기 바래요.) ~:)
  • 다시한번 bower-installer실행명령을 내려 봅니다.
  • bowerAssets폴더로 이동 후 생성된 package들을 다시 한번 확인해 봅니다.
  • 어떤 구조로 package들을 묶어서 관리할지는 사용자의 선택입니다. :)

step6. .gitignore 설정과 마무리

  • 지금까지 잘 따라 오셨다면, 아래와같은 폴더구조를 확인 하실 수 있습니다.
  • 새롭게 bower_components폴더가 생겼고, 그 아래 설치된 package들이 있습니다.
  • 그리고 src/main/webapp/resources/bowerAssets 아래에 package의 file 중 필요한 file들만 추출된 것을 확인하실수 있죠.
  • 마지막으로 하실 설정은 .gitignore에 bower_components 한 줄 만 추가하시는 작업입니다. bower-installer를 통해 package들을 추출했는데 bower_components를 통째로 올린다는건, 있을수 없는 일이니깐요. (위에 캡쳐이미지 오른쪽 참조:)

step7. 작업 고고 :(

  • 이제 소스에서 import된 js나 css를 바꿔가며 테스트 해 보시고, 적절하게 사용하시면 됩니다. :)
  • maven이나 gradle을 이용해 더 편리하게 사용 할 방법을 테스트하고 공유하고 싶지만, 이 글은 여기서 마무리 짓습니다. :)
  • 이제 저도 본격적으로 migration 테스트를 진행해 보아야 겠습니다. :(
  • 혹시라고 수정되어야 할 부분이 있다면 cookatrice@gmail.com로 알려주시면 수정하도록 하겠습니다.