Vue.js single file components 방식으로 개발해보기 01 - Node.js다운로드

Vue.js single file components 방식으로 개발해보기 01

프로젝트 실행 전 Node.js를 통한 사전 작업

 

Node.js의 정의

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼입니다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있습니다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 합니다.

출처 : 위키백과

 

Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임입니다. 이벤트 기반,  Non-blocking I/O 모델을 사용해 가볍고 효율적입니다. 패키지 생태계인 npm(Node Package Manager)은 세계에서 가장 큰 오픈 소스 라이브러리 생테계입니다. 런타임은 프로그래밍 언어가 구동되는 환경입니다. Javascript는 원래 브라우저에서만 존재하는 언어였으나 한계를 극복하고 Node.js가 나왔습니다.

출처 : 블로그 링크

 

Vue 프로젝트에서 Node.js가 필요한 이유

1. ES2015+ (ES6) 문법을 사용하였을 경우 ES5문법으로 트랜스파일(Transpile) 해주는 Babel을 사용할 수 있습니다.

(SASS 등 트랜스파일(Transpile) 이 필요한 것들을 사용할 수 있게 됩니다.)

2. Single File Components를 사용하기 위해서 빌드 도구가 필요합니다.

- 빌드 도구를 사용하기 위해서 Node.js가 필요합니다.

- Vue-loader를 통해 Vue에서만 사용되는 태그들이 HTML, CSS, JS와 같이 변환, 분리되어 실행 가능하게 됩니다.

Vue에서 컴포넌트 템플릿을 정의하는 방법

 

Node.js 다운로드 방법

1. 사이트에 접속하여 자신의 OS에 맞는 버전을 다운로드 합니다.

https://nodejs.org/ko/download/

- LTS버전으로 다운로드하면 됩니다.

2. 다운로드가 완료 되었는지 확인 하는 작업을 합니다. (Windows 기준의 예시)

-  명령 프롬프트(cmd) 창을 열어 확인하도록 하겠습니다. 아래 순서대로 진행해주세요.

 

-  윈도우 검색창에서 [ 명령 프롬프트 or cmd ] 검색

 

 

- 검색창이 없다면 위와 같이 진행합니다.

[윈도우 버튼 클릭 후 > 마우스 우 클릭 > 실행 > cmd 입력 > 확인]

or

[실행 창 단축키(Window키 + R) > cmd 입력 > 확인]

 

- 명령프롬프트(cmd) 창이 오픈되면 아래와 같이 입력해줍니다.

[node -v] or [node --version]

 

다운로드가 완료되면 버전정보가 나오고,

실패하면 node는 내부 또는 외부 명령, 실행할 수 없는 프로그램--의 안내가 나온다.

 

# NPM(Node Packaged Manager)이란?

Node js 다운로드 시 자동으로 포함되어 다운로드 됩니다. 명령 줄 클라이언트, 공개 패키지와 지불 방식의 개인 패키지, 온라인 데이터 베이스로 이루어져 있으며 단 몇줄의 명령어로 모듈 설치, 활용 가능합니다. Node.js에서 사용 가능한 모듈들을 패키지 하여 모아둔 것으로 라이브러리가 필요할 경우 npm을 사용해 다운로드 받을 수 있습니다. 명령프롬프트창(cmd)에서 'npm help'를 작성하여 보면 npm에 사용할 수 있는 명령어들이 나오는데,  'npm install 패키지명' 이라고 명령어를 입력할 경우 패키지명에 해당하는 모듈을 다운로드 받을 수 있습니다.