[이상달] sprint9

[asksa1256]

요구사항

기본

목록 조회

• ‘로고’ 버튼을 클릭하면 ‘/’ 페이지로 이동합니다. (새로고침)
• 진행 중인 할 일과 완료된 할 일을 나누어 볼 수 있습니다.

할 일 추가

• 상단 입력창에 할 일 텍스트를 입력하고 추가하기 버튼을 클릭하거나 엔터를 치면 할 일을 새로 생성합니다.

할 일 완료

• 진행 중 할 일 항목의 왼쪽 버튼을 클릭하면 체크 표시가 되면서 완료 상태가 됩니다.
• 완료된 할 일 항목의 왼쪽 버튼을 다시 클릭하면 체크 표시가 사라지면서 진행 중 상태가 됩니다.

배포 링크

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

주요 변경사항

• react.js 프로젝트에서는 emotion을 썼었는데, next.js에서는 css-in-js 방식이 잘 안 맞는 것 같아서 tailwind를 사용했습니다.

스크린샷

데이터 없을 때

input 입력 시 '추가하기' 버튼 활성화

todo 추가

done 처리

항목 여러개 추가, done 처리

done 항목 todo로 복원

멘토에게

• 변경 라인 수가 되게 많아보이는데 package-lock.json 파일의 영향인 것 같습니다. 프로젝트 세팅하면서 적용된 변동사항이라 실질적인 변경 라인 수는 700줄 정도 되는 것 같습니다..!
• app router 방식으로 구현해봤는데, 리액트 코드랑 거의 차이가 없는 것 같아서 next.js의 장점을 잘 이용한 건지 모르겠습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
Next.js 첫 미션 스타트를 상달님이 끊어주셨군요 👍
구조적으로 고민해볼만한것 (에러 바운더리 사용 & api 관련 파일 관리) 리팩토링 제안 추천드리고,
Streaming SSR 기반으로 컴포넌트를 분리하는것에 대한 기법과 이점들 위주로 피드백 드려봤습니다!

주요 리뷰 포인트

• 에러 바운더리 사용 관련 제안
• Streaming SSR 장점 활용법
• api 관리 방식 리팩토링 제안
• TailwindCSS 공통된 유틸리티 클래스 지시어를 사용해 관리하기