[Vue.js] 개발환경 설정

개발자라면 프론트엔드와 백엔드를 구분하지 않고 영역을 끊임없이 넓혀나가야 하지 않을까.

지난 회사에서 다루었던 Vue.js, 이직 후 머릿속 한편 구석에 박아두었지만 다시 꺼낼 때가 된 것 같다.

 

Windows11으로 업그레이드 한 김에 Vue.js 개발환경 설정을 시작해본다.

 

1. Visual Studio Code 설치

.NET 개발자인 나에게 세상에서 제일 익숙한 Visual Studio Code.

Visual Studio에 비해 훨씬 가볍고 다양한 Extension을 지원하는 것이 가장 큰 특징이다.

어떠한 개발 언어든 가볍게 사용하기에 Visual Studio Code만 한 게 없지 않을까.

 

https://code.visualstudio.com/

Visual Studio Code 설치 완료

Windows11로 업그레이드하니 모든 창이 macOS와 같이 동글동글해진 게 귀여우면서도 낯설다.

 

2. Node.js 설치

Vue.js는 사용자 인터페이스와 SPA(Single Page Application)을 빌드할 수 있는 오픈 소스 front-end JavaScript Framework다.

자바스크립트 기반의 Vue.js를 빌드하고 구동시키기 위해서는 runtime 환경이 필요한데 그를 위해 설치해줘야 하는 것이 Node.js이다.

 

무작정 최신 버전을 선택하는 것보다 LTS(Long-term Support) 버전을 선택하는 것이 더 좋으니 참고할 것.

 

https://nodejs.org/ko/

Node.js 설치 완료

 

3. Vue.js 설치

Node.js 설치를 완료하면 npm(node packaged manager)이 자동으로 설치되어 Node.js로 만들어진 package들을 관리해줄 수 있게 된다.

cmd 창을 열어 다음 명령어를 실행해주면 Vue.js의 최신 안정화 버전이 설치된다.

npm i -g vue

Vue 설치 완료

Vue.js는 SPA을 빠르게 구축할 수 있는 공식 CLI(Command Line Interface)를 제공한다.

vue cli를 이용하면 폴더 구조, 빌드, 라이브러리 등 프로젝트의 기본적인 세팅을 대신해준다.

https://cli.vuejs.org/guide/

npm i -g @vue/cli

위의 명령어를 이용해 설치해주자.

Vue CLI 설치 완료

 

4. Visual Studio Code Extension 추가

앞서 언급하였듯 Visual Studio Code의 큰 장점 중 하나는 다양한 extension을 지원한다는 것.

Vue.js 프로젝트를 진행하기 위해서 Vue.js 관련 extension을 설치해주자.

Visual Studio Code

우측 사이드 메뉴 5번째 아이콘이 Extensions(Ctrl + Shift + X)다.

Extensions 메뉴를 클릭하여 Vue.js를 검색해주면 다양한 extension을 확인할 수 있다.

Visual Studio Code

Vue.js Extension Pack을 설치해주었다.

Extension Pack이기에 이런저런 Extension이 설치된 것을 확인할 수 있다.

Visual Studio Code

.vue 파일 내용을 쉽게 알아보기 위해서 Vetur도 설치해주면 좋다.

 

5. Chrome Vue.js devtools 설치

Vue.js에서는 chrome의 확장 프로그램인 Vue.js devtools를 제공해주는데, 이 확장 프로그램을 이용하여 Vue.js 앱을 디버깅할 수 있다.

 

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko 

Vue.js devtools 설치 완료

 

위의 다섯 가지 단계를 모두 거쳤다면 Windows 환경에서 Vue.js를 이용해 프로젝트를 개발하기 위한 준비가 모두 완료되었다.

 

참고자료

https://kr.vuejs.org/v2/guide/

https://v3.ko.vuejs.org/guide/introduction.html