[React.js + Spring Data JPA] 1. 프로젝트 생성 및 세팅

파이널 프로젝트로 진행했었던 내용을 회상하며 작성해보는 게시물입니다.

🔥 React.js + Spring Data JPA를 연동한 REST API 구성, 하나의 jar 파일로 build
✨개발환경 :
    OS : window10
    IDE : VSCode, IntelliJ
    Language : Java, Javascript
    FrontEnd : HTML/CSS, React.js
    BackEnd : Spring Boot(Gradle), Spring Data JPA
    DB : MySQL

하나의 jar 파일로 빌드하는 이유는, AWS 서버에 jar 파일을 업로드하여 배포하기 위함이었습니다.

험난했던 AWS 배포 과정도 다루게 될 예정입니다.... 😂

---

SpringBoot 프로젝트 만들기

Spring initializr(https://start.spring.io/) 혹은 intellij 얼티메이트 버전을 사용하여 프로젝트를 생성합니다.

-  Gradle

-  Java 11

- Spring Boot 2.7.7

(높은 버전을 선택할 경우 Java 역시 높은 버전을 요구하는 것으로 보여, Java 버전에 맞추어 선택했습니다!)

- Jar 

 

- Spring Boot Dev Tools

- Lombok (어노테이션으로 손쉽게 기능을 구현할 수 있게 도와주는 효자입니다😪)

- Spring Web

- Spring Data JPA (쿼리문을 직접 작성하지 않고도 DB를 제어할 수 있습니다! 편리해보이지만...음...😑)

- MySQL Driver

 

해당 내용 모두 선택 후, 하단의 GENERATE 를 선택하면 압축된 프로젝트가 생성됩니다!

압축을 풀어 원하는 경로에 저장해놓습니다.

 

❗❗ 바탕화면에 파일을 저장하고 싶은 경우, 아래와 같이 경로가 '바탕화면'으로 되어있는 경우가 있습니다.

한글로 된 경로를 잘 인식하지 못해 알수없는 에러가 발생하기 때문에... 다른 경로에 저장하는 것을 추천합니다.

 

 

이제 원하는 IDE를 실행시키고, 프로젝트 폴더를 Open 합니다.

저는 intellij 얼티밋 버전을 사용했습니다!

Trust Project를 누르면 Gradle build 등 최적화 작업을 위해 몇분간의 시간이 지난 뒤 프로젝트가 열립니다.

 

Spring Boot에 React 빌드 환경 구축하기

현재 파일 경로의 상태입니다.

 src - main - frontend 경로 생성 후 React 프로젝트를 추가하겠습니다.

 

 

intellij 하단의 터미널에 명령어를 입력하겠습니다.

ls 는 list directory contents에서 유래된 명령어로 해당 디렉토리 내에 있는 디렉토리 및 파일을 화면에 출력합니다.

gradlew가 있는 현재 디렉토리가 최상위 디렉토리입니다!

 

cd 는 change directory의 줄임말로 현재 작업하고 있는 디렉토리의 위치를 이동하는 명령어입니다.

src - main 디렉토리까지 이동합니다.

 

yarn create react-app 으로 React 프로젝트를 생성하는데, 이름은 frontend로 지정했습니다.

명령어를 입력하면 필요한 모듈을 설치하게 되고, 설치 완료시 Happy hacking! 메시지로 확인할 수 있습니다.

 

설치 후 다시 ls 를 입력하면, frontend 가 생성된 것을 확인할 수 있습니다.

 

이제 frontend 폴더로 이동하여, react 프로젝트에 필요한 모듈을 미리 설치합니다.

 

- yarn add axios : 프론트 - 백엔드 간의 비동기 통신을 위한 axios

- yarn add styled-component : 컴포넌트 단위 CSS 지정을 위한 styled-component

- yarn add react-router-dom : 각각 url 에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리

DB 연동하기

src - main - resources에 application.properties에 DB 정보를 입력합니다.

server.port=8211

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/devs?userUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Seoul
spring.datasource.username=root
spring.datasource.password=*******

# 실행되는 쿼리 콘솔에 출력
spring.jpa.properties.hibernate.show_sql=true

# 콘솔창에 출력되는 쿼리를 가독성 좋게
spring.jpa.properties.hibernate.format_sql=true

# 쿼리에 물음표 출력되는 바인드 파라미터 출력
logging.level.org.hibernate.type.descriptor.sql=trace

spring.jpa.hibernate.ddl-auto=update

- server.port 는 빌드 및 실행 시 사용할 port 번호입니다.

- spring.datasource.url 뒤 localhost:3306 뒤에 미리 만들어놓은 스키마 이름을 입력합니다. 저는 devs로 생성했습니다.

- username, password 는 사용할 계정의 이름과 비밀번호를 입력합니다.

- 마지막 spring.jpa.hibernate.ddl-auto 는 jpa 관련 옵션입니다.

• create : SessionFactory 시작시 스키마를 삭제하고 다시 생성
• create-drop : SessionFactory 종료 시 스키마를 삭제
• update : SessionFactory 연결된 DB와 비교하여 추가된 항목은 추가 만약 같은 변수명이면 오류발생
• validate : SessionFactory 시작시 객체구성과 스키마가 다르다면 예외 발생
• none: 아무것도 안함

프로젝트 빌드 및 실행하기

 build.gradle 에 src/main/frontend 에 만들었던 React 프로젝트를 빌드하기 위한 내용을 추가합니다.

def frontendDir = "$projectDir/src/main/frontend"

sourceSets {
    main {
        resources { srcDirs = ["$projectDir/src/main/resources"]
        }
    }
}

processResources { dependsOn "copyReactBuildFiles" }

task installReact(type: Exec) {
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "audit", "fix"
        commandLine 'npm.cmd', 'install' }
    else {
        commandLine "npm", "audit", "fix" commandLine 'npm', 'install'
    }
}

task buildReact(type: Exec) {
    dependsOn "installReact"
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "run-script", "build"
    } else {
        commandLine "npm", "run-script", "build"
    }
}

task copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    from "$frontendDir/build"
    into "$projectDir/src/main/resources/static"
}

 

이제 최상위 디렉토리로 이동하여, 빌드합니다!

앞서 작성한 내용과 같이, gradlew가 있는 곳이 최상위 디렉토리입니다.

cd ../ 를 입력하면 이전 디렉토리로 이동하고, ls 를 입력하여 gradlew가 있는 위치를 찾습니다.

 

최상위 디렉토리로 이동이 되었으면,

./gradlew build로 gradle 프로젝트를 빌드해줍니다. 

처음 빌드하는 경우에는 시간이 꽤 오래걸립니다... 😫

BUILD SUCCESSFUL 이 화면에 출력되면 빌드가 완료된 것입니다.

 

build 된 프로젝트에 만들어진 jar 파일을 실행합니다.

java -jar build\libs\demo-0.0.1-SNAPSHOT.jar

저는 프로젝트 생성시 demo로 생성을 하였기 때문에, demo로 입력해주었습니다.

 

터미널에 Started DemoApplicaion 이 출력되면 실행까지 완료가 되었습니다.

 

인터넷 주소창에 applicaion.properties에 작성했던 server.port 번호를 localhost: 뒤에 붙여줍니다.

저는 8211 로 작성했기때문에, localhost:8211 로 입력해주었습니다.

 

React 마크가 빙글빙글 돌아가는 첫 화면이 드! 디! 어! 실행되는 것을 확인할 수 있습니다!😍