실행 · 연결

세 조각(프론트·백엔드·DB)을 어떻게 띄우고 서로 연결하는지 정리합니다. 개발 중에는 프론트·백엔드를 따로 실행하고, Vite 프록시가 둘을 이어줍니다.

준비물

PostgreSQL (로컬 :5432) — DB studydb, 스키마 lds
Java 17 + Gradle (백엔드)
Node.js + pnpm (프론트)

1) DB 준비

# 최초 1회: DB와 스키마 생성
psql -U postgres -c "CREATE DATABASE studydb;"
psql -U postgres -d studydb -c "CREATE SCHEMA IF NOT EXISTS lds;"

테이블·초기데이터는 백엔드가 처음 뜰 때 Liquibase가 자동 생성합니다(스키마 SQL + admin 계정 시드).

2) 백엔드 실행 (:8084)

cd study-backend
./gradlew bootRun     # Spring Boot 개발 서버 (포트 8084)
# 빌드: ./gradlew build   /   DB 마이그레이션: ./gradlew update

3) 프론트 실행 (:5173)

cd study-frontend
pnpm install
pnpm dev              # Vite 개발 서버 (기본 :5173)

어떻게 연결되나

브라우저 :5173 (Vite)
   │  fetch("/api/users")        # 상대경로로 요청
   ▼
Vite 프록시  /api → http://localhost:8084   # changeOrigin
   ▼
Spring Boot :8084   →   PostgreSQL :5432 (studydb / lds)
   ▲
응답(JSON)이 거꾸로 돌아와 화면(React Query 캐시)에 표시

왜 프록시를 쓰나

프론트(:5173)와 백엔드(:8084)는 포트가 달라 원래는 CORS^? 에 걸립니다. Vite 프록시가 같은 출처처럼 전달해줘서 개발 중엔 문제가 없어요. 전체 요청 흐름은 연동 1장에서 단계별로 봅니다.

시드 데이터로 만들어지는 관리자 계정: 아이디 admin / 비밀번호 admin123. 로그인하면 액세스 토큰(JWT, 12시간) + 리프레시 토큰(DB, 7일)을 받습니다(연동 2장).

빌드 · 배포 개요

프론트: pnpm build → 정적 파일(dist) 생성 → 웹서버/CDN 또는 백엔드가 서빙
백엔드: ./gradlew build → 실행 가능한 study.jar → 서버에서 java -jar
컨테이너로 묶어 배포하려면 Docker 참고