Skip to content

[홍명주] Sprint8#126

Merged
gyulrangdev merged 25 commits intocodeit-sprint-fullstack:next-홍명주from
MyeongjuHong:next-홍명주
Sep 30, 2025

Hidden character warning

The head ref may contain hidden characters: "next-\ud64d\uba85\uc8fc"
Merged

[홍명주] Sprint8#126
gyulrangdev merged 25 commits intocodeit-sprint-fullstack:next-홍명주from
MyeongjuHong:next-홍명주

Conversation

@MyeongjuHong
Copy link
Collaborator

@MyeongjuHong MyeongjuHong commented Sep 22, 2025

요구사항

기본 요구사항

공통

  • Github에 스프린트 미션 PR을 만들어 주세요.
  • Next.js를 사용해 진행합니다.

자유 게시판 페이지

  • 게시글 목록에서 드롭다운을 사용하여 "최신 순"으로 정렬할 수 있도록 합니다.
  • 본인이 이전 미션에서 생성한 게시글 목록 조회 API를 활용해 GET 메서드로 데이터를 가져옵니다.
  • 게시글 제목에 검색어가 일부 포함되면 해당 게시글을 검색할 수 있도록 합니다.
  • 이미지는 디폴트 이미지로 프론트엔드에서 처리해 주세요.
  • 게시글 닉네임 및 좋아요 개수 역시 임의값으로 프론트엔드에서 처리해주세요.
  • 베스트 게시글은 최신순 3개 게시글을 요청으로 데이터를 가져와 구현해주세요.
  • 자유게시판 페이지에서 특정 게시글을 클릭하면 해당 게시물의 상세 페이지로 이동합니다.

게시글 등록 & 수정 페이지

  • 각 input 필드에 정확한 placeholder 값을 입력합니다.
  • 모든 input 필드에 값을 입력하면 '등록' 버튼이 활성화됩니다.
  • 본인이 이전 미션에서 생성한 게시글 생성 API를 활용해 POST 메서드로 게시글을 등록합니다.
  • '등록' 버튼을 누르면 해당 게시물 상세 페이지로 이동합니다.
  • 게시글 수정 페이지 UI는 게시글 등록 페이지와 동일합니다.
  • 본인이 이전 미션에서 생성한 게시글 상세 API의 PATCH 메소드를 사용하여 게시물을 수정합니다.

게시글 상세 페이지

  • 본인이 이전 미션에서 생성한 게시글 상세 API의 GET 메소드를 사용하여 데이터를 가져옵니다.
  • 본인이 이전 미션에서 생성한 게시글 상세 API의 DELETE 메소드를 사용하여 게시물을 삭제합니다.
  • 댓글 input에 값을 입력하면 '등록' 버튼이 활성화됩니다.
  • 본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 POST 메소드로 댓글을 등록합니다.
  • 본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 PATCH 메소드로 댓글을 수정합니다.
  • 본인이 이전 미션에서 생성한 댓글 생성 API를 활용해 DELETE 메소드로 댓글을 삭제합니다.

심화 요구사항

공통

  • 디자인 시안에 따라 반응형 디자인을 구현합니다.
  • (생략 가능) 원한다면 지금까지 진행한 모든 React 코드를 Next.js로 마이그레이션 해주세요.
    • 마이그레이션에 상당한 시간이 소요될 수 있으므로 진행을 권장하지 않습니다.

주요 변경사항

  • 자유 게시판 페이지 추가
  • 게시글 등록 & 수정 페이지 추가
  • 게시글 상세 페이지 추가

스크린샷

멘토에게

  • 이전 스프린트 미완료 사유로 불가피하게 json-server로 데이터를 저장해 작업했습니다.
  • 월요일에 댓글 CUD와 리스트 정렬,검색, 그리고 tailwind 스타일 적용까지 끝내겠습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다. 감사합니다.

Copy link
Collaborator

@gyulrangdev gyulrangdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

대부분의 기능을 잘 구현해주셨고 특히 서버 컴포넌트, 클라이언트 컴포넌트를 나누어 사용하신 코드가 인상적이었습니다.
고생하셨습니다~

sort === "latest" ? "_sort=-createdAt" : "_sort=-likes";

try {
const res = await fetch(`http://localhost:4000/posts?${sortParams}`);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fetch의 모든 곳에서 http://localhost:4000 가 하드코딩 되어있습니다. 환경변수로 관리해보시면 어떨까요?


const BoardDetailPage = async ({ params }) => {
const { id } = await params;
const res = await fetch(`http://localhost:4000/posts/${id}`);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fetch가 실패할 케이스의 에러 처리가 필요해보여요


if (!res.ok) {
alert("게시글 삭제에 실패했습니다.");
console.error(res.statusText);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

에러 이후에도 성공 로직이 실행하게 되어있어요. return; 추가가 필요해보입니다.

const res = await fetch(`http://localhost:4000/posts?${sortParams}`);

if (!res.ok) {
throw new Error("response error: ", res.statusText);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

javascript의 Error 객체 생성자를 참고해보세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error/Error#%EC%98%88%EC%A0%9C

만일 message의 용도로 사용하셨다면 하나의 string으로 만드셔야 할 것 같아요.

@gyulrangdev gyulrangdev merged commit e4fda98 into codeit-sprint-fullstack:next-홍명주 Sep 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants