Part1. 개발환경 설치

개발관련/Spring Boot, Vue, Mysql

Part1. 개발환경 설치

개념원리 2021. 6. 22. 20:06

이 글은 Spring Boot + Vue + Mysql을 이용한 간단한 CRUD를 해보는것을 목표로 작성 합니다.

학습을 목적으로 정리한 글이라 틀린 부분이 있을수 있습니다.

있으면 댓글 부탁 드립니다.

개발환경 : STS 4.11.0

Mysql

1. STS 설치

IDE는 Eclipse에 Spring Plugin이 기본 설치가 되어 있는 STS로 결정 하였습니다.

https://spring.io/tools 에 접속하여 각자 OS에 맞는 STS를 설치해줍니다.

버튼을 누르면 Jar파일이 다운로드가 됩니다.

JAR파일을 더블 클릭 하거나

CMD창에서 "JAVA -jar 파일명" 하면 압축이 해제 됩니다.

sts-4.11.0.RELEASE 폴더 안에 SpringToolSuite4.exe 파일을 실행 해보면 STS가 실행 되는것을 확인 할 수 있습니다.

1.1 JDK 설정

STS4버전 이상 부터는 OpenJDK13버전부터 실행이 가능합니다.

그래서 STS내부에 STS구동을 위한 JRE가 내장 되어 있습니다.

나는 JDK1.8을 이용하여 개발 할것이므로 JDK 설정을 해주도록 하겠습니다.

- Windows > Preferences > Installed JREs 에서 ADD버튼을 눌러줍니다.

Directory를 눌러 JDK경로를 설정 해준 후 Finish버튼을 클릭한다.

내가 설정한 JDK를 체크 해준 후 Apply And Close를 해줍니다.

2. Vue 설치

Vue를 설치하기 위해서는 NPM(Node Package Manager)을 이용하여 설치를 해야 하기 때문에

Node.js를 설치 해야 합니다.

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

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

각자 OS에 맞는 버전을 설치해주세요.

다운 받은 node-v14.17.1-x64.msi 파일을 실행 해줍니다.

Next버튼을 연타하며 Default로 설치를 하였습니다.

cmd창을 열어 아래 명령어를 실행 해주자.

npm install -g @vue/cli

4.5.13버전이 설치 된것을 확인 할 수 있다.

vue --version

3. Spring Boot 프로잭트 생성 및 Vue 생성

3.1 Spring Boot 프로잭트 생성

Create new Spring Starter Project를 클릭해준다.

Spring Data JPA , H2 Database, Mysql Driver 를 추가 해주었다.

마지막으로 Spring web을 추가 하고 더 필요한것은 나중에 추가해주기로 하자.

Finish 버튼을 누르면 "curd"라는 Spring Boot 프로잭트가 생성이 됩니다.

3.2 Vue 생성

CMD창에서 방금 생성한 프로잭트까지 들어와줍니다.

vue create front-end

설치가 끝나고 파랑색 명령어를 실행 합니다.

cd front-end
npm run serve

http://localhost:8080/ 에 접속 해보면 vue가 정상적으로 설치가 되었음을 확인 할 수 있습니다.

이제 다시 STS로 돌아와서

프로잭트를 refresh해보면 front-end 폴더가 생성 된것을 확인 할 수 있습니다.

3.3 vue Build

front-end 폴더는 vue 가 있는 폴더이고 vue에 있는 내용을

Spring - Boot에서 실행 될 수 있도록 설정을 잡아주도록 합니다.

front-end에서 파일을 하나 생성 해주겠습니다. (vue.config.js)

vue.config.js파일의 내용을 채워줍니다.

module.exports = {  
  outputDir: "../src/main/resources/static",  
  indexPath: "../static/index.html",  
  devServer: {  
    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은 npm run build로 빌드 시 파일이 생성되는 위치

indexPath는 index.html 파일이 생성될 위치

devServer는 Back-End , 즉 Spring Boot의 내장 was의 주소입니다.

아까 npm run serve 명령어로 실행 시켰던 vue 서버를 종료 시켜 줍니다.

Ctrl + c 하면 종료가 됩니다.