쉘폴더 ShellFolder 님의 "Vue + Spring Boot 프로젝트 만들어 보기" 강의를 보고 작성한 글입니다.
참고 : github(클릭)
1. 준비 (환경설정)
npm 설치
npm(Node.js Package Managr)란, Node.js로 만들어진 패키지들의 설치와 관리를 쉽게 해주는 매니저라고 보시면 됩니다.
아래 링크에서 본인의 OS와 LTS 버전으로 Node.js를 다운로드 받아 설치해 주세요.
다운로드 링크 : https://nodejs.org/en/download
설치가 완료되면 cmd에서 버전확인 명령어를 통해 설치가 잘 되었는지 확인해주세요.
노드 버전 확인 node -v
npm 버전 확인 npm -v
yarn 설치
npm으로 yarn을 설치해줍니다. -g는 전역으로 설치한다는 뜻입니다.
npm install -g yarn
yarn 버전 확인 yarn --version
2. Spring boot 설정
위 설정 그대로 다운로드 하기(클릭)
다운받은 zip파일을 프로젝트 폴더에 풉니다.
app 폴더 외에는 쉘폴더님 github에서 다운로드 받아 세팅했습니다.
사용하는 IDE을 열어 spring 프로젝트를 빌드 해줍니다. (build.gradle - reload all gradle project)
- Controller 만들기
사진과 같은 경로에 디렉토리와 파일을 만든 후
아래와 같이 작성합니다.
package com.vueboot.app.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
//데이터만 보내기때문에 RestController
@RestController
public class DataController {
@GetMapping("/")
public String home(){
return "데이터 준비중...";
}-
DB 연결 (링크 참조)
application.properties에 링크와 같이 mysql 개인 설정을 적고 저장한다. -
Spring 서버 실행 확인
AppApplication.main() 을 run 하여 스프링 서버를 실행한 후
localhost:8080 으로 접속하여 아래와 같은 화면이 나온다면 DB 연결과 스프링 서버가 잘 구동되고 있는 것입니다.
3. vue 설치 및 프로젝트 생성
-
vue js 설치
npm install -g @vue/cli
※공식 문서 : https://cli.vuejs.org/ -
vue 프로젝트 생성
터미널을 열고 프로젝트 루트 폴더로 이동합니다.
cd [project root path]
vue 프로젝트 생성
vue create vue-app
아래와 같이 설정해주세요.
-
Bootstrap 적용 확인
vue-app > public에 쉘폴더님 깃에서 받은 www>lib에 있는 bootstrap@5.2.3 을 붙여 넣어줍니다.
부트스트랩 공식 사이트에서도 소스폴더를 공유하지만 경로가 달라 강의와 달리 오류가 날 수 있으니 제공해 준걸 쓰도록 합시다.
index.html에 아래 link 태그를 작성하여 부트스트랩 css를 적용해주도록 합니다.
<link href="<%= BASE_URL %>bootstrap@5.2.3/css/bootstrap.min.css" rel="stylesheet">vue-app에 터미널을 위치하고 yarn serve --port8800 하여 vue를 실행
아래 같이 f12를 켜고 새로고침 했을때 css가 잘 보이면 bootstrap이 잘 적용 된 것이다.
(스프링과 겹치지 않게 8800이든 8081이든 사용하지 않는 포트를 사용한다.)
