VSCode로 뷰(Vue.js) 개발 환경 구축하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

---

 

Vue.js 개발하기 전, 개발 환경을 구축하는 작업을 먼저 진행합니다.

설치된 사항이 있다면 생략 후 다음 단계를 진행하시면 됩니다.

 

---

VSCode 설치하기

개발을 진행할 텍스트 에디터(Text Editor)이자 코드 편집기를 설치하는 과정입니다. 

설치해야하시는 분들은 아래 링크를 참조하여 진행해주세요.

https://logs-jejustone.tistory.com/100

 

---

Node.js 설치하기

참고 사항으로 Node.js 설치 시 npm도 함께 설치됩니다. 

 

1. Node.js 공식 사이트로 접속하여 OS에 맞게 Installer를 다운로드합니다. 

• 주소: https://nodejs.org/ko/download/

다운로드 | Node.js

LTS와 Current(현재 버전)이라는 두 개의 탭이 존재하지만 저의 경우 LTS로 설치하였습니다. 

다운로드된 Installer의 파일명은 'node-v18.12.0-x64.exe'였습니다. 

 

 

2. 다운로드된 Installer를 클릭하여 프로세스에 맞춰 설치를 진행합니다.

 

3. 설치가 정상적으로 되었는지 VSCode 내 Terminal에 아래 명령어를 입력하여 확인합니다. 

• 명령어: npm -v (npm 설치 버전 확인)

 

---

Vue-Cli 설치하기

Vue 개발 환경을 설정해주는 도구를 설치하는 과정입니다.

Vue-Cli를 이용하면 개발 환경 구축 후 세부적으로 설정해야 하는 폴더 구조, lint, build, 라이브러리, webpack 설정에 대한 고민의 시간을 덜 수 있어 Vue.js 개발 시 필수적으로 설치해야 하는 항목입니다. 

 

1. 설치한 VSCode에서 터미널(Terminal) 창을 엽니다. 

• 방법:
  • 키보드: Ctrl + Shift + `
  • 마우스: VSCode 상단의 Terminal 클릭 > New Terminal 클릭

 

2. Vue-Cli 설치 명령어를 터미널에 입력하고 엔터를 클릭합니다.

• 명령어: npm install -g @vue/cli

 

3. 설치가 완료되었는지 터미널에 표시된 메시지를 통해 확인합니다.

정상적으로 설치가 진행되었다면, 터미널에 빨간색이 아닌 어느 정도의 시간이 소요되었는지 등의 안내가 아래와 같이 표시됩니다.

 

혹시라도 정상적으로 설치가 되지 않았다면, 빨간색으로 오류 메시지가 표시됩니다. 자세한 해결 방법은 아래 글에서 다루겠습니다.

https://logs-jejustone.tistory.com/3

 

---

VSCode Extension 설치하기

VSCode를 사용하면서 Vue.js의 개발 편의성을 높여주는 확장 프로그램을 설치하는 과정입니다.

저의 경우 총 8개의 확장 프로그램을 설치하였습니다.

 

1. 설치한 VSCode에서 Extensions 메뉴로 접근합니다.

• 방법:
  • 키보드: Ctrl + Shift + X
  • 마우스: 좌측 메뉴에 위치한 Extensions 메뉴 클릭 

 

2. 아래 Extensions 항목을 검색하여 Install 버튼을 클릭하여 설치합니다.

Extension 별로 설치 목적이자 사용하는 이유에 대해서 간략하게 써놓았으니 필요한 사항에 대해서만 설치해도 무방합니다.

 

• Vetur: '. vue' 파일의 코드 하이라이팅
• ESLint: 자바스크립트(Javascript) 문법 검사기
• Night Owl : VSCode 테마 
• Material Icon Theme: VSCode 디렉터리 목록에서 보이는 파일/폴더 아이콘으로 설정
• Live Server: 소스의 내용을 실시간으로 서버로 띄워 화면에 표시하는 도구
• Prettier: 정해진 코딩 스타일로 변환해주는 도구
• Auto Close Tag: 태그를 자동으로 닫아주는 도구 
• Atom Keymap: Atom에서 자주 사용하는 바로가기 키 설정

 

---

Vue.js Devtools 설치하기

Vue.js로 개발한 화면에 대해서 디버깅 혹은 테스트할 때 사용하면 좋은 도구를 설치하는 과정입니다.

 

1. 브라우저(Browser)를 엽니다.

• 브라우저 종류: 크롬(Chrome), 파이어폭스(FireFox), ... 

 

2. Vue.js devtools를 검색하거나 아래 링크를 통해 설치 사이트로 접속합니다.

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

 

3. 아래 이미지를 참고하여 우측에 위치한 'Chrome에 추가' 버튼을 클릭합니다. 

    (저의 경우 크롬으로 진행하였기 때문에 크롬으로 표시되는 것 뿐, 다른 브라우저로 접속시 다른 브라우저 명으로 표시될 거에요.)

 

4. 브라우저의 확장프로그램 아이콘 혹은 확장프로그램 아이콘의 옆 쪽에 Vue.js의 아이콘이  표시되었다면 정상적으로 설치가 완료되었습니다.

 

---

Git 설치 및 계정 연동하기

Vue.js 개발 환경을 구축할 때 Git은 필수적이지는 않습니다. 프로젝트나 소스코드 버전 관리 및 보관을 진행하고 싶은 분이 아니라면 본 과정을 생략해도 됩니다.

참고하여 설치하실 분들은 아래 링크를 참조하여 진행해주세요. 

https://logs-jejustone.tistory.com/9