#2 Vue 프로젝트 생성을 위한 개발환경 구축-1(VSCode, Node.js)

vscode 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

VSCode(Visual Studio Code)는 IDE(통합 개발 환경:Integrated Development Environment)로서 플러그인 설치를 통해 개발 생산성을 극대화 할 수 있다.

 

1) VSCode 설치파일 다운로드

---

위 링크를 따라가면 VSCode를 설치하는 화면이 나오고 Download for Windows 혹은 Download for Mac을 클릭하게 되면 별도의 설치 과정이 필요없는 실행파일이 다운로드 된다.

VSCode 설치파일 다운로드

 

2) VSCode 설치파일 실행하기

---

VSCode 공식 홈페이지에서 아래와 같은 설치 파일을 다운로드 받은 후 실행을 하고, 아래와 같은 방식으로 설치를 하게 되면 쉽게 Vue 개발을 위한 IDE 설치가 완료된다.

 

 

3. VSCode 확장 프로그램 설치

---

VSCode 파일을 실행한 후 왼쪽 목록창 마지막 혹은 (ctrl + shift + X)를 누르게 되면 확장창으로 넘어가게 된다.

검색창에 원하는 확장 프로그램을 검색하면 프로그램 설치가 가능해진다.

 

1) Vetur

Vutur 확장 프로그램은 .vue 확장자의 Syntax Highlighting을 지원하게 해주는 프로그램이다. Vue 프로그램 코드 작성 시 사용할 수 있는 프로그램 문법에 대한 가이드를 제공한다.

2) Debugger for Chrome

Chrome 브라우저 개발자 도구를 사용하는 것처럼, vsCode 내에서 Chrome 디버깅을 지원해준다.

 

3) Prettier - Code formatter

Vue 프로그램 구현 시 코드 포맷을 지정된 형태로 변환해준다.

 

node.js 설치

https://nodejs.org/ko/

Node.js

Node.js는 확장성 있는 네트워크 애플리케이션 (서버 프로그램) 개발을 자바스크립트로 가능하도록 하는 자바스크립트 런타임 환경이다. 기본적으로 나는 프론트엔드개발을 위하는데 백엔드 서버 프로그램 개발을 위한 Node.js를 왜 다운받는지 의아해 할 수도 있다. 하지만 Vue로 클라이언트 프로그램을 개발하기 위해서는 수많은 라이브러리(패키지)가 필요하고, 이를 빠르게 설치하고 적용하기 위해서 Node.js를 사용할 것이다.

 

 

1) nodejs 설치파일 다운로드

---

nodejs 공식 홈페이지에 들어가게 되면 LTS버전과 현재버전을 다운 받을 수 있다.

처음 개발을 진행하는 사람들은 '최신버전(현재버전)을 다운받는것이 좋지 않을까?' 생각이 들 수 있다. 하지만 두 버전의 용도는 확연한 차이를 가진다.

• 현재버전 : 가장 최신의 버전으로 node.js의 최신 기능을 모두 포함한 버전. 하지만 실험적으로 추가된 버전이 있어 안정적이지 못하며 에러가 발생할 가능성도 있다. 따라서 새로운 기능이 필요한 경우, 혹은 학습을 목적으로 하는 경우 현재 버전을 사용한다.
• LTS(Long Term Suppor) :  일반적인 경우보다 장기간에 걸쳐 버전을 지원받도록 고안된 소프트웨어 버전으로 안정성과 장기지원을 보장받을 수 있다. 새로운 기능이 아닌 안정적으로 node.js를 사용하고자 하는 경우 LTS버전을 사용한다. (현재 글은 LTS 버전을 다운받는다.)

 

2) node.js 설치

---

NodeJs에서 LTS버전의 설치파일을 다운로드 받은 후 파일을 실행하면 간단하게 node.js를 설치 할 수 있다.

 

• Node.js runtime : 노트 런타임
• npm package manager : 노트 패키지 관리자
• Online documontation shrtcuts : 온라인 문서 바로가기
• Add to PATH : 시스템 환경 변수 추가

• Chocolatey, python2, vs build tools 등 설치 (딱히 필요가 없으면 설치 안해도 상관없다.)