한창 상승 중인 Front-End를 위한 JavaScript Framework인 Vue.js를 시작하기 앞서 먼저 Vue.js에 대해 알아보고 개념을 잡고 시작하자.이번 프로젝트를 위해 2시간의 세미나를 걸쳐 Vue.js 약(?)을 팔았다. 다행히 결과가 좋아 기존에 Survey 된 프레임워크인 Backbone.js를 Vue.js로 변경하기로 하였다. 물론 Backbone.js가 Vue.js보다 못하다는 말이 아니다. 앞으로 진행되어야 할 프로젝트에서 컴포넌트 방식의 개발 요소가 매우 필요하였고, 이러한 구성을 Backbone.js로 프로토타입을 구현하니 막상 복잡함 감이 없지 않았다. 이에 따라 다른 기술을 survey하다 Vue.js를 채택하게 되었다. 한창 상승 중인 프레임워크인지라 물론 여러 번 지나가다 보기만 하였지만 이번에 제대로 접근해 보니 매우 진보적이고 훌륭한 프레임워크라고 생각이 들어 포스팅하게 되었다.
그럼 먼저 Vue.js에 대해 기본적인 개념부터 알아보고 다음 포스팅부터 실제로 만져 보면서 학습해보자.

지금까지 우리는 webpack에 대한 개념을 먼저 살펴보았다. 이제 실제로 webpack을 설치해보고 사용해 보면서 하나하나 짚어나가 보자. 왜 webpack이 많이 사용되는지와 Gulp와의 차이점을 알았다면 이제 실제로 webpack을 설치해보고 사용해 보면서 하나하나 짚어나가 보자.webpack은 npm으로 쉽게 설치할 수 있다. 만약 이 포스트를 보는 당신은 npm이 무엇인지 모른다면 빠르게 배우는 Node.js와 NPM 설치부터 개념잡기 포스트를 참고하자. 자! 이제 설치를 해보자. 먼저 적당한 경로에 Webpack_Project라는 이름의 프로젝트 폴더를 생성하고 해당 폴더에서 명령 프롬프트를 실행하여 webpack을 설치하자.

Web front-end build tool에는 여러 가지가 있다. 이러한 build tool은 단순히 소스를 묶고 컴파일하고 압축하는 단순한 형태에서 벗어나 하나의 기술로 자리잡혔다. 이 build tool들을 활용함으로써 우리가 진행하는 프로젝트에 엄청난 시너지를 안겨 줄 수 있다. 수많은 build tool 중 이 포스트에서는 **떠오르는 build tool인 webpack**에 대한 소개와 프로젝트를 진행하면서 왜 Build Tool이 필요한지 포스팅하겠다.

node.js와 npm 기초 완벽 가이드!! node.js와 npm을 설치해보고 개념도 잡아보자. 그리고 더 나아가 IntelliJ에서 npm을 어떻게 사용하는지 알아보자. node.js와 npm은 웹 개발에 종사하고 있는 개발자라면 웬만해서는 알만큼 중요한 기술 중의 하나이다. 많이 들어보기도 했을 것이다. 이와 관련된 포스팅도 많고 정보도 많으니까. 그럼 node.js와 npm이 무엇인지 알아보고 설치를 진행해 보자.

hexo와 github page를 이용하여 만든 블로그에 아름다움을 입혀보자. hexo는 jeykyll과 마찬가지로 블로그에 테마를 입힐 수 있다. hexo와 github page에 테마를 입히는 데 어려움은 없지만 테마가 개발자 개개인이 오픈소스로 만들어 제공하기 때문에 테마마다 사용이나 설정법이 약간 다를 수 있다.

Jekyll보다 쉬운 hexo와 github page를 이용하여 블로그를 쉽고 빠르게 만들어보자. github page는 Jekyll과 많이 사용되지만 hexo가 Jekyll보다 더욱 쉽고 빠르게 블로그를 만들 수 있다.블로그를 호스팅해주는 포털 사이트는 많지만 이번 포스팅에서는 hexo와 github page를 이용하여 블로그를 만드는 방법을 적어보겠다. github page는 Jekyll과 많이 사용되지만 hexo가 Jekyll보다 더욱 쉽고 빠르게 블로그를 만들 수 있다.
자세한 설명은 건너뛰고 Hexo와 Github io로 시작하는 블로그 만들기 바로 시작하자.

지금까지의 Tutorial을 통해 Mocha에 대해서 어느 정도 인지하고 습득하였다. 아직도 Mocha에 대해 애매모호한 기분이 들거나 뭔가 아쉬움이 남는다면 다시 돌아가 JavaScript 단위 테스트 프레임워크 - Mocha부터 살펴보도록 하자.이제 지금까지 배운 내용을 토대로 실제로 Mocha를 가지고 TDD를 진행해 보자. 이 Tutorial을 추가한 이유는 두 가지로 분류하였다.

개발자들은 자기가 사용하는 IDE가 있을 것이다. IDE를 사용하는 이유는 더 편리하기 때문이다. 당연하다. bash, nodepad 보다는 훨씬 편하니까. 나 역시 IntelliJ를 사용하고 있다. 이 IntelliJ에서는 Mocha를 좀 더 다루기 쉽게 Plug-in을 지원하고 있다. IntelliJ뿐만 아니라 Webstorm 등의 JETBRAIN 제품군에서 지원하고있다.이번 Tutorial은 IntelliJ에서 Mocha를 손쉽게 사용하는 방법을 배워보도록 하겠다. JETBRAINS 제품군을 사용하지 않는다면 해당 Tutorial은 건너 뛰도록하자.

이제 Mocha의 기본적인 사용법을 모두 터득하였다. 지금까지 배운 것만으로도 어느 정도의 Test가 가능하다. 하지만 우리가 항상 개발할 떄에 Framework를 찾는 이유는 무엇인가 개발을 할 때 손쉽게 개발하기 위해서이다. Mocha 역시 옵션을 조정하여 좀 더 편리하게 사용할 수 있는데 이번 Tutorial에서는 이 옵션에 대해서 알아보겠다.

Step 01: Hello World!부터 시작으로 지금까지 우리는 $ mocha 명령을 통해 터미널에서 실행하였다. Mocha는 터미널 뿐만 아니라 gulp의 task를 통해 실행도 가능하지만, 이 밖에도 브라우저에서 구동되도록 지원하고 있다.