node.js로 개발하는 중 jquery가 필요해서 찾아보니 알게 되었습니다.
bower란 node.js에서 사용되는 프론트엔드 의존성 관리 도구 입니다. 자바에서의 maven과 흡사하다고 보시면 됩니다. 하지만 maven과는 다르게 jquery나 bootstrap 같은 프론트엔드 컴포넌트들을 다룹니다.
jquery를 다운 받아 html 코드에 경로를 일일히 입력해도 상관은 없습니다만 자동화를 시켜보자 하는 분에게는 편리한 도구 입니다.
bower는 많은 프론트엔드 컴포넌트를 사용하는 프로젝트일 수록 장점이 부각됩니다. 반대로 저처럼 jquery 정도만 사용하는 경우에는 배보다 배꼽이 더 큰 느낌을 받을 수 있습니다.
bower는 npm을 통해 설치가 가능합니다.
# npm install -g bower
기본적으로 설치가 되면 /bower-components 라는 디렉토리가 생성됩니다.
그리고 bower를 이용해 jquery와 bootstrap을 설치해보겠습니다.
# bower install jquery bootstrap
설치가 완료되면 /bower-components/jquery와 /bower-components/bootstrap 이 각각 생성되며 dist라는 디렉토리에 각 해당 파일이 담겨있습니다.
그런데 저의 경우 문제가 하나 있었습니다. 설치하면서 계정의 루트디렉토리에 bower-components 디렉토리가 생성되면서 express의 views 내 파일(템플릿)에서 참조할 수가 없는 것입니다.
참고로 express의 views 에서 루트(/)는 /public 입니다. 그렇다면 bower-components 디렉토리를 /public 하위에 위치시켜야 합니다. 원하는 위치에 원하는 이름(bower-components가 아닌)으로 설치하고자 하는 경우에는 아래와 같은 과정을 거쳐야 합니다.
1. 현재 계정 루트(~/)에 .bowerrc 생성 후 아래 내용을 입력해주고 저장합니다.
(큰따옴표 대신 작은 따옴표를 사용하면 에러가 나니 참고하세요.)
{
"directory": "/public/bower"
}
다른 툴의 닷파일처럼 json 형식으로 작성되며 directory 말고도 많은 옵션을 지원합니다.
(http://bower.io/docs/config/)
이 파일이 있는 경우 우선적으로 반영되며 없는 경우 기본 설정으로 설치가 됩니다.
2. 만약 bower가 설치되어있다면 삭제하고 설치된 기존 디렉토리가 있다면 역시 삭제합니다.
# npm uninstall bower # rm -rf ./bower-components
3. 다시 설치합니다.
# npm install -g bower
4. 원하는 위치에 설치가 되었는지 확인합니다.
이후 views 파일에서 /bower/jquery/dist/jquery.js 와 같은 경로로 접근하시면 됩니다.