[이상달] sprint10

[asksa1256]

요구사항

• 할 일 수정

  • 할 일 항목을 클릭한 후 항목 수정이 가능합니다.
  • 항목 이름을 수정할 수 있습니다.
  • 할 일 상태(진행/완료)를 수정할 수 있습니다.
  • 메모를 추가할 수 있습니다.
  • 이미지(최대 1개)를 첨부할 수 있습니다.
    • 이미지 파일 이름은 영어로만 이루어져야 합니다.
    • 파일 크기는 5MB 이하여야 합니다.
  • 수정 완료 버튼을 클릭하면 수정 사항이 반영되고, 할 일 목록 페이지로 이동합니다.

• 할 일 삭제

  • 삭제하기 버튼을 클릭하면 할 일 삭제가 가능하며, 삭제 후 할 일 목록 페이지로 이동합니다.

배포 링크

https://doit-next-sd.netlify.app/

주요 변경사항

• app/page.tsx를 CSR → SSR 방식으로 변경함으로써 서버 컴포넌트를 활용했습니다.
• 기존 api 요청 로직을 react query v5의 useQuery/useMutation 구조로 변경했습니다.
  • todo list는 SEO가 별로 중요하지 않다고 생각하지만, 리액트 쿼리의 prefetchQuery + dehydrate 패턴을 적용해 SSR로 구현하면 기존의 CSR로 데이터 패칭했을 때와 어떤 차이점이 있는지 알아보고 싶어서 적용해봤습니다. (확실히 초기 데이터 패칭 시 이미지도 빠르게 로드되는 것 같네요..!)

스크린샷

할 일 수정

수정 사항이 목록에 반영된 모습

할 일 - todo/done 상태 변경

todo/done 변경 상태가 목록에 반영된 모습

파일명/파일크기 검증

할 일 삭제

멘토에게

• 프로젝트나 미션처럼 백엔드 서버와 api가 따로 있는 경우에는 next.js의 api routes를 사용하게 되지 않던데, 주로 어떤 경우에 api routes를 사용하는 건지 잘 모르겠습니다. 아직까지는 토큰을 쿠키로 저장할 때만 써봤는데, 다른 구체적인 사용 예시가 있다면 알려주시면 감사하겠습니다!
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
코드 퀄리티가 더 늘어오셨네요 ;) 이대로 쭉 가봅시다 ㅎㅎ
크리티컬한 수정사항은 없고, 설계와 컨벤션 측면에서 도움될만한 코멘트 위주로 남겨드려봤어요 :)

주요 리뷰 포인트

• 코드 중복 제거 및 재사용성 향상을 위한 wrapper 컴포넌트 만들기
• 이중 삼항 연산자 사용 지양하기
• TodoUpdateForm 관심사 분리
• next config를 활용한 이미지 최적화 방법 제안

[addiescode-sj]

질문에 대한 답변

멘토에게

• 프로젝트나 미션처럼 백엔드 서버와 api가 따로 있는 경우에는 next.js의 api routes를 사용하게 되지 않던데, 주로 어떤 경우에 api routes를 사용하는 건지 잘 모르겠습니다. 아직까지는 토큰을 쿠키로 저장할 때만 써봤는데, 다른 구체적인 사용 예시가 있다면 알려주시면 감사하겠습니다!
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

복잡한 비즈니스 로직 & 대용량 처리가 필요한 경우가 아니고,
api 엔드포인트를 따로 개발하기엔 리소스적인 측면에서 공수가 필요할때 많이 씁니다.

보통 외부 API를 래핑하거나, 인증 처리하거나, WebSocket 대안으로 실시간 폴링 처리할때 많이 쓰게되는것같아요.
예를 들어 저의 경우에는 외부 API를 사용하는 과정에서 메타 정보가 유실되는 경우가 있어 해당 API의 요청과 응답을 원하는대로 바꿔주기 위해 사용한 경험이 있고(외부 API 래핑 처리), 이 경우와 비슷하게 외부 API를 직접 호출하는 과정에서 CORS 문제나 API 키 노출 등의 이슈가 있을 때 사용되기도합니다.