오운완(가칭) 프로젝트 시작 React + Spring + R2DBC(Mariadb) 연동

포스팅 목적

오운완 프로젝트를 여자친구랑 같이 페어 프로그래밍을 통해 개발을 해보기로 했다.

토이 프로젝트로 시작해서 실제 도메인 + SEO(검색 엔진 최적화) + google adsense 까지 하면서 여러 고도화 작업을 할 예정이다.

해당 카테고리에서는 이번 프로젝트를 진행하면서 필요한 정보와 설정등을 정리한다.

간단한 프로젝트 소개

각 사용자 별 운동 루틴 및 타이머를 기록하고 통계화해서 보여주는 간단한 웹 애플리케이션.

기술 스택

• Nginx (도메인 및 https 적용)
• 젠킨스 (배포 자동화 CI/CD)
• 도커 (CI/CD)
• Java webflux (backend)
• R2DBC (mariadb)
• react + next (frontend)

 

개발환경

OS: Windows
IDE: Intellij
FrameWork: Spring Boot 3.4 / React 18.2.0 + Next 14.1.4
Language: Java 17 (Spring Boot 3 부터 17 이상만 사용 가능)
Build: Gradle Kotlin
DB: Mariadb 11.3.2

 

기능

• 소셜 로그인
• 운동 스톱워치
• 운동 타이머
• 휴식시간 타이머
  • 운동 스톱워치/휴식시간 타이머는 위의 스톱워치/타이머가 끝나면 자동으로 시작
• 드래그 (순서 변경)
• 운동 루틴 저장
• 운동 루틴 복제
• 운동시간 요약 레터
• 날짜별 운동시간 저장
• 연속 운동 날짜 계산
• 구글 애드센스
• 웹앱

 

프로젝트 생성

🌸 Spring Boot

💻 Intellij spring boot project 생성

File > New > Project

New Project

새 프로젝트를 만드는 것이므로 굳이 레거시 버전을 선택하지 않고 최신 Spring Boot 버전인 3.2.4를 선택하기로 했다.

Spring Boot 3 이상부터는 Java 17 이상을 선택해야하는 것을 제외하고는 본인이 편한대로 선택하면 된다.

💻 Spring Boot 버전 선택 및 dependency 추가

Spring Initializer 3.2.4

• 보일러플레이트 코드를 없애주는 Lombok
• 다양한 편의 기능을 제공하는 Spring Boot DevTools 
  • Property Defaults
  • Automatic Restart
  • Live Reload
  • Global Settings
  • Remote Applications
• Reactive 앱을 만들 예정이므로 Spring Reactive Web
• 비동기 DB를 위한 Spring Data R2DBC
• gradle 로 따로 추가한 DB Driver(Mariadb)

dependencies {
    implementation("org.springframework.boot:spring-boot-starter-webflux")
    implementation("org.springframework.boot:spring-boot-starter-data-r2dbc")
    runtimeOnly("org.mariadb:r2dbc-mariadb")
    compileOnly("org.projectlombok:lombok")
    developmentOnly("org.springframework.boot:spring-boot-devtools")
    annotationProcessor("org.projectlombok:lombok")
    testImplementation("org.springframework.boot:spring-boot-starter-test")
    testImplementation("io.projectreactor:reactor-test")
}

 

💻 Spring Boot 프로젝트 실행

설정이 완료되면 프로젝트를 실행해보자.

그러면 DB url이 없다고 실행이 안 될 것이다. 😅

먼저 실행을 해보려면 gradle에서 아래 두 dependency 를 주석 처리하고 실행하면 잘 될 것이다.

//implementation("org.springframework.boot:spring-boot-starter-data-r2dbc")
//runtimeOnly("org.mariadb:r2dbc-mariadb")

Spring Start

실행 후 http://localhost:8080 으로 접속하면 에러 페이지가 나올 것이다.

(페이지를 만든 게 없으므로 404 No static resource)

정상적으로 실행이 된 것이므로 걱정할 필요가 없다.

No static resource

 

아래의 모든 연동 작업을 마치고 다시 실행해보도록 하자

 

🌸 React

프로젝트를 생성할 때 백엔드, 프론트엔드를 프로젝트를 나눠서 하는 케이스기 있고 합쳐서 하는 케이스도 있다.

둘 중 맞는 방법이 있는 건 아니지만 대체로 나눠서 할 경우 관리 용이성, 협업 시 편의성이 증가하지만 소규모 프로젝트에선 합쳐서 하는 게 스위칭 시간을 줄일 수 있다. 그래서 해당 프로젝트에서는 하나의 github으로 개발하기로 결정하였다.

💻 Create React

npx create-next-app frontend​

명령어 프론트 프로젝트를 생성한다.

약 5분 정도를 기다리면 프로젝트 생성이 완료되고 아래의 구조가 만들어진다.

💻 Run React App(Next)

cd frontend
npm run dev

명령어를 입력하면 Next App 이 실행되고 http://localhost:3000으로 접속할 수 있다.

 

🌸MariaDB

 Mariadb는 Mysql에서 포크된 프로젝트이므로 사실 큰 차이는 없다.

다만 R2DBC에서 Mysql은 공식 드라이버가 없고 Mariadb는 공식 드라이버가 있기에 Mariadb를 선택하였다.

또한, 직접 디비를 설치하는 것은 번거롭고 이후 서버 설치때도 환경이 달라지므로 Docker 이미지를 통해 구성하였다.

 

💻 Create Mariadb

도커와 환경변수 주입을 통해 Mariadb의 db, user 셋팅을 바로 할 수 있다.

.env 파일을 아래와 같이 구성한다.

MARIADB_ROOT_PASSWORD=루트_패스워드
MARIADB_DATABASE=db명
MARIADB_USER=유저명
MARIADB_PASSWORD=패스워드

그리고 docker를 설치 후 아래 명령어를 실행하면 3306 포트를 통해 mariadb에 접근할 수 있다.

docker run -d -p 3306:3306 --env-file .env --name mariadb mariadb:11.3.2

 

mariadb container