PROJECT/[Spring Boot, React] 독서 습관 관리 서비스
[Spring Boot, React] 독서 습관 관리 서비스
dev스카이
2026. 1. 4. 01:33
1. 프로젝트 소개
이 프로젝트는 Spring Boot와 React로 구현한 풀스택 독서 습관 관리 서비스입니다. 독서 기록과 목표 설정, 차트 기반 진행률 시각화를 통해 사용자가 독서 성과를 객관적으로 추적하도록 설계했습니다. 독서 내용을 체계적으로 기록해 기억을 강화하고 습관화를 돕는 서비스가 필요하다고 판단해 주제로 선정했습니다.
2. 기술 스택
Backend(Spring Boot)
| 구분 | 기술 | 버전 | 용도 |
| 프레임워크 | Spring Boot | 3.3.0 | 메인 백엔드 프레임워크 |
| 언어 | Java | 17 | 서버 사이드 로직 |
| ORM | Spring Data JPA (Hibernate) | - | 데이터베이스 연동 |
| 보안 | Spring Security | - | 인증/인가, 세션 관리 |
| 템플릿 | Thymeleaf | - | 서버 사이드 렌더링 (SPA 폴백) |
| 암호화 | BCryptPasswordEncoder | - | 비밀번호 해싱 |
| 빌드 도구 | Gradle | 8.12.1 | 빌드 및 의존성 관리 |
| 모니터링 | Spring Actuator | - | 헬스체크 (/actuator/health) |
Frontend(React)
| 구분 | 기술 | 버전 | 용도 |
| 프레임워크 | React | 18.2.0 | UI 라이브러리 |
| 언어 | TypeScript | 4.9.5 | 타입 안정성 |
| 라우팅 | React Router DOM | 7.2.0 | SPA 라우팅 |
| HTTP 클라이언트 | Axios | 1.3.4 | API 통신 |
| 차트 | Chart.js + react-chartjs-2 | 4.4.8 / 5.3.0 | 데이터 시각화 |
| 차트 플러그인 | chartjs-plugin-zoom | 2.2.0 | 차트 줌/팬 기능 |
| CSS 프레임워크 | Tailwind CSS | 3.4.4 | 유틸리티 기반 스타일링 |
| 빌드 도구 | Create React App | 5.0.1 | React 프로젝트 설정 |
| 폰트 | Pretendard | - | 한글 웹폰트 |
Database
| 환경 | 기술 | 용도 |
| 개발 | H2 Database | 파일 기반 (./data/booktine) |
| 운영 | MySQL8 | Render 배포 시 사용 |
DevOps & 배포
| 구분 | 기술 | 용도 |
| 컨테이너화 | Docker | 멀티스테이지 빌드 |
| 베이스 이미지 | gradle:8.7-jdk17 (빌드) / eclipse-temurin:17-jre (런타임) | |
| 배포 플랫폼 | Render (Free Tier) | 백엔드 + 정적 파일 호스팅 |
| 버전 관리 | Git + GitHub | 소스 코드 관리 |
3. 아키텍처 구조
3.1 전체 아키텍처
아키텍처를 한 줄로 요약하면, 브라우저에서 돌아가는 React SPA가 HTTP(REST API)로 Spring Boot 백엔드에 요청하고, 백엔드는 보안(세션) → 컨트롤러 → 서비스 → 리포지토리(JPA) 순으로 처리한 뒤 DB(H2/MySQL)와 연동해 결과를 다시 내려주는 구조입니다.
┌─────────────────────────────────────────────────────────────┐
│ Client (Browser) │
│ React SPA (TypeScript) │
└─────────────────────────────────────────────────────────────┘
│
▼ HTTP (REST API)
┌─────────────────────────────────────────────────────────────┐
│ Spring Boot Server │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ Controller │→ │ Service │→ │ Repository │ │
│ │ Layer │ │ Layer │ │ (Spring Data JPA) │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
│ │ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Spring Security (Session) │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Database (H2 / MySQL) │
└─────────────────────────────────────────────────────────────┘- Client(Browser) – React SPA(TypeScript)
- 사용자가 화면에서 행동하면(조회/등록/수정 등) SPA가 API 요청을 보내고, 응답 데이터를 받아 화면을 다시 그립니다. SPA는 기본적으로 브라우저에서 JS로 화면을 갱신하는 방식(CSR)과 잘 맞습니다.
- HTTP(REST API)
- 프론트와 백엔드는 HTTP로 통신하고, REST 스타일로 "리소스에 대한 요청/응답" 형태로 API를 설계합니다 (실무에서도 HTTP API를 흔히 REST API라고 부릅니다).
- Spring Boot Server 내부: Security → Controller → Service → Repository
- Spring Security (Session)
- 요청이 컨트롤러로 들어오기 전에, Spring Security가 먼저 개입해서 인증/인가를 처리합니다. 세션 방식이면, 로그인 후 생성된 세션과 클라이언트 쿠키(세션 식별자)를 기준으로 “누구의 요청인지”를 확인하고 접근 권한을 적용합니다.
- Controller Layer
- 컨트롤러는 “어떤 URL/HTTP 메서드 요청을 어떤 메서드가 처리할지”를 매핑하고, 요청/응답의 입구 역할을 합니다. (예: @RequestMapping, @GetMapping 등)
- Service Layer
- 서비스는 비즈니스 로직을 모아서 처리하는 계층입니다. 보통 “규칙 적용, 검증, 트랜잭션 단위의 작업 조합”이 여기서 이루어지고, 컨트롤러는 서비스 호출에 집중해서 얇게 유지합니다.
- Repository (Spring Data JPA)
- 리포지토리는 DB 접근을 담당합니다. Spring Data JPA의 Repository 추상화는 반복적인 데이터 접근 보일러플레이트를 줄여 CRUD 중심 작업을 간단하게 만들고, 실제 SQL 실행은 JPA 구현체(예: Hibernate)가 수행합니다.
- Spring Security (Session)
- Database (H2 / MySQL)
- 개발 환경에서는 H2, 운영에서는 MySQL처럼 환경에 따라 DB를 달리 두고, JPA를 통해 같은 도메인 모델/리포지토리 구조로 접근하는 형태가 흔합니다. (그만큼 계층 분리가 DB 교체에도 유리합니다.)
이 구조의 의도
- 관심사 분리: 보안, 요청 처리, 비즈니스 로직, DB 접근을 분리해서 변경 영향 범위를 줄입니다.
- 유지보수/테스트 용이: 컨트롤러는 입출력, 서비스는 규칙, 리포지토리는 데이터 접근으로 역할이 명확해집니다.
- 보안은 공통 관문: 모든 요청이 컨트롤러 전에 보안 검증을 거치도록 강제할 수 있습니다.
2.2 프로젝트 디렉토리 구조
Booktine/
├── frontend/ # React 프론트엔드
│ └── src/
│ ├── components/ # 재사용 가능한 UI 컴포넌트
│ │ ├── AuthModal.tsx # 로그인/회원가입 모달
│ │ ├── Header.tsx # 상단 네비게이션
│ │ ├── Footer.tsx # 하단 푸터
│ │ ├── MonthlyBarChart.tsx # 월별 독서량 막대 차트
│ │ ├── AnnualLineChart.tsx # 연간 독서량 라인 차트
│ │ ├── GenreDoughnutChart.tsx # 장르별 도넛 차트
│ │ └── HomeGenreDoughnutChart.tsx
│ ├── pages/ # 페이지 컴포넌트
│ │ ├── MainPage.tsx # 랜딩 페이지
│ │ ├── HomePage.tsx # 대시보드 홈
│ │ ├── BookNote.tsx # 독서 노트 목록
│ │ ├── CreatePostPage.tsx # 노트 작성/수정
│ │ ├── PostDetailPage.tsx # 노트 상세 보기
│ │ ├── ProgressPage.tsx # 통계/진행 상황
│ │ └── SettingsPage.tsx # 설정/프로필
│ ├── services/
│ │ └── AuthService.ts # 인증 API 호출
│ ├── lib/
│ │ └── api.ts # Axios 인스턴스
│ └── styles/
│ └── main.css # 전역 스타일
│
└── src/main/java/booktine/Booktine/ # Spring Boot 백엔드
├── config/
│ └── SecurityConfig.java # Spring Security 설정
├── controller/
│ ├── AuthController.java # 인증 API
│ ├── PostController.java # 게시글 CRUD API
│ ├── ProgressController.java # 통계 API
│ ├── RecommendationController.java # 도서 추천 API
│ ├── SettingsController.java # 설정 API
│ └── UploadController.java # 파일 업로드 API
├── controller/dto/
│ ├── ProgressResponse.java
│ ├── MonthlyData.java
│ ├── GenreData.java
│ └── RecommendedBook.java
├── model/ # JPA 엔티티
│ ├── User.java # 사용자
│ ├── Post.java # 독서 노트
│ ├── Memo.java # 메모 (Embeddable)
│ └── Author.java # 작성자 정보 (Embeddable)
├── repository/
│ ├── UserRepository.java
│ └── PostRepository.java
└── service/
├── UserService.java # 사용자 비즈니스 로직
├── PostService.java # 게시글 비즈니스 로직
├── ProgressService.java # 통계 계산 로직
└── RecommendationService.java # 알라딘 API 연동