Bower, A package manager for the web
Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
> 최근의 웹사이트는 다양한 것들(프레임워크, 라이브러리, 자원, 유틸리티 그리고 레인보우(!?))로 만들어진다. Bower는 이 모든 것을 관리한다.

Bower는 찾고자 하는 것들을 각지에서 탐색하고, 다운로드하고, 설치하고 붙인다. Bower는 bower.json 매니페스트 파일을 기준으로 패키지들을 추적관리한다.
어떤 패키지를 사용할지는 사용자에게 달려있다.

Bower는 프론트엔드에 최적화되어 있다. Bower는 간단한 의존성구조, 각 패키지별 대표버전만을 요구하며, 페이지로드를 최소한으로 감소시킨다.

1. Bower 설치

Bower는 커맨드라인 유틸리티다. npm*(https://www.npmjs.com/) 이 설치되어 있어야 한다.

$ npm install -g bower

Bower는 Node 그리고 npm  Git을 필요로 한다.

2. 시작

2.1. 패키지 설치

패키지 설치는 bower install 이용한다. Bower가 설치한 패키지는 bower_components/에 설치된다.

$ bower install <package>

패키지는 github, git 엔드포인트, URL 그리고 기타등등이 가능하다. 보다 자세한 내용은 bower install 을 살펴보기 바란다.

# registered package
$ bower install jquery
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js

2.2. 패키지 검색

Search Bower pacakge와 선호하는 프로젝트의 등록된 패키지명을 검색한다.

2.3. 패키지 저장

패키지 저장은 bower init 을 통해서 bower.json 에 등록한다.

2.4. 패키지 사용

패키지를 사용하는 것은 사용자가 결정한다. Bower와 함께 Grunt, RequireJS, Yeoman, 그리고 다양한 도구들을 함께 사용하거나,
빌드할때 API를 활용하는 것을 권장한다. 또한 설치된 패키지를, 다음의 jquery사용의 경우처럼, 바로 사용할 수도 있다.

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

다음은 RequireJS를 이용하여 각 페이지별 자바스크립트 파일/모듈을 적재해보자.

참고


  1. ... Java 백엔드 개발도 잘 못하는데... 프론트엔드도 깨작거리게 되었다.

+ Recent posts