bower를 활용한 웹 프론트엔트 패키지 관리 (설치 및 활용)

Bower란? 

---

Bower 모듈에 대한 설명에 앞서 웹 Front-End와 Back-End에 대한 기본적인 이해가 필요하다.

• Front-End : 유저가 화면 상에서 보는 영역, 즉 화면을 구성하는 모든 것 (레이아웃, 컬러, 텍스트, 이미지 등)을 의미한다, 이를 개발하는 것을 프론트엔드 개발이라 하며, HTML로 기초 레이아웃(뼈대)를 구성하고, CSS로 레이아웃의 디자인적 요소를 설정, Javascript를 통해 정적 웹 페이지를 동적 웹 페이지로 구현할 수 있다.

• Back-End : 유저가 화면 상에서 볼 수 없는 영역, 흔히 뒷단이라고 부르며, 서버, 응용프로그램, 데이터베이스 등 클라이언트에서의 요청을 처리해주고 리소스를 제공해주는 역할 등을 수행한다.

 오늘 알아 볼 Bower(바우어) 모듈은 Twitter가 만든 Front-End 개발 패키지 관리자이다. Bower는 프로젝트에서 사용하는 프론트엔드 언어의 버전 관리나 버전의 dependency를 부여하고, 프론트엔드 개발에서 흔히 사용되는 JQuery, Bootstrap 등의 패키지를 하나하나 찾아서 다운로드 받거나 CDN등을 활용하는 등 불필요한 수고를 덜어주는 유용한 모듈이다.

 

 

npm 설치 및 Bower 모듈 시작하기. 

---

Bower 모듈은 npm(Node Packaged Manager)를 통해서 설치하여야 한다.

npm을 사용하기 위해서 Node.js 를 설치하도록 한다. Node.js를 설치하면 npm은 기본적으로 같이 설치되기 때문에 Node.js를 설치한다면 npm을 별도로 설치 할 필요가 없다. 

https://nodejs.org/ 

Node.js

 

위 사이트에 접속하면 다음과 같은 화면을 볼 수 있는데 LTS, Current 버전 중 어떠한 버전을 선택하여 설치하더라도 문제가 없다. (필자는 12.17.0 LTS 버전을 설치하였다.)

 

설치가 완료되면, cmd를 열어 node -v 와 npm -v 를 입력해보자. Node.js와 npm이 정상적으로 설치 되었음을 확인할 수 있다.

다음으로 npm install -g bower 를 입력하여 npm을 통하여 bower 모듈을 설치하도록 한다.

설치가 완료 된 후 위와 같은 방법으로 bower -v 명령어를 입력하여 정상적으로 설치 되었음을 확인한다.

 

 

프로젝트 폴더에서 bower.json 파일 구성하기. 

---

이제 bower 모듈을 사용할 준비가 끝났다. cmd창에서 본인의 프로젝트 폴더로 진입하고 해당 프로젝트의 Root Directory에서 bower init 명령어를 입력한다.

 

bower init 명령어를 실행하면 다음과 같이 질의 응답 형식으로 bower.json 파일을 구성할 기본 정보들을 입력할 수 있다. bower init 명령어를 실행하기 이전에 설치된 컴포넌트가 존재한다면 bower.json 파일을 구성할 때 디펜던시에 setting이 가능하다.

다음과 같이 구성이 완료되면 프로젝트 Root Directory에 bower.json 파일이 구성되어 있는 것을 확인할 수 있다.

 

bower.json 구성요소는 다음과 같다.

• name : 프로젝트 이름

• authonrs : 개발자 / 작성자 목록

• description: 프로젝트/패키지에 대한 명세

• main : 패키지의 end-point

• license : 라이센스명

• ignore : 패키지 설치 시 무시 할 파일 및 폴더 목록들

• dependencies : 의존성 목록, 즉 해당 프로젝트 실행을 위해 설치되어 있는(혹은 설치 되어야 하는) 패키지 목록. 

 

bower 모듈로 라이브러리 설치하기.

---

기본적인 bower.json 파일 구성이 끝났다면. 이제 해당 프로젝트 개발에 필요한 라이브러리, 프레임워크 등을 설치할 수 있다. 간단한 예제로 다음 명령어를 입력하여 jquery를 빠르게 설치 할 수 있다.

$ bower install jquery

bower_componets 하위 폴더에 jquery 패키지가 설치 된 모습.

위 명령어를 입력하면 다음과 같이 bower_componets 폴더 아래 jquery 패키지가 설치 된 것을 확인 할 수 있다.

$ bower install jquery bootstrap

추가적으로 위와 같이 ' ' 공백을 기준으로 여러 패키지 이름을 입력해주면, bower install 명령어를 여러 번 입력 할 필요 없이. 다수의 패키지를 하나의 커맨드 라인으로 설치가 가능하다.

 

$ bower install jquery bootstrap -save

마지막으로 커맨드라인 맨 뒤에 -save 를 추가로 입력해주면 위에서 bower init 명령어를 통하여 생성한 bower.json 파일에 아래와 같이 dependencies를 기록 할 수 있다.

bower.json

bower.json 파일의 dependencies 항목에 다음과 같이 작업중인 프로젝트에 설치된 패키지들에 대한 정보(패키지 명, 버전)가 기록된 것을 확인할 수 있다. -save 명령어 없이 단순히 bower install을 실행한다면 dependencies에 기록되지 않으니, 새로운 패키지를 설치 할 때마다 -save 명령어를 입력해주어 dependencies가 누락되지 않도록 관리해 주는 것이 좋을 것 같다.