Bower

웹 프론트엔드 패키지 매니저인 Bower 에 대해서 알아봅시다. Bower 는 간단한 명령을 통해서 라이브러리/프레임워크들의 의존성을 관리할 수 있습니다.

작성자

문현경

문현경

ragingwind

Bower

패키지 매니저는 사용하는 개발 환경에서 필요로 하는 프레임워크, 라이브러리, 도구들 또는 사용가능한 리소스들을 쉽게 설치하도록 도와주고 업데이트된 컴포넌트(Components)들의 버전 관리 그리고 의존성 문제를 쉽게 해결 할 수 있게 도와줍니다. Bower 는 웹프론트엔드 개발에 사용되는 대표적인 패키지 매니저입니다. Twitter 가 2012 년에 오픈소스로 공개하였으며 이후 여러 개발자들의 노력으로 계속발전되어서 여러 프로젝트에서 널리 사용되고 있습니다. Bower 는 그 동안 여러 방법으로 각기 관리하던 웹프론트엔드 컴포넌트들을 일반화된 방법으로 관리 할 수 있도록 도와 줍니다. 또한 여러 개발 도구들에서 Bower 를 지원하고 있어서 개발환경에 쉽게 적용 시킬수 있습니다.

Install Bower

Bower 는 Nodejs 와 NPM 과 Git 을 필요로 합니다. 만약 설치가 되어 있지 않다면 최신 버전으로 설치하세요. 다음 아래 명령을 통해서 Bower 를 설치하세요.

npm install -g bower

Manage Packages

Bower 를 설치하셨다면 이제 Bower 통해서 컴포넌트 패키지(Packages) 를 관리할 수 있습니다. Bower 는 각 컴포넌트들의 버전을 한나로 유지하는 방법을 사용하고 있습니다. 먼저 bower install bootstrap 을 통해서 Bootstrap 을 설치 합니다. 설치를 진해앟면 Bower 는 기본 경로인 bower_components 아래에 컴포넌트들을 설치합니다. 다음 bower ls 명령을 통해서 설치된 패키지의 버전과 의존성을 확인할 수 있으며 아래와 같은 리스트를 보여줍니다.

your_project
├─┬ bootstrap#3.2.0 extraneous
  └── jquery#2.1.1

bootstrapjqeury 에 대한 의존성을 가지고 있습니다. 따라서 jquery 도 같이 설치되지만 실제 bower_components 경로를 확인하면 같은 레벨에 존재함을 알 수 있습니다. 아래는 실제 설치된 디렉토리 구조입니다.

/your_project/bower_components
   |-bootstrap
   |-jquery

Bower 는 컴포넌트들 중에서 각각의 의존성에 다른 패키지를 설치하는 것이 아니라 전체 프로젝트에서 한개의 패키지 버전을 유지 합니다. 이것을 플랫 디펜던시 트리 (Flat Dependency Tree) 구조라고 합니다. 웹브라우저에서 여러 버전의 컴포넌트의 충돌과 다수의 다운로드를 방지하는 목적을 가지고 있습니다. 다만 특정 컴포넌트별로 버전 연결이 끊어지는 경우 개발자가 수동으로 해결해야 하는 어려운 점은 있습니다. 하지만 최신 버전을 지속적으로 유지하면 그 비용은 적어질 것입니다. Bower 는 여기 소개된 명령외에 다양한 API 를 가지고 있습니다. 아래 자료를 참고하세요.

Install Packages

컴포넌트 패키지 설치는 install 명령을 사용합니다. 기본적 경로는 bower_components 아래 설치 됩니다.

bower install <package>

컴포넌트 패키지는 등록된 Bower 컴포넌트외에 Git endpoint, URL 을 통해서 설치가 가능합니다.

# 등록된 패키지
bower install jquery
# GitHub 를 통해서
bower install desandro/masonry
# Git endpoint
bower install git://github.com/user/package.git
# URL
bower install http://example.com/script.js

Update packages

update 명령을 통해서 컴포넌트들의 버전을 업데이트 할 수 있습니다. -F, -p 옵션을 사용하여 강제 버전 업데이트나 개발에 필요한 패키지의 업데이트를 제한할 수 있습니다.

