[나만의 게시판] | CRUD :: RESTful 게시판 개발 입문기
언어와 프레임 워크 선택의 이유 : Java & Spring Boot
나만무 프로젝트를 본격적으로 시작하기 전,
1주일의 시간이 주어졌다.
" 나만의 무기 갖기 프로젝트를 대비하여, 각자 원하는 프레임워크를 학습하는 시간을 갖습니다. "
학습하기에 너무나도 짧은 시간이었고,
아직 나만무 팀이 결성되기 이전이었으며,
나만무에서 어떤 프레임 워크를 쓸지도 정해지지 않은 상황.
나는 Java도 처음이고, Spring Boot도 처음이었다.
사실 처음 배우는 입장이라면 Node.js를 선택하라는 조언이 있었지만,
Spring Boot를 선택했다.
이번 1주일의 목적은 '기본기 갖추기'이다.
빠르게 익히고 만들기 보다, 제대로 만들어 보고 싶었다.
Spring Boot는 명확한 구조, 엄격한 프레임워크, 실무에서의 활용도 면에서
개념을 탄탄하게 익히기 좋은 환경이라 판단했다.
어렵더라도 Java의 문법과 Spring의 구조를 이해하면서
기초부터 객체지향적인 사고와 계층 설계의 감각을 익히는 것이 더 가치 있다고 느꼈다.
구현 목표 : 나만의 요리 게시판 만들기
처음 도전하는 풀스택 개발로,
나만의 요리 레시피를 올리고 공유할 수 있는 게시판을 만들었다.
구현해야할 주요 기능은 아래와 같다.
핵심 기능 (CRUD)
- 회원가입 / 로그인
- 레시피 게시물 작성
- 게시물 목록 보기
- 게시물 상세 보기
- 댓글 작성 및 삭제
개발 범위 & 기술 스택
| 영역 | 사용 기술 |
|---|---|
| 프론트엔드 | React 18 + Bootstrap 5 |
| 백엔드 | Spring Boot 3.5.0 + Spring Data JPA |
| 데이터베이스 | MySQL |
| 개발 도구 | IntelliJ IDEA, VS Code, Postman |
시스템 아키텍처
아키텍처 설계 이유
계층적 설계
백엔드는 Controller → Service → Repository로 명확히 역할을 나눠 유지보수성과 테스트 용이성을 높였다.
이를 통해 처음이라도 각 계층의 책임을 자연스럽게 익히고, 설계 감각을 기를 수 있었다.React + REST API 통신 구조 채택
API 명세서 기반으로 요청과 응답을 주고받는 방식에 익숙해질 수 있었다.
이는 이후 팀 프로젝트나 실무 협업에도 큰 도움이 될 것이라 생각했다.JPA 기반 ORM 구조 학습
단순 SQL이 아닌 객체지향적인 방식으로 DB를 다루며, Entity 설계 → 관계 매핑 → CRUD 처리까지의 전반적인 흐름을 체득하고자 했다.
이 구조는 실무에서도 가장 보편적으로 사용된다고 한다.
🐭 처음 직접 ‘설계’를 고민해 본 프로젝트였기에,
좋은 설계가 무엇인지, 계층은 왜 나누는지 하나하나 배워가는 시간이기도 했다.
관련해서 따로 정리한 글도 블로그에 올릴 예정이다.
프로젝트 구조 요약
[ Backend ]
recipeboard/ ├── controller/ ├── domain/ ├── repository/ └── service/
[ Frontend ]
front/ ├── components/ ├── contexts/ └── services/
ERD 설계
- User: 회원 정보 (ID, 이름, 비밀번호)
- Recipe: 게시물 정보 (제목, 내용, 이미지, 카테고리 등)
- Comment: 댓글 (작성자, 내용, 소속된 레시피)
관계:
User1:NRecipe
Recipe1:NComment
API 명세 요약
💡 설계의 근거 : RESTful API
[ 인증 ]
| Method | URL | 설명 |
|---|---|---|
| POST | /signup | 회원가입 |
| POST | /login | 로그인 |
[ 레시피 ]
| Method | URL | 설명 |
|---|---|---|
| GET | /recipes | 레시피 목록 조회 |
| GET | /recipes/{id} | 레시피 상세 조회 |
| POST | /recipes | 레시피 작성 |
| PUT | /recipes/{id} | 레시피 수정 |
| DELETE | /recipes/{id} | 레시피 삭제 |
[ 댓글 ]
GET /recipes/{id}/comments
POST /recipes/{id}/comments
PUT /recipes/{id}/comments/{commentId}
DELETE /recipes/{id}/comments/{commentId}
주요 기능 소개
사용자 인증
- React Context API로 상태 관리
- 로그인 상태 유지 (localStorage)
- 인증된 사용자만 글 작성 가능
레시피 카드 UI
- 호버 시 이미지 표시
- 반응형 그리드
- Bootstrap 기반 디자인
로딩 애니메이션
- 귀여운 주방장 SVG
- 상세 진입 시 등장
댓글 시스템
- 실시간 작성/수정/삭제
- 작성자만 삭제 가능
회고: Try & Error
- 댓글 작성 시 사용자 정보 누락
- 원인: 로그인 응답에 ID가 없음
- 해결: 로그인 API 응답에 ID 추가
- 상태 동기화 지연
- 원인: Context 미사용
- 해결: React Context로 전역 상태 관리
- 레시피 수정 시 권한 체크 오류
- 문제: 작성자가 아닌 사람도 수정 가능
- 해결: 백엔드에서 사용자 ID 검증 추가
