React 게시판 프로젝트

React와 Spring Boot를 사용한 풀스택 게시판 애플리케이션입니다.

주요 기능

게시판 기능

• ✅ 게시글 목록 조회 (최신순/추천순 정렬)
• ✅ 게시글 상세보기 (조회수 자동 증가)
• ✅ 게시글 작성/수정/삭제
• ✅ 게시글 추천 기능
• ✅ 댓글 작성/삭제 기능

기술 스택

백엔드

• Java 17
• Spring Boot 2.7.13
• Spring Data JPA
• H2 Database (파일 기반)
• Lombok
• Gradle

프론트엔드

• React 18.2.0
• React Router DOM 6.11.2
• Axios 1.4.0
• CSS3

프로젝트 구조

react-board/
├── src/main/java/                    # 백엔드 소스
│   └── com/app/kms/reactboard/
│       └── api/
│           ├── config/               # 설정 파일 (H2, Jackson)
│           ├── controller/           # REST API 컨트롤러
│           ├── dto/                  # 데이터 전송 객체
│           ├── entity/               # JPA 엔티티
│           ├── repository/           # JPA 레포지토리
│           └── service/              # 비즈니스 로직
├── frontend/
│   └── src/
│       ├── pages/                    # React 페이지 컴포넌트
│       │   ├── BoardList.js         # 게시판 목록
│       │   ├── BoardDetail.js       # 게시글 상세
│       │   └── BoardForm.js         # 게시글 작성/수정
│       ├── services/                 # API 서비스
│       │   └── api.js               # Axios 설정
│       └── styles/                   # CSS 스타일
└── data/                             # H2 Database 파일 저장 위치

설치 및 실행

사전 요구사항

• Java 17 이상
• Node.js 14 이상
• npm 또는 yarn

백엔드 실행

1. 프로젝트 루트 디렉토리에서 실행:

./gradlew bootRun

백엔드 서버가 http://localhost:8090 에서 실행됩니다.

프론트엔드 실행

1. frontend 디렉토리로 이동:

cd frontend

2. 의존성 설치 (처음 한 번만):

npm install

3. 개발 서버 실행:

npm start

프론트엔드 서버가 http://localhost:3000 에서 실행되며, 자동으로 브라우저가 열립니다.

API 엔드포인트

게시판 API

• GET /api/board?sort={recent|likes} - 게시글 목록 조회
• GET /api/board/{id} - 게시글 상세 조회
• POST /api/board - 게시글 작성
• PUT /api/board/{id} - 게시글 수정
• DELETE /api/board/{id} - 게시글 삭제
• POST /api/board/{id}/like - 게시글 추천

댓글 API

• GET /api/comment/board/{boardId} - 댓글 목록 조회
• POST /api/comment - 댓글 작성
• DELETE /api/comment/{id} - 댓글 삭제

H2 Database 콘솔

개발 중 데이터베이스를 확인하려면:

1. 브라우저에서 http://localhost:8090/h2-console 접속
2. 다음 설정 입력:
   • JDBC URL: jdbc:h2:file:./data/reactboard
   • User Name: sa
   • Password: (비워두기)

샘플 데이터

애플리케이션 첫 실행 시 자동으로 샘플 데이터가 생성됩니다:

• 게시글 6개
• 댓글 5개

샘플 데이터는 DataInitializer.java에 정의되어 있습니다.

주요 특징

1. 추천 기능

게시글에 추천 버튼이 있어 사용자가 좋아하는 게시글에 추천할 수 있습니다.

2. 정렬 기능

• 최신순: 작성일시 기준 내림차순
• 추천순: 추천 수가 많은 순서대로 정렬

3. 댓글 시스템

각 게시글에 댓글을 작성하고 삭제할 수 있습니다.

4. 반응형 디자인

모던한 UI/UX와 깔끔한 디자인으로 구현되었습니다.

빌드 및 배포

백엔드 빌드

./gradlew clean build

빌드된 JAR 파일은 build/libs/ 디렉토리에 생성됩니다.

프론트엔드 빌드

cd frontend
npm run build

빌드된 정적 파일은 frontend/build/ 디렉토리에 생성됩니다.

트러블슈팅

포트 충돌

• 백엔드 포트(8090) 또는 프론트엔드 포트(3000)가 이미 사용 중이면 다른 포트로 변경:
  • 백엔드: src/main/resources/application.properties에서 server.port 수정
  • 프론트엔드: 환경 변수 PORT=3001 npm start로 실행

CORS 에러

백엔드 컨트롤러에 @CrossOrigin(origins = "http://localhost:3000") 설정이 있어야 합니다.

라이센스

이 프로젝트는 교육 및 학습 목적으로 만들어졌습니다.

제작자

• 백엔드 & 프론트엔드: Claude Code
• 기반 프로젝트: react-board