SpringBoot(JPA) + Vue.js 프로젝트 초기 개발 환경 설정하기 (IntelliJ / WebStorm)

개발환경

• OS : macOS Monterey
• IDE : IntelliJ IDEA Ultimate, WebStorm
• Backend
  - Spring Boot 2.8.6
  - Java11
  - JPA
  - Gradle
  - MySQL
  - QueryDSL
• Frontend
  - vue
  - vue/cli
  - vue-router
  - node 16.15.1

1. Spring Boot 프로젝트 생성하기

Create New Project -> Spring Initializr

Type : Gradle, Language : Java로 설정

원하는 SpringBoot 버전 선택 후 의존성 추가

• Lombok : 어노테이션 자동 생성 가능
• Spring Web : REST API 서버 개발 시 필수 모듈
• Spring Data JPA : JPA 사용시 필수
• Spring Boot DevTools : 재시작 하지 않고 코드 변화 반영 가능
• MySQL Driver : MySQL 연결 드라이버 지원
  더 필요한 의존성들은 추후에 추가 가능하니 필수적인 것들만 설정하고 넘어가면 된다.

QueryDSl 설정하기

기본적인 셋팅은 SpringBoot에서 기본적으로 설정해주지만, queryDsl은 의존성을 따로 추가해주어야한다.

하단 build.gradle 파일과 같이 구성하면 된다.

최종 build.gradle 파일

buildscript {
	ext {
		queryDslVersion = "5.0.0"
	}
}

plugins {
	id 'org.springframework.boot' version '2.6.8'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'

	// querydsl 추가
	id "com.ewerk.gradle.plugins.querydsl" version "1.0.10"
}

group = 'com.daunjo'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'mysql:mysql-connector-java'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	implementation 'org.springframework.boot:spring-boot-starter-validation'
	implementation 'org.springdoc:springdoc-openapi-ui:1.6.6'
	// querydsl 추가
	implementation "com.querydsl:querydsl-jpa:${queryDslVersion}"
	implementation "com.querydsl:querydsl-apt:${queryDslVersion}"
}

// querydsl 추가 시작
def querydslDir = "$buildDir/generated/querydsl"

querydsl {
	jpa = true
	querydslSourcesDir = querydslDir
}

sourceSets {
	main.java.srcDir querydslDir
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
	querydsl.extendsFrom compileClasspath
}

compileQuerydsl {
	options.annotationProcessorPath = configurations.querydsl
}
// querydsl 추가 끝

tasks.named('test') {
	useJUnitPlatform()
}

2. Vue.js 개발 환경 구축

https://nodejs.org/en/
node.js 및 yarn 설치

yarn add global @vue/cli
yarn add vue-router

vue-cli를 설치한다

Location 설정 후 create

3. BE, FE 연결

npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정이 필요하다.
vue.config.js 파일에 devServer를 설정해준다

module.exports = {
  transpileDependencies: true,
  lintOnSave: false,
  
  // npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080/',
        changeOrigin: true,
      }
    }
  },
  
  // 빌드 타겟 디렉토리
  outputDir: "../server/src/main/resources/static",  
}

또한 빌드 시 타겟 디렉토리를 outputDir로 선언해주어야 한다.