Vue 3 기반 Web App 프로젝트를 진행할 것이다. Vue.js의 기초적인 내용은 다루지 않을 것이지만 필요에 따라 설명을 할 수도 있다. 프로젝트 생성부터 개발 표준 수립 및 공통 기능 개발 등의 Web App 개발 시에 고려해야할 사항들을 모두 다룰 것이다. 그러나 어느 범위까지 정리할지는 결정하지 못했다. 이 프로젝트는 경험을 축적하기 위한 용도이므로 프로젝트를 완료하고 나면 아마도 생각이 바뀔 수도 있을 것이다. 이 글은 수시로 변경될 수도 있다. 그리고 서버에 대한 부분은 자세히 다루지 않는다.

이 글에서는 Spring Boot 프로젝트에서 Font-end 개발을 위해 프로젝트를 생성하고 개발환경에서 서버를 실행한 다음에 브라우저를 열고 HelloWorld 화면을 볼 것이다.

project 생성

Spring Boot App에서 Vue3를 사용하려고 한다. Spring Boot App 프로젝트 루트에서 다음을 입력한다.

yarn create @vitejs/app vue --template vue

다음과 같이 디렉터리가 생성된다.

🗂️ project_root
  🗂️ src
     🗂️ main
        🗂️ java
  🗂️ vue

node_modules 설치

vue 디렉터리로 이동한다.

cd vue

vue 디렉터리에서 다음을 입력하여 필요한 Node 모듈들을 설치한다.

yarn install

프로젝트 테스트

yarn vite를 사용하여 앱을 실행한다.

yarn dev

실행하면 터미널에 다음과 같이 메시지가 출력된다.

  vite v2.4.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 448ms.

브라우저를 열고 다음을 입력한다.

http://localhost:3000/

다음과 같이 화면이 표시될 것이다.