# bower update <name> [<name> ..] [<options>]
bower update jquery bootstrap

Search Packages

Bower 에서 간단한 명령으로 원하는 컴포넌트 패키지들을 검색할 수 있습니다.

bower search <name>
bower search jqeury

또한 웹에서 바로 컴포넌트들을 찾을 수 있습니다. 아래 자료를 참고하세요.

Save Packages

Bower 에서는 bower.json 이라는 패키지 명세 파일을 통해서 해당 프로젝트에서 개발/테스트시에 사용된 패키지에 대한 정보를 가지고 있습니다. 만약 해당 프로젝트에 bower.json 이 없다면 아래 명령을 실행한 후에 프로젝트에 관련된 사항을 입력하면 bower.json 이 만들어집니다.

bower init

생성된 bower.json 은 아래와 같은 내용을 가지고 있습니다.

{
  "name": "your_project",
  "version": "0.0.0",
  "authors": [
    "you <you@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
  },
  "devDependencies": {
  }
}

이후 패키지들을 설치할 때는 --save--save-dev 명령을 사용하여 설치하려는 패키지들에 대한 정보를 bower.json 에 설치와 동시에 저장하도록 합니다.

bower install jquery --save

--save 옵션은 Production 버전에 사용하는 패키지를 뜻하며 bower.jsondependencies 에 설치한 패키지의 정보가 추가 됩니다. --save-dev 는 테스트와 같은 개발도구에 필요한 패키지를 추가할 때 사용합니다. 설치한 패키지 정보는 devDependencies 에 추가 됩니다. 많은 정보는 인스톨 옵션 을 참고하세요.

--save 옵션으로 Bootstrap, --save-dev 로 jQuery 를 설치했다면 아래와 같은 내용으로 업데이트가 되어 있을 것입니다.

{
  "name": "your_project",
  "version": "0.0.0",
  "authors": [
    "you <you@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.2.0"
  },
  "devDependencies": {
    "jquery": "~2.1.1"
  }
}

bower.json 에 대한 자세한 내용은 아래 자료를 참고하세요

Use Packages

설치된 Bower 컴포넌트 패키지는 기존에 사용하던 방식 그대로 HTML 에 사용하시면 됩니다. Javascript, CSS, Image, Font 등으로 이루어진 컴포넌트를 설치된 경로를 포함하여 사용하시면 됩니다. 하지만 프로젝트를 저장소에 저장하거나 별도의 방법으로 공유한다면 설치된 Bower 컴포넌트를 모두 포함시켜서 공휴하지 마시고 설치된 컴포넌트를 삭제하고 bower.json 으로 전달하면 됩니다. 이후 프로젝트 소스를 다운로드하고 사용하려는 개발자는 bower install 명령으로 당신이 설정한 컴포는트 패키지를 모두 다시 설치 해서 사용할 수 있습니다.

Configuration

Bower 에서는 .bowerrc 는 리눅스에서 사용하는 전형적인 dotfile 입니다. Bower 를 사용하는데 필요한 환경정보가 있으며 루트 (/)와 사용자 홈디렉토리 (~) 그리고 로컬에 중복으로 존재 할 수 있으며 모든 설정은 로컬을 우선하여 오버랩되어 사용되어집니다. 프로젝트 루트에 만약 .bowerrc 가 존재한다면 그 안에 있는 설정값이 우선시 됩니다. 아래는 대표적으로 사용되는 설정입니다.

{
  "directory": "bower_components",
  "shorthand-resolver": "git://example.com//components/.git"
}

JSON 으로 저장되고 설치되는 경로의 이름을 설정하는 directory, Bower 가 설치된 패키지에서 사용되는 약칭이 사용되는 git endpoint 를 설정할 수 있습니다. 만약 사내에 별도로 사용되는 컴포넌트가 있다면 github 대신에 사용할 수 있습니다. 더 많은 설정은 다음 자료를 참고하세요.

References

Tags : bower build twitter 

comments powered by Disqus