[Vue.js] Vue + SpringBoot + Mysql 를 이용한 Todo 구현(1) - 프로젝트 구성하기

Vue + SpringBoot + Mysql 를 이용한 Todo 구현(2) - 프로젝트 환경 설정하기

Vue + SpringBoot + Mysql 를 이용한 Todo 구현(3) - Todo API 개발하기(1)

Vue + SpringBoot + Mysql 를 이용한 Todo 구현(4) - Todo API 개발하기(2

Vue + SpringBoot + Mysql 를 이용한 Todo 구현(5) - Todo 화면 개발하기(1) - 컴포넌트 구성

Vue + SpringBoot + Mysql 를 이용한 Todo 구현(6) - Todo 화면 개발하기(2) - Vuex 적용

(끝) Vue + SpringBoot + Mysql 를 이용한 Todo 구현(7) - Todo 화면 개발하기(3) - 화면 개발

---

블로그를 하면서 여러 개의 글을 작성하였는데, 그중에서도 vue.js 와 springboot 연동하는 글이 제일 많이 봐주셨다.

매번 다른 글도 작성하면서 간단하게 db까지 연동하는 글을 작성하고자 하였지만, 이직과 다른 공부 때문에 진행하지 못하였다.

이전에 한번 vue 강의도 듣고, jpa 강의도 들으면서 해당 내용들을 사용해서 간단하게 프로젝트를 만들어보았고, 이번 기회에 해당 내용을 정리하여 다시 작성해보고자 한다.

일단 블로그 주인은 Backend 개발자이기 때문에 Vue.js에 대한 지식이 얕고 이상하거나 틀린 부분이 많을 수 있으니 이점은 양해 부탁드립니다.(사실 Backend도... 혹여나 틀리거나 이상한 부분은 언제든지 말씀해주세요 ㅠㅠ)

---

해당 프로젝트 소스는 여기서 확인 가능합니다.

0. 프로젝트 구성 및 화면

- 최종 프로젝트의 구성과 화면은 아래와 같습니다.

- 프로젝트 구성은 하나의 폴더 안에 backend, frontend 각각의 폴더를 나누어 구성하였습니다.

- 퍼블리싱은 비슷한 강의를 들으신 개발자분의 블로그를 보다가 잘만드셔서(너무 잘 만드셨다...) 적용시켰습니다.

- 개발환경은 아래와 같습니다.

• IDE : IntelliJ IDEA
• OS : Mac OS
• Frontend : Vue.js(4.5.12)
• BackEnd : SpringBoot(2.4.4) / Gradle(6.8.3)
• DataBase : Mysql
• Java11

1. 프로젝트 생성하기

- 먼저 프로젝트를 진행하고자 하는 곳에 폴더를 만들어줍니다.(여기서는 vue_springboot_mysql 로 작성하였습니다.)

1-1. FrontEnd(Vue.js) 생성하기

- intellij를 실행시켜 해당 폴더에서 열도록 합니다.

- 인텔리제이에서 터미널을 열고, 아래 명령을 통해서 vue 프로젝트를 생성하겠습니다.

#shell
npm install -g @vue/cli
vue create frontend

- vue  프로젝트 생성 시에는 default로 설정하여 생성하였습니다.

- 정상적으로 생성되었다면, Frontend 폴더구조는 아래와 같습니다.

 

1-2. BackEnd(SpringBoot) 생성하기

- 기본 폴더에서 backend 라는 폴더를 생성합니다.

- 인텔리제이를 통해서 springboot 프로젝트를 생성합니다.

- 기본적인 설정은 아래와 같이 진행하고, 필요한 dependency 는 따로 추가하도록 하겠습니다.

- 프로젝트가 생성되었다면, Backend 폴더구조는 아래와 같습니다.

- Front/Backend 프로젝트를 생성하였고, 다음 글에서는 각 프로젝트 세팅을 해보도록 하겠습니다.

---

참고

- https://www.inflearn.com/course/vue-pwa-vue-js-%EC%A4%91%EA%B8%89/dashboard

- https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-JPA-%ED%99%9C%EC%9A%A9-1/dashboard

- https://nykim.work/74

---

번외로... 지인 프론트 개발자분이 Vue.js 에 대해서 조그맣게 Youtube(유튜브)에 기초 강의를 올리고 계십니다.

참고해보셔도 좋을 것 같습니다.

9Diin