현재 진행중인 졸업과제의 프론트엔드 파트는 Vue.js를 통해 진행하게 되었다.
진행을 하며 공부한 것을 기록하고 디버깅 과정을 기록하려 한다.

Vue.js란?

Vue.js란 간단하게 정의하자면, javascript framework 이다.
javascript 기반으로 동작하는 만큼, 당연히 프론트엔드 개발에 주로 사용된다.
React, Angular 등과 함께 실제로 많이 사용되는 SPA 개발 프레임워크이다.

왜 Vue.js인가?

  • 매우 직관적이며, 배우기 쉽다.
  • React, Angular에 비해 가볍고 성능이 빠르다.
  • React와 Angular의 장점 모두를 채택한 프레임워크이다.
    • React : Virtual DOM
    • Angular : Data binding
  • Component을 통해 재사용성을 극대화 해 개발시간을 단축하기 용이하다.

Node.js 설치

일단 Vue.js가 javascript 기반의 프레임워크이기 때문에, Node.js가 필요하다.
Node.js는 javascript를 실행할 수 있는 런타임 환경을 제공하기 때문에 설치해야 한다.

Node.js : https://nodejs.org/ko
공식 홈페이지에서 맞는 OS를 고르고, 안정적인 18.16.0 LTS 버전을 사용한다.
노드

Visual Studio Code에서의 사용

Visual Studio Code에서 임시로 만든 폴더를 열고, 터미널을 연다.
만약 Node.js가 정상적으로 설치되었다면, 아래의 사진과 같이 version이 뜰 것이다.
vsc 노드

이제 Vue를 설치할 차례이다.
아래와 같이 npm install vue를 통해 vue를 설치할 수 있다.
뷰 설치

Vue는 편리하고 빠른 Application 개발을 위해 자체적으로 CLI를 제공하고 있다.
아래와 같이 npm install -g @vue/cli 명령어를 통해 vue cli도 설치한다.
뷰 cli설치

vscode에서는 아래와 같은 유용한 Extension들이 제공되니 꼭 설치해주자!

  • Vetur : 구문 강조 등의 기능 지원
  • Vue 3 Snippets : 코드 자동완성 기능 지원 vetur
    Vue Snip

Vue project 생성

이젠 실제로 설치한 vue 프로젝트를 생성해 볼 시간이다.

아래와 같이 powershell이나, zsh이 아닌 Command prompt로 터미널을 옮긴다.
cmd

이후, 터미널에 vue -V를 입력했을 때 아래와 같이 출력이 되어야 한다.
vue 버전

이제 vue project를 생성하는 과정을 진행해보자.
vue create [폴더 이름] 명령어를 입력하면, 자동으로 vue project가 생성이 된다.
단, Vue 3을 사용할 것이기 때문에 아래의 사진과 같이 Vue 3에서 엔터 키를 입력해서 진행한다.
ㅋ뷰 크레이틍

아래와 같이 생성에 성공했다는 문구가 출력되면 성공적으로 생성된 것이다.
생성 성공!

이제 생성된 폴더를 File Open - Open Folder를 통해 vscode에서 다시 열어주어야 한다.
그 이유는 경로가 해당 폴더 내에 있어야 npm run이 동작하기 때문이다.
경로를 이동한 뒤, 이전과 같이 powershell이나 zsh이 아닌 Command prompt를 열어주자.
이제 아래와 같이 npm run serve를 입력해주면?
npm run serve

아래와 같은 문구가 출력되면 성공적으로 javascript runtime이 실행된 것이다.
run성공

이제 위 문구에서 http://localhost:8080/ 부분을 Ctrl + 마우스 클릭 해주면
아래와 같이 자동으로 웹 브라우저가 켜지며, 성공적으로 프로젝트가 생성된 것이다.
펻