[Vue.js] 개발환경 구성 (vs code, node, npm)_ch.2

목차

• Visual Studio Code 설치
• Node.js 설치
• NPM(Node Package Manager) 설치
• Vue 개발을 위한 유용한 vs code Extension 설치

 

 

 

Vue.js 개발을 위한 개발환경을 구성하도록 하겠다. 

 

 

 

Visual Studio Code 설치

https://code.visualstudio.com 

Visual Studio Code - Code Editing. Redefined

자신의 OS에 맞는 vs code 설치 파일을 다운받는다. 

 

 

Node.js 설치

원래 자바스크립트는 클라이언트(브라우저)에서 동작하는 언어이다. Node.js는 서버에서 자바스크립트를 동작할 수 있도록 해주는 환경이다.

Vue로 클라이언트 프로그램을 개발하기 위해서는 수많은 라이브러리(패키지)가 필요하다. 이를 빠르게 설치하고 적용하기 위해서는 Node.js가 설치되어야 한다. 

 

https://nodejs.org

Node.js

 

자신의 OS에 맞춰 다운로드하고 설치 파일을 실행한다.  

 

터미널에서 node -v 명령어를 입력하면 설치되어 있는 Node.js 버전을 확인할 수 있다. 

 

 

NPM(Node Package Manager) 설치

NPM은 Node.js 기반의 자바스크립트 오픈소스를 등록하고 간단한 명령어를 통해 설치하여 사용할 수 있도록 해주는 패키지매니저이다. 

앞서 Node.js 설치하면서 NPM은 자동으로 설치되었다. 

터미널에서 명령어 npm -v를 입력해보면 npm 버전을 확인할 수 있다. 

 

 

Vue 개발을 위한 유용한 vs code Extension 설치

Vue 개발을 좀 더 편리하게 할 수 있도록 vs code 확장 프로그램을 설치할 수 있다. 

vs code의 좌측 Extensions 메뉴에서 검색창에 vue를 입력하면 관련 다양한 확장 프로그램이 나온다. 

 

Vetur

Vue의 프로그래밍 문법에 맞는 Syntax Highlighting을 지원한다. 문법에 대한 가이드를 제공하며, 코드 실행 전 문법에 맞지 않는 오류는 물론 잠재적으로 문제가 될 수 있는 코드에 대해 알려준다.

 

Debugger for Chrome

Chrome 브라우저 개발자 도구처럼 vs code 안에서 디버깅을 할 수 있도록 해준다.

 

Prettier - Code formatter

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

 

 

 

 

 

 

※ 출처 고승원, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭, p30-41.