PKG Management




Bower 란? (프론트 엔드 패키지 관리도구)

Bower 란? (프론트 엔드 패키지 관리도구)

Pkg Management
Click to the link to read the article: 내용 보러가기 ============================ Bower? bower는 npm과 비슷한 도구이지만...
Read More
Bower 란? (프론트 엔드 패키지 관리도구)
Pkg Management

Bower 란? (프론트 엔드 패키지 관리도구)

Click to the link to read the article내용 보러가기

============================

Bower?

bower는 npm과 비슷한 도구이지만 트위터에서 만든 프론트 엔드의 패키지를 관리해주는 도구이다.

처음 bower를 이용하기 전까지 jquery를 다운받아서 FTP로 업로드를 하고 사용할 jquery plugin을 다운받아서 FTP로 업로드 하는 등

프로젝트에서 사용하는 패키지를 다운받는 업무가 반복하였으며, 이러한 부분은 bower를 처음 보고나서 감탄사를 계속 할 수 밖에없었다.

사실 bower를 알기 전까진 git도 잘 사용 안했으며 플러그인을 사용하기 위해서 CDN이나 사이트에서 다운 받는 방식을 많이 사용했으나

bower를 알고나서는 거의 github만 보고 bower.json파일만 확인하고 bower를 통해 설치를 한다.

bower도 npm과 마찬가지로 설치뿐만 아니라 의존성까지 해결해준다. 이 얼마나 편한가?

여기서 의존성에 대해 설명을 하자면 Bootstrap 같은 경우 Jquery 기반이라 Jquery 파일을 먼저 불러오고 나서 Bootstrap의 .js 파일들을 불러와야한다.

그래서 보통은 아래와 같이 많이 사용한다

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

위와 같이 라이브러리 안에 필수적으로 필요한 라이브러리를 의존한다고해서 의존성이라고 표현한다.

실제로 bower만으로는 의존성이 해결되지는 않으나 gulp or grunt를 같이 사용하면 어느정도 해소는 된다.

Bower 명령어

bower를 이용하여 패키지를 설치를 하고 싶은경우 bower install이라는 명령어를 이용하면 패키지가 설치가 가능하다.

bower install <패키지명>

만약 jquery를 설치하고 싶은 경우는 아래와 같이 입력하면된다.

bower install jquery

특정 버전을 설치하고 싶은 경우는 뒤에 #버전을 입력하면 가능하다.

bower install jquery#1.11.1

패키지를 삭제하고 싶은경우는 install 대신 uninstall로 입력한다.

bower uninstall <패키지명>

Bower.json

bower의 경우도 npm과 마찬가지로 패키지 명시를 파일로 관리하게된다. npm은 package.json을 이용하여 관리하였지만 bower는 bower.json 파일로 관리하게되며 마찬가지로 bower init 명령어를 통하여 쉽게 생성이 가능하다.

{
  "name": "packageName",
  "version": "0.0.1",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ]
}

각 항목에 대해 간략하게 살펴보면

– Name

필수값이며, 패키지 명칭이다 npm과 마찬가지고 패키지의 명칭을 이용하여 install이 가능하다.

– version

패키지 버전정보 사실 bower로 배포하는게 아니라면 크게 의미없는 항목이다.

– ignore

bower가 설치할때 무시할 항목이다.

– dependencies/devDependencies

의존성 관리 항목이다. dev가 붙은건 개발시에만 필요한 의존성 라이브러리로 bower에 배포할게 아니라면 크게 구분할 의미가 없다.

Bower가 왜 쓰이는가?

사실 이 부분을 의아해 하시는 개발자분들이 아직도 제법 많으실텐데. Front-End가 요즘은 워낙 복잡해진 탓에 의존성 관리가 매우 중요하다.
특히나 javascript라이브러리 뿐만 아니라 css도 포함되는 ui 컴퍼넌트들은 해당 라이브러리들의 경로 문제도 있어 다양한 라이브러리 사용시
의존성 문제가 더더욱 발생된다. 이러한 점을 쉽게 bower를 이용해 해결이 가능하며, 사용하는 라이브러리들의 업데이트 사항도 체크가 가능하니 매우 편하다.
bower뿐만 아니라 gulp나 grunt등을 같이 이용시 매우편함( 가장 최근 프로젝트에선 gulp + bower를 이용 프론트개발을 함)
허나 일주일전 정식 버전 릴리즈된 angular2의 경우 webpack을 이용하다 보니 당분간은 저의 경우 사용을 안할 것 같네요.