🛠️ 개발 환경 세팅 가이드 (Frontend / Backend)
프로젝트를 전형적으로 Frontend / Backend로 나눴다고 가정한다.
프로젝트 트리는 대략 다음과 같다.
utrip/
┣ utrip-backend ← 백엔드（Java / Spring Boot）
┣ utrip-frontend ← 프론트엔드（React）
┣ README.md
┗ application.properties ← 환경 설치1️⃣ 사전 환경 설치
먼저 아래 환경이 필요하다:
- Java 17 (JDK)
- MySQL
- Node.js
✔️ 설치 여부 확인
터미널에서 아래 명령어 실행:
java -version
mysql --version
npm -v👉 11.12.1 같은 버전 번호가 나오면 정상 설치 완료
👉 "command not found"가 나오면 → 설치 안 된 상태
2️⃣ Java 17 (JDK) 설치
🔗 https://www.oracle.com/java/technologies/downloads/#jdk22-mac
✔️ 설치 방법
- 원하는 Java 버전 다운로드
- 내 컴퓨터 아키텍처 확인:
uname -mx86_64→ Intel (64비트)arm64→ M1 / M2 / M3
- 맞는 버전 다운로드 후 설치 진행 (계속 클릭)
✔️ 설치 확인
java -version👉 예시 출력:
java version "17.0.19" 2026-04-21 LTS→ 정상 설치 완료
3️⃣ MySQL 설치
🔗 https://dev.mysql.com/downloads/
✔️ 반드시 설치해야 하는 것
- MySQL Community Server
- MySQL Workbench
3.1 MySQL Community Server
✔️ 설치 방법
- OS 선택
- ARM / x86 확인 후 다운로드
⚠️ 주의
설치 중 root 비밀번호 설정 필수 , 반드시 기억해야 함
3.2 MySQL Workbench
- OS / 버전 선택
- ARM / x86 맞게 다운로드
✔️ 설치 확인
mysql --version👉 예시:
mysql Ver 9.6.0 for macos15.7 on arm64 (Homebrew)→ 정상 설치 완료
4️⃣ Node.js 설치
🔗 https://nodejs.org/en/download/current
✔️ 설치 방법
- 다운로드 후 바로 설치
✔️ 설치 확인
npm -v👉 예시:
11.12.1→ 정상 설치 완료
5️⃣ 프로젝트 실행
5.1 프론트엔드 실행
- VSCode로 프로젝트 열기
- 터미널에서 frontend 폴더 이동
npm install👉 의존성 설치 (시간 소요), 그 다음에 프로젝트 실행:
npm start✔️ 실행 결과:
You can now view utrip-frontend in the browser.
Local: http://localhost:3000
webpack compiled successfully👉 브라우저에서 http://localhost:3000 접속, localhost 뒤에 나오는 prot 번호는 다를 수 있음.
5.2 백엔드 실행
./mvnw spring-boot:run👉 프로젝트에 mvnw 파일이 있으면 바로 실행 가능
6️⃣ MySQL 설정 및 DB 생성
6.1 MySQL 실행
- Workbench 실행
- root 비밀번호 입력 후 접속
6.2 application.properties 설정
프로젝트 내 파일 수정:
spring.datasource.url=jdbc:mysql://localhost:3306/utrip
spring.datasource.username=xxx
spring.datasource.password=xxx👉 실제 MySQL 정보와 동일하게 입력
6.3 데이터베이스 생성
- Workbench → New SQL Tab
- 프로젝트에 맞는 SQL 쿼리 입력
- ⚡ 버튼 클릭하여 실행
6.4 DB 생성 확인
- 상단 탭 → Schemas 선택
👉 프로젝트 이름 아래 Tables 생성 확인 가능
✅ 전체 흐름 요약
- 환경 설치 (Java / MySQL / Node)
- 프론트 실행 (
npm start) - 백엔드 실행 (
spring-boot:run) - DB 연결 및 생성
