React 및 Node.js CMS 시리즈: 고급 게시물 편집 기능 구현

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *React 및 Node.js 기반 CMS 개발자**

- 난이도: 중간 (프론트엔드/백엔드 연동 및 Redux 사용 필요)

- 주요 역량: REST API 설계, MongoDB 사용, React 상태 관리

핵심 요약

• 백엔드: get/:slug, post/update, post/remove 라우트 생성 및 Mongoose findOne, findOneAndUpdate, deleteOne 활용
• 프론트엔드: useNavigate로 게시물 편집 페이지 이동, getPostBySlug API로 데이터 로딩
• Redux: SET_UPDATE_POST_CLONE 액션 타입으로 기존 게시물 복사본 관리

섹션별 세부 요약

1. 백엔드 라우트 및 컨트롤러 구현

• posts.router.js에 get/:slug, post/update, post/remove 라우트 추가
• getPostBySlug, updatePost, removePost 컨트롤러에서 Mongoose 메서드 호출
• 예시: postsRouter.get('/:slug', postsController.getPostBySlug);

2. Mongoose 모델에서 데이터 처리

• getPostBySlug: findOne({ slug })로 게시물 조회
• updatePost: findOneAndUpdate({ _id: payload._id }, payload, { new: true })로 업데이트
• removePost: deleteOne({ _id: payload._id })로 삭제

3. 프론트엔드 편집 기능 연동

• TableComponent에서 useNavigate로 PostForm 이동 (URL에 slug 포함)
• getPostBySlug 서비스로 데이터 요청 후 폼 초기화
• Redux 액션 aSetUpdatePostClone으로 기존 게시물 복사본 저장

결론

• 핵심 팁: Redux를 활용해 편집 전/후 게시물 상태를 비교하고, useNavigate로 URL 기반 라우팅을 구현
• 실무 적용: POST 메서드로 삭제 기능 구현 시 보안 고려 필요 (예: 인증 토큰 추가)