Node 설치

자바스크립트가 브라우저에서만 사용되는 언어에서 스택오버플로우 기준 가장 많이 사용되는 언어 1위가 가장 큰 계기는 CommonJS  스펙이다.  남이 만든 모듈을 가져오는 require, 그리고 자기가 만든 모듈을 다른 모듈에서 사용하도록 배포하는 export 를 포함한 모듈을 정의한 스펙이 CommonJS 스펙이다. 자바스크립트가 서버에 사용되는 대표적인 예가 NodeJS이고 심지어 하드웨어까지 사용되고 있다.

기존 프런트엔드 개발방식인 index.html 화일에 자바스크립트를 script 태그로 포함시키는 형태는 글로벌 변수 문제, 의존성 문제를 일으키게 된다. 따라서 이제 프런트엔드 개발에는 모듈 방식의 개발이 필요하게 되었고 Node에 포함된 npm 이라는 Node Package Manager 라는 패키지 관리자를 통해서 모듈 방식으로 개발하게 된다. 이제 웹 개발이 아니라 프로젝트 형태로 프런트엔드 개발을 하게 되었고 웹도 하나의 애플리케이션인 웹앱으로까지 발전하게 되었다.

예를 들어, 기존 방식으로 bootstrap을 사용하기 위해서는 index.html에 jquery.js와 bootstrap.js를 script태그에 차례대로 링크를 걸게 된다. 그런데, 만일 링크순서를 jquery보다 bootstrap을 앞에 링크 걸면 어떻게 될까? 그러면 bootstrap.js를 실행하면서 $를 찾을 수가 없다가 에러가 나게 된다.  모든 자바스크립트를 글로벌로 설치하게 되는데,  jquery를 먼저 로딩해야 그 다음 bootstrap이 실행가능하게된다.

이것을 만일 npm 방식으로 개발하면 bootstrap을 사용하기 위해서는 npm install –save bootstrap으로 설치를 하게 된다. bootstrap 라이브러리는 jquery를 이용해서 개발이 되었는데 jquery 라이브러리가 없으면 에러가 발생할까? 그렇지 않다. bootstrap이 jquery에 의존한다는것을 알게 되면 jquery를 먼저 설치하고 그 다음에 bootstrap을 설치하게 된다. 즉, 의존성 관리가 된다. –save의 의미는 해당 라이브러리를 package.json에 기록하게 된다. 웹을 이제 앱형태로 프로젝트형태로 개발하게 될때 프로젝트의 설정 정보, java라면 pom.xml 과 같은 역할을 하는게 npm에서 관리하는 package.json 화일이다.

Node는 https://nodejs.org/ko/download/ 에 가서 다운로드 받는다 Node를 설치하면 npm도 자동으로 포함되어서 설치가 된다.

 

Git  설치

Git은 이제 개발의 필수품이 되었다.  https://git-scm.com 에서 설치하자.

 

개발툴: Webstorm

무료툴 IDE로는 Visual Studio Code가 많이 쓰이고 상용 IDE 툴로는 WebStorm이 가장 많이 사용된다.  http://www.jetbrains.com/webstorm/ 으로 가서 프로그램을 설치한다.

 

angular cli 설치

cmd 창을 띄우고 다음 명령어를 실행한다.

 

index.html에 링크를 거는 방식에서 프로젝트 형태의 프런트엔드 개발형태로 발전하도록 기여한것중에 하나가.  빌드 시스템이다. 초기에 grunt, gulp 형태의 빌드 시스템을 사용하여, 자바스크립트를 minify하고 하나로 합치고 production으로 빌드를 해주며, Sass 파일을 컴파일하고 minify하고 빌드를 해주는 역할을 수행했다. 그러다가, Webpack이 등장하면서 웹페이지에 필요한 모든 요소들인 자바스크립트,  스타일시트, html 을 모두 개별 모듈로 처리해주는 모듈 번들러가 대세로 자리잡게 되었다.

angular-cli도 웹팩으로 만들어진 유틸리티이다.