점점 시대가 발전하면서 프론트 엔드역시 패키지를 관리해야하는 시대가 왔다.
그 이유는 프론트 엔드 개발에도 시간이 너무 걸리기 때문이다.
이유는 스마트폰 시대의 도래로 반응형 웹등이 대세가 된게 원인이라 할 수 있겠다.
어쨋던 이번에 소개하려고하는 것은 bower이다.
bower는 우리가 이때까지 사용했던 프론트 엔드를 패키지로 관리할 수 있게 된다.
사용법은 npm과 거의 똑같다. npm의 프론트엔드버전이라고 할 수 있을정도는 되는것 같다.
bower는 부트스트랩과 마찬가지로 트위터에서 만들었다. 그래서 저런 새 이미지를 하고 있는것 같다.
어쨋던 설치를 하는데는 반드시 nodejs가 필요하다. 요즘 웹에 관한건 nodejs의 npm인스톨러가 필요한 경우가 많다.
nodejs를 쓰지 않더라도 npm을 위해서 nodejs를 설치해두자.
npm install -g bower
위의 명령어로 설치를 해준다.
그러고 나면 bower를 명령어로 쓸 수 있게 된다.
이제 설치만 끝나고나면 사실 nodejs나 npm이나 뭐 신경을 쓰지 않아도 된다.
이제 bower사용법을 알려주겠다.
bower는 쓰기전에 init을 사용해서 bower.json파일을 만든다.
이는 중요한데 현재 bower패키지가 어떤형태로 사용중인지에 대한 정보를 담고 있기 때문이다.
한방에 만들어지는 것은 아니고 이것저것 질문을 한다.
질문의 내용은 아래와 같다.
name - 현재 어플리케이션의 이름
description - 설명, 비워도 무방
keyword - 키워드를 설정, 비워도 무방
authors - 사용하는 사람
main file - index파일이 뭔지에 대한 기술
license - 어떤 라이센스를 따르는지에 대한 기술, 비울시 자동으로 MIT가 됨
homepage - 자신의 홈페이지
set currently... - bower init을 실행하기전 설치되어있던 bower package를 dependencies에 추가할지 물어봄 그냥 yes하면됨
add commonly... - 새로 패키지를 다운할시 무시할 파일들 설정 그냥 yes하면됨
would you... - bower install을 실행시 -save옵션이 없어도 적용되게 함. yes가 편하긴하나 git에 올리는 상황을 생각하면 no가 낫김함
위의 과정이 끝나고나면 bower.json이 생성되게 된다.
이제 패키지를 하나 설치해보도록 하자.
설치하는 방법은 위와같다.
bower intall <패키지명>
설치가 끝나면 bower_components라는 파일이 생긴다.
여기서 패키지들이 설치된다. 의존성 까지 같이 설치되는데 보통 bootstrap을 사용하기 위해서는 jquery가 필요하다.
따라서 같이 설치되게 된다.
단 bower.json에 의존성이 기록이 안된다는 문제점이 있다.
만약 bower init시에 마지막 옵션을 yes로 했으면 기록이 된다.
그러나 필자는 no로 했기에 기록이 되지 않는다.
만약 no인 상태에서 기록을 하려면 -save 옵션을 붙혀줘야한다.
bower intall <패키지명> -save
보다시피 의존성이 적용된걸 확인할 수 있다.
패키지는 기본적으로 dist파일에 있는 녀석을 사용해주면된다.