[Day 1] SpringBoot + Vue.js 개발환경 세팅

이거 세팅하는데 3일이 걸린 사람이 있다? 뿌슝빠슝 (그게 나야 둠빠둠빠 두비두밥)d

Vue와 SpringBoot에 문외한인 사람이 쓰는 글이기 때문에 처음부터 써보고자 한다.

 

※이 글은 Window 기반으로 작성되었음

 

1. SpringBoot Settin

 

1-1. JDK 설치

https://www.oracle.com/kr/java/

Java Software

자바 개발 환경을 구축하기 위해 JDK를 설치한다.

 

1-2. 환경변수 설정

 

JAVA_HOME (추가) : JDK가 설치된 디렉토리

CLASSPATH (추가) : %JAVA_HOME%\lib

PATH (편집) : %JAVA_HOME%\bin

 

1-3. STS 설치

https://spring.io/tools

Spring | Home

에서 자신이 사용하는 tool과 운영체제에 맞는 실행파일을 다운로드한다.

나는 익숙한 Eclipse로 다운로드 받았다.

 

1-4. SpringBoot Project 생성

Spring Starter Project를 선택하여 SpringBoot 프로젝트를 생성한다.

위와 같이 설정을 완료하였다.

꼭 maven, gradle 둘 중 택일을 해야하는 것은 아니니 익숙한 것으로 선택하면 될 것 같다.

(선택사항)

SpringBootDevTools

Lombok

Oracle Driver

Spring Web

을 선택하여 dependencies를 추가한다. 여기서 추후에 필요하다면 pom.xml에서 알아서 추가하면 되기 때문에

이 단계에서 꼭 무언가를 추가해야할 필요는 없다고 한다.

선택을 다 했다면 Finish를 눌러 Project를 생성한다.

 

2. Vue.js Setting

 

2-1. VSCode 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

(선택사항)

VSCode를 설치 후, Extensions에서

Vue3 Snippets

Vetur

HTML CSS Support

를 설치한다.

 

2-2. Node.js 설치

https://nodejs.org/ko/download/

다운로드

어디서는 LTS가 안정적이고 어디서는 최신버전이 안정적이라고 하는데, 나는 LTS를 다운로드 받았다.

헌데 Windows Installer를 눌러 바로 다운로드를 받으면 64bit가 아닌 32bit 파일이 다운받아져서 밑에서 64bit 파일을 손수 받았다. 내 컴퓨터 64bit 맞는데 왜...

 

node.js를 설치하면 기본적으로 npm도 설치가 완료 된다.

 

2-3. Vue-cli 설치

cmd를 관리자 권한으로 실행한다.

npm install -g @vue/cli

를 입력하여 vue/cli를 설치한다. 이 때 -g 명령어를 통해 전역적으로 설치하였기 때문에

설치 디렉터리는 중요하지 않다.

 

2-4. Vue Project 생성

workSpace를 Open하고, terminal을 오픈한다.

/* 생성한 프로젝트로 이동 */
cd VueSpring

// Vue Project 생성
vue create vue --no-git
/*
vue create vue프로젝트명 git미생성
*/

을 입력한다.

 

나는 Vue3 Default로 생성하였다.

 

cd vue

npm run serve

하여 생성한 vueProject로 이동한다.

 

server run을 통해서 정상적으로 프로젝트가 생성되었는지 확인한다.

Vue 초기화면이 나타났다면,

VSCode terminal에서 Ctrl + C, y를 차례로 입력하여 server를 off한다.

 

 

2-5. vue.config.js 수정

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: "../src/main/resources/static",
  indexPath: "index.html",
  devServer: {
    port: 8081,
    proxy: "http://localhost:8080"
  },
  chainWebpack: config => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");
  }
})

outputDir : 빌드된 파일이 생성되는 디렉토리

indexPath : 생성된 파일 중에서 진입점 파일

port : vue 개발 서버 port

proxy : SpringBoot (backend 내장 was 주소)

 

현재 나는 SpringBoot에서 따로 port를 지정하지 않았기 때문에 default port인 8080으로 지정이 되어있다.

vue 개발 port는 어디서는 맞춰야 한다고 하고 어디서는 다르게 해야한다고 하는데, 나는 다르게 지정했다.

빌드파일 디렉토리를 지정하지 않으면 vue Project 내 dist 폴더 내에 빌드파일이 생성된다. 하지만 나는 SpringBoot 프로젝트에 정적파일(빌드파일)을 생성해야 하기 때문에 SpringBoot 내 폴더로 디렉터리를 따로 지정해준 것이다.

 

npm run build

terminal에 build 명령어를 입력하여 build 파일을 생성한다.

 

빌드파일 생성이 완료되면 스프링 프로젝트를 새로고침한 뒤, 내장 was를 실행시킨다.

마찬가지로 Vue 초기화면이 보인다면 세팅 완료!

 

 

↓ Error: Source and destination must not be the same. 가 난다면 확인

module.exports = {
  outputDir: "../src/main/resources/static",
  indexPath: "../static/index.html",
  devServer: {
    proxy: "http://localhost:8080"
  }
};

라고 알려주던 chatGPT... 하지만! 나는 이렇게 했음에도 불구하고 계속해서 build Complete 후 에러를 뱉어냈다.

아무리 구글링을 해봐도 알 방도가 없었다가 결국 chatGPT의 도움을 받아 해결했다.

 

해결방법은 outputDir / indexPath의 경로를 달리해야한다는 것!

 

이유는 다음과 같다.

outputDir과 indexPath가 같은 경우 에러가 발생하는 이유는 outputDir이 빌드된 파일이 생성되는 디렉토리를 의미하고, indexPath는 생성된 파일 중에서 진입점 파일을 의미합니다. 따라서 outputDir과 indexPath가 같은 디렉토리를 가리키게 되면 빌드된 파일이 이미 생성된 상태에서 다시 그 파일에 덮어쓰기를 하려고 하기 때문에 발생하는 것입니다.

예를 들어, outputDir이 dist이고, indexPath가 dist/index.html로 설정되어 있다고 가정해 봅시다. 이 경우 npm run build 명령으로 Vue.js 프로젝트를 빌드하면 다음과 같은 일이 일어납니다.

dist 디렉토리가 생성됩니다.
Vue.js 애플리케이션의 컴파일된 파일들이 dist 디렉토리 내에 생성됩니다.
dist/index.html 파일이 생성됩니다.
위의 과정에서 outputDir과 indexPath가 같은 경우, Vue.js 애플리케이션의 컴파일된 파일들이 이미 dist 디렉토리에 생성되어 있고, dist/index.html 파일을 생성하려고 하게 됩니다. 이때 같은 파일을 대상으로 덮어쓰기를 시도하게 되어 Error: Source and destination must not be the same. 에러가 발생합니다.

따라서 outputDir과 indexPath는 서로 다른 값을 가리키도록 설정해야 합니다.

 

 

따라서 2-5 처럼 outputDir과 indexPath를 다르게 설정해주거나, 

아니면 indexPath를 설정하지 않는 것이 방법이다... ^^....내 3일........