Spring boot + vue 프로젝트 (1)

📑 개요

신규 프로젝트 작업을 해야 하는 상황이 있어서 이번 기회에 spring boot, kotlin과 vue 최신 버전을 기준으로 초기 세팅 작업을 했고 이 과정을 기록하려고 한다. 버전에 따라 없어진 내용도 존재하고, 추가된 내용도 존재하니 체크를 해보는 게 좋을 거 같다.

 

아래의 이미지는 이번에 프로젝트를 작업 하면서 만든 패키지 구조이다. (참조용)

패키지 구조

 

📑 기술 스택

BackEnd

• java 21
  • 자바의 미래라고 불리는 virtual thread를 사용해보고 싶어서 버전을 21 이상을 사용하려고 생각했고 21이 LTS 버전이라서 사용하게 되었다.
• kotlin 1.9.23
• spring boot 3.2.4
• DGS 8.6.0
  • 넷플릭스에서 개발한 GraphQL 프레임워크이다. 예전에 한번 내용일 살펴보고 테스트를 해봤을 때 좋다고 생각해서 사용하게 되었다. 하지만 kotlin을 사용하려고 마음먹었기 때문에 DGS의 사용에 불편함이 존재한다면 JDSL을 사용할 예정이다. 

Front

• vue 3.4.21
• vite 5.2.0
• pinia 2.1.7
  • vue 3.x 이상 부터는 공식적으로 상태 관리 라이브러리로 pinia를 얘기했다. 기존에는 vuex를 사용했으나 공식적으로 지정한 만큼 한번 사용해 보고 서로의 장단점을 판단하는 게 좋다고 판단해서 사용하게 되었다.

이번에 진행 하는 프로젝트가 엄청 큰 프로젝트가 아니기 때문에 내가 익숙한 것보다는 새로운 것을 도전하면서 개발을 진행하려고 생각했기 때문에 잘 모르는 내용도 존재한다. :) kotlin과 vue3.0의 경우는 기존에 사용했던것과 크게 다른 점이 있을까 싶기도 하지만 잘 사용하고 싶어서 공부를 틈틈이 하고 있다.

 

위에 적은 내용 이외에도 앞으로 발전 가능성이 높고, 계속해서 업데이트 되는 프레임 워크나 라이브러리가 있다면 사용할 예정이다.

 

📒 설정 파일

위의 내용을 기반으로 프로젝트내에서 설정한 내용을 공유하려고 한다. 자신에게 필요한 내용은 참조하는 것이 좋지만 그대로 사용하는 것은 비추천한다.

BackEnd (application.yml)

plugins {
    id 'org.springframework.boot' version '3.2.4'
    id 'io.spring.dependency-management' version '1.1.4'
    id 'org.jetbrains.kotlin.jvm' version '1.9.23'
    id 'org.jetbrains.kotlin.plugin.spring' version '1.9.23'
    id 'org.jetbrains.kotlin.plugin.jpa' version '1.9.23'
    id "org.jetbrains.kotlin.kapt" version "1.9.23"
    id "com.netflix.dgs.codegen" version "6.1.5"
}

group = 'com.service'
version = '0.0.1-SNAPSHOT'

java {
    sourceCompatibility = '21'
}

repositories {
    mavenCentral()
}

dependencies {
    /* spring boot */
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-data-jdbc'
    implementation "org.jetbrains.kotlin:kotlin-reflect:1.9.23"

    /* queryDsl */
    implementation("com.querydsl:querydsl-jpa:5.0.0:jakarta")
    kapt("com.querydsl:querydsl-apt:5.0.0:jakarta")
    kapt("jakarta.annotation:jakarta.annotation-api")
    kapt("jakarta.persistence:jakarta.persistence-api")

    /* DB */
    implementation("org.mariadb.jdbc:mariadb-java-client:3.3.3")

    /* Dgs */
    implementation(platform("com.netflix.graphql.dgs:graphql-dgs-platform-dependencies:latest.release"))
    implementation("com.netflix.graphql.dgs:graphql-dgs-spring-boot-starter")
    testImplementation("com.netflix.graphql.dgs:graphql-dgs-client")
    /* scalar 사용가능하게 해주는 라이브러리 */
    implementation("com.netflix.graphql.dgs:graphql-dgs-extended-scalars")

    /* jdsl (라인에서 개발됨) */
    // TODO dgs를 사용하다 불편하거나 사용하기 힘들면 해당 라이브러리를 사용 예정.
    // implementation 'com.linecorp.kotlin-jdsl:jpql-dsl:3.4.0'
    // implementation 'com.linecorp.kotlin-jdsl:jpql-render:3.4.0'

    /* spring boot test */
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

tasks.withType(KotlinCompile) {
    kotlinOptions {
        freeCompilerArgs += '-Xjsr305=strict'
        jvmTarget = '21'
    }
}

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

Front (package.json)

"dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.21",
    "vue-router": "^4.0.13"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.24.1",
    "@vitejs/plugin-vue": "^5.0.4",
    "axios": "1.6.8",
    "devextreme": "22.2.11",
    "devextreme-vue": "22.2.11",
    "eslint": "^9.0.0",
    "eslint-plugin-vue": "^9.24.1",
    "vite": "^5.2.0"
  }

🎈 생각

내가 개발 하면서 한 번쯤 사용해보고 싶은 프레임워크 및 라이브러리를 기반으로 사용을 하려고 생각했다. 프로젝트 구조도 마찬가지로 기존에는 모놀리식 구조를 사용했다면 이번에는 도메인 구조를 사용해보려고 한다. 다행히 도메인 구조를 사용해서 개발해도 된다고 판단을 해서 사용하는 것이니 상황에 맞게 사용해야 한다.

프로젝트의 경우 기획 중이기 때문에 샘플 코드를 작성하면서 어떻게 사용해야 하는지 확인만 하고 아직 멈춰 있다.