이 글은 2026년 05월 29일 작성된 글입니다.
오늘은 Next.js 프론트엔드와 Spring Boot REST API를 연동하여 게시글과 댓글의 CRUD 기능을 구현했다. 또한 DTO 설계 원칙과 API 응답 구조에 대해 학습했다.
1. apiFetch 확장
기존 GET 요청만 처리하던 apiFetch 함수를 확장하여 POST 요청도 처리할 수 있도록 개선했다.
await apiFetch("/api/v1/posts", {
method: "POST",
body: JSON.stringify(data),
});핵심
- GET, POST 요청을 공통 함수로 처리
- 기본 headers 설정 추가
- 중복 코드 감소
2. 게시글 작성 기능
게시글 작성 후 성공 메시지를 출력하고 상세 페이지로 이동하도록 구현했다.
router.replace(`/posts/${id}`);핵심
- 작성 완료 후 상세 페이지 이동
- replace 사용으로 뒤로가기 시 작성 페이지 재진입 방지
- autofocus 적용
3. 게시글 삭제 기능
게시글 삭제 API와 연동하고 사용자 확인 절차를 추가했다.
if (confirm("정말 삭제하시겠습니까?")) {
// 삭제 요청
}핵심
- 삭제 전 확인 창 제공
- 삭제 완료 후 목록 페이지 이동
4. 게시글 수정 기능
수정 페이지를 구현하고 기존 데이터를 불러와 수정 API와 연동했다.
setTitle(post.title);
setContent(post.content);핵심
- 수정 폼 구현
- 기존 데이터 자동 입력
- 수정 API 호출
5. 댓글 목록 조회
댓글 다건 조회 API를 연동하고 로딩 상태를 처리했다.
const [comments, setComments] = useState<PostCommentDto[] | null>(null);핵심
- 댓글 목록 API 연동
- 로딩 상태 표시
- 댓글 DTO 타입 정의
6. 상태 초기값을 null로 두는 이유
const [comments, setComments] = useState<PostCommentDto[] | null>(null);핵심
- null → 로딩 중
- [] → 데이터 없음
초기값을 빈 배열로 두면 로딩 중인지 데이터가 없는지 구분할 수 없다.
7. 댓글 삭제
댓글 삭제 후 상태값을 직접 수정하여 화면에 즉시 반영되도록 구현했다.
setComments(
comments.filter(comment => comment.id !== id)
);핵심
- 새로고침 없이 UI 갱신
- 상태 기반 렌더링 활용
8. 댓글 등록
댓글 작성 폼을 구현하고 등록 즉시 화면에 반영되도록 처리했다.
setComments([...comments, newComment]);핵심
- 댓글 등록 API 연동
- 실시간 UI 갱신
9. DTO 설계 원칙
DTO에는 꼭 필요한 데이터만 포함해야 한다.
좋은 예시
{
"id": 4,
"authorName": "유저3",
"content": "댓글 2-1"
}좋지 않은 예시
{
"author": {
...
},
"post": {
...
}
}핵심
- 최소 공개 원칙
- 필요한 데이터만 응답
- 엔티티 직접 노출 지양
10. 작성자 정보 추가
게시글과 댓글에 작성자 정보를 추가했다.
@ManyToOne
private Member author;핵심
- 게시글 작성자 관리
- 댓글 작성자 관리
- DTO에는 authorName만 노출
✅ 정리
- apiFetch를 확장하여 GET과 POST 요청을 공통 처리할 수 있게 만들었다.
- 게시글 작성, 수정, 삭제 기능을 REST API와 연동했다.
- 댓글 조회, 등록, 삭제 기능을 구현하고 상태 변경으로 UI를 즉시 갱신했다.
- 상태 초기값을 null로 두어 로딩 상태와 빈 데이터를 구분할 수 있게 했다.
- DTO에는 필요한 데이터만 담아 최소 공개 원칙을 적용했다.
- 게시글과 댓글에 작성자 정보를 추가하여 데이터 구조를 확장했다.
