bower?

현재 개발중인 프로젝트의 프론트엔드에서 bower를 사용하고 있다. 그러려니 하고 사용하고 있었는데, 이참에 bower에 대해 알아보는 시간을 갖도록 하겠다. bower는 프론트엔드 패키지들을 관리해주는 역할을 한다. (마치.. 리눅스의 yum이나 apt-get같은…) 웹 개발시 필요한 패키지들을 일일이 다운받아서 지정된 위치에 넣어주고 하는 작업을 해결해 주고, 골치아픈(!) 의존성 관리를 할수 있다.

bower 설치

bower를 설치하기 위해서는 npm설치를 해야하는데.. 따로 언급은 하지 않겠다. npm이 설치되어 있다는 가정하에 다음 명령어를 실행하면 끝!

npm install -g bower

매우 간단하게 설치할수 있다. 설치된 bower을 버전을 확인하고 싶다면 다음 명령을 이용한다.

bower -v

package 설치

bower를 이용한 패키지 설치는 다음 명령어를 이용한다.

bower install <package>

npm 명령어와 비슷하다. 부분에 올 수 있는 형식은 4가지가 있는데, 다음과 같다.

#registered package
bower install jquery
#Github shorthand
bower install jquery/jquery
#git endpoint
bower install git://github/user/package.git
#URL
bower install http://example.com/script.js

4가지 방식중 적절한 방식을 통해 패키지를 설치하면 된다. 위의 명령어를 통해 설치된 패키지는 bower_components 디렉토리 아래 위치하게 된다. 아래와 같이 사용하면 된다.

<script src="bower_components/jquery/dist/jquery.min.js"></script>

bower.json

bower.json에는 설치한 패키지의 정보를 명시한다. maven의 pom.xml이라고 생각하면 될듯하다.

bower init

위의 명령을 수행하면 bower.json 파일을 생성할수 있다. bower.json 의 내용을 정리해보자.

name: 패키지명
version: version 정보
ignore: 패키지 설치지 무시할 목록
dependencies: 패키지 의존성 정보
devDependencies: 개발용 패키지 의존성 정보

해당 bower.json파일에 의존성이 명시되어 있다면 bower install 명령만으로 bower.json에 정의되어있는 패키지들을 설치할수 있다.

패키지를 설치할 때 bower.json에 설치할때마다 의존 버전을 입력하는것이 귀찮다면 다음 명령을 통해 설치와 동시에 bower.json에 의존버전을 입력할 수 있다.

#dependencies 에 추가
bower install <package> --save
#devDependencies 에 추가
bower install <package> --save-dev

Keonwoo Kim

Your stylish, minimalist theme!