이 프로젝트는 Spring Boot (Kotlin) 기반 백엔드와 React + TypeScript + TailwindCSS 기반 프론트엔드로 구현된 도서 관리 시스템입니다.
RESTful API를 제공하는 백엔드와 이를 소비하는 프론트엔드가 통합되어, 도서 등록, 조회, 수정, 삭제 기능을 완전하게 지원합니다.
- Kotlin, Spring Boot 3.3.x
- Spring Data JPA, Hibernate
- Flyway (DB 마이그레이션)
- MySQL 8.0 (Docker)
- Gradle 빌드
- React 19 + TypeScript
- TailwindCSS
- Axios (API 통신)
- React Router DOM
src/main/kotlin/com/example/collectionspractice ├── CollectionsPracticeApplication.kt ├── controller │ └── BookController.kt ├── service │ └── BookService.kt ├── repository │ └── BookRepository.kt └── entity └── Book.kt
library-ui/ ├── src/ │ ├── api/ │ │ └── books.ts │ ├── components/ │ │ └── BookForm.tsx │ ├── pages/ │ │ ├── BookListPage.tsx │ │ ├── BookDetailPage.tsx │ │ └── BookEditPage.tsx │ ├── types/ │ │ └── index.ts │ ├── App.tsx │ └── index.tsx └── tailwind.config.js
# MySQL 실행 (Docker)
docker run -d --name library-mysql \
-e MYSQL_ROOT_PASSWORD=1234 \
-e MYSQL_DATABASE=library \
-e MYSQL_USER=app \
-e MYSQL_PASSWORD=1234 \
-p 3306:3306 \
mysql:8.0 --default-authentication-plugin=mysql_native_password
# Spring Boot 실행
./gradlew bootRun
2. Frontend 실행
cd library-ui
npm install
npm start
🌐 주요 기능
Backend API
GET /api/books → 전체 도서 목록 조회
GET /api/books/{id} → 특정 도서 조회
POST /api/books → 새 도서 등록
PUT /api/books/{id} → 도서 정보 수정
DELETE /api/books/{id} → 도서 삭제
Frontend
도서 목록 페이지 (BookListPage.tsx)
도서 상세 페이지 (BookDetailPage.tsx)
도서 등록/수정 페이지 (BookForm.tsx, BookEditPage.tsx)
네비게이션 및 라우팅 (App.tsx)
🛠️ 문제 해결 경험
Flyway + MySQL 연결 문제
Access denied for user 'app'@'localhost' 오류 발생
사용자 계정 권한을 localhost와 %로 분리해 해결
React 환경 구성 오류
tailwindcss 실행 불가 문제 발생 → npx tailwindcss init -p 대신 .\node_modules\.bin\tailwindcss 경로 실행으로 해결
API 500 오류 (프론트엔드)
프록시 설정(package.json → "proxy": "http://localhost:8080") 수정
API 경로를 /api/books로 통일
📌 결과
백엔드와 프론트엔드를 연동한 도서 관리 시스템 완성
CRUD 전 기능 정상 동작
직관적인 UI와 안정적인 API 제공
포트폴리오 및 실무 학습용으로 활용 가능
🖼️ 실행 화면 (예시)
📷 캡처 이미지 추가 예정 (목록, 상세, 등록/수정 화면)
📜 라이선스
MIT License