설치구조 이해 - NodeJS, Gulp, Bower

PHP라는 만능이 있다.

<?> 이 태그에 모든것을 넣으면 모든게 해결되었고, 사용자에게 보여주려면 이 밖에 코드를 집어넣으면 되었다. 인터넷의 태동기는 사실 이런 모양이였다.

다만 웹은 급속도로 성장하면서 점점 복잡해지기 시작했다.

스파게티 코드라는 이름은 누가지었는지도 모르겠지만, 코드가 지저분해졌고, 사람들은 나누는걸 좋아하게 되었다. 

웹 세상은 복잡해졌지만 Javascript는 건들기가 어려웠다.

사람들은 하지만 벌써 신나서 코드를 짜기 시작했고, 라이브러리라고 부르는 공통적인 로직을 만들기 시작했다. 

점점더 편하게(Jquery), 그리고 철학있게(Angular) 개발을 편하게 만드는 자바스크립트가 등장했다. 오픈소스 커밋은 개발자들의 만족을 통해 오픈소스의 창출을 더욱더 가속화했다.

그리고 라이브러리는 각종 엄청난 버전에 서로서로 가져다 쓰다보니 복잡하게 되었다. 이를 정리해줄 무언가가 필요했다. 정리를 너무 잘하기보다는 적당히 사용자에게 숨기려고 난독화를 시도하는게 필요하기도 했다.

하도 많다보니 이런 도구를 관리해줄 무언가가 필요했다. 

이런 도구도 많다보니 이를 관리해줄 무언가를 관리해줄.... 

하다가 이렇게 복잡하게 변했다. 알면 쉽지만 모르면 짜증나는..

처음부터 웹세상을 꾸미는 구조를 확인해보자. 

인간은 도구를 사용할줄아는 동물이기 때문에 툴을 깔아주는 툴이 필요하다.

웹세상 또한 웹세상을 꾸미는 각종 도구를 깔아주는 툴이 또 필요하다. 

NPM설치

그를 도와줄 NPM을 깔아보자. 

잠시, 그의 역사를 야매로 배워보자면 NodeJS는 자바스크립트로 웹서버 등 클라이언트 뿐만아니라 각종 로직을 실행해줄 백엔드 로직도 가능하다. NodeJS에서 실행할 모듈들도 생기기 시작했다. 이를 관리해줄 무언가가 필요했다. Node Package Manager. NPM.

https://nodejs.org/ko/

여기서 부터 시작이다. 윈도우라면 그냥 홈페이지를 가서 받고, 리눅스 계열이라면 이 툴을 깔아주는 또다른 툴인 apt-get등을 이용해 알아서 깔도록한다. 맥은 AS가 거지니 쓰지않도록한다.

툴을 깔아주는 툴을 apt-get과 같은 툴을 깔아주는 툴을 깔아주는 툴을 이용해 설치했기 때문에 이제는 명령어에서 npm이 돌아가고 있는지 확인할수있다.

$ npm -v

이제 npm으로 어떤 툴을 깔지 마법서로 적어주면 된다. 초기 script는 npm init으로 가능하다.

NPM은 백엔드를 비롯해 node.js기반에서 돌아가는 각종 모듈을 실행해줄수있는 일종의 플랫폼이라고 다시 상기한다. node.js는 여기서 쓸것이 아니기때문에 일단 넘어가고, NPM만 기억하면된다. 그냥 각종 프로그램 (js기반으로 되어있는)을 잘 깔아주는 도구. 이 package.json에다가 무엇을 받을지 잘 적어주면 된다.

Bower, Gulp 설치

여기서는 프론트단의 Javascript를 책임질 (프론트만이다 프론트!!) Bower. 

그리고 수많은 Javascript의 정리를 책임질 Gulp.

뭔가 미국스러운 이름이지만 일단 넘어간다.

$ npm install 

을 통해 package.json에 언급된 모듈들을 깔아버릴수있다.

"devDependencies": {

"bower": "~1.8.2",

"gulp": "~3.8.0"

}

이제, install을 통해 깐 모듈들은 npm과 같은 명령어를 굳이 치지 않아도 다음과 같이 쉽게 불러올수있다.

Bower로 Angular 등 Javscript설치

$ bower init

bower도 프론트엔드에만 관련된 Javascript를 설치해주는 패키지 관리지이기 때문에, 마찬가지로 init을 통해 bower.json을 생성해준다. 잘설치되지 않는다면 권한을 확인한다. 마찬가지로 아래와같이 유명한 프레임워크인 bootstrap, 그리고 dom조작 jquery가 깔린다. angular는 구글이 만든 프론트엔드 개발에 MVC패턴을 적용하는 또다른 도구이다. 일단은 프론트만 관장한다고 생각한다. 현재 버전은 5가 넘었으니 이는 다시한번 확인해서 새걸로 바꿔주도록 한다.

"dependencies": {

"jquery": "~2.1.3",

"bootstrap": "~3.3.4",

"angular": "~1.3.15",

}

마찬가지로

$ bower install

로 설치가능하다.