어제 불현듯 기한 내에 다 마무리 할 수 있을까 조바심이 들었지만 오늘 생각보다 여유롭게 필수 기능을 거의 다 마무리한 것 같다. :]
오늘은 TODOS-CSR 페이지의 투두리스트 삭제하기를 완료한 뒤 상세페이지 및 수정 기능을 완료하고, TODOS-SSR까지 일단은 완료했다.
나 근데 SSG, ISR, CSR, SSR 너무 헷갈린다... 흑흑흑
클라이언트사이드, 서버사이드 이렇게 풀어서 얘기하면 바로바로 이해가 되는데 SSG, CSR 이렇게 줄임말로 휙휙휙 빠르게 얘기해버리면 뇌에 부하가 온다🥹🥹🥹 그래도 이번 개인 프로젝트를 통해서 처음에 막막하기만 했던 Next.js와 TypeScript, 그리고 Tailwind까지 조금은 익숙해 진 것 같은 느낌이 든다.
😦사실 item.id를 백엔드에 전달할 필요가 없었다
그 동안 삭제하기, 수정하기 할 때 해당 게시글의 id를 함께 보내줬었는데, /todos/${id} 엔드포인트로 요청을 보내기 때문에 백엔드에서 이 URL로부터 id값을 뽑아낼 수 있기 때문에 프론트에서 id를 굳이 전달할 필요가 없었다🤔
바로 요렇게 작성하면 된다. 요 게시글을 수정해주세요 하고 todos/${id} 엔드포인트로 PATCH 요청을 보낸다. 이 때 수정된 내용 editedTodo 객체를 body 라벨 붙여서 함께 보내준다.
그럼 프론트의 요청을 받은 백엔드에서는 요청 URL로부터 id값을 뽑아낼 수 있다. '이것이 id예요!' 하고 id값을 따로 전달해 주지 않아도 된다. 이 뽑아낸 id값을 사용해서 백엔드는 서버에 또다시 요청을 한다.
프론트가 body 라벨을 붙여서 전달한 내용을 json() 풀었다가 확인하고 서버로 요청 보낼 때는 또다시 JSON.stringify 박스 포장해서 보낸닿ㅎㅎㅎ 풀었다 포장했다 풀었다 포장했다... 무한 제이슨의 굴레 .. .. . .
수정을 완료하면 200 응답을 보내고 아 근데 지금 생각해보니 반환값이 없으니 204 응답이어야 할 것 같은 느낌 실패하면 500 응답을 반환한다.
🤪useRouter는 next/navigation에서 import하자!!
실시간 강의 때 나는 나름 집중해서 잘 들었다고 생각했는데 그러고 나서 분반 수업에서 튜터님이 useRouter 말씀하시는데 마치 처음 들어본 개념인 것처럼 머릿속이 텅 비어있음을 느꼈다.
사실 나 조금 졸았던 걸까......? 아무래도 집중력이 많이 흐려졌던 때에 지나간 내용인 것 같다.
여튼 여기에 있는 'Todo 통계 보기' 버튼을 클릭하면 useRouter를 통해 REPORT 페이지로 이동해야 한다.
useRouter를 import할 때 선택지가 2개 나오는데 next/router 말고 next/navigation에서 가져와야 한다... 이거 때문에 처음에 조금 헤맸는데... 생각해보니 실시간 강의 때 튜터님이 이거 잘못 import 해놓고 질문하러 오면 돌려보낼 거라고 하셨던 것 같기도 하다....?
무사히 import 했다면, 버튼 온클릭 함수에서 실행해준다. 그냥 단순히 페이지를 이동하는 내용이기 때문에 router.push를 해주면 된다.
반면, 상세페이지에서 Todo 삭제를 한 뒤 Todo 목록으로 넘어갈 때에는 삭제 처리 후 삭제된 게시글로 뒤로가기할 수 없게끔 router.replace를 사용해 주는 것이 인지상정이다.
으음... CRUD에서 U가 제일 어렵다고 이 블로그 전반에 걸쳐서 오바육바 해왔는데 이번에는 생각보다 U가 그렇게 어렵지 않았다🥹🥹🥹
오히려 맨 처음에 R이랑 C 할 때가 TypeScript고 뭐고 Next.js고 뭐고 하나도 익숙하지 않고 낯설어서 가장 어려웠다. 그냥 데이터 받아와서 뿌리면 되는 건데 늘 그렇듯 새로운 프레임워크를 처음으로 사용해 보는 거라 그게 가장 어려웠던 것 같다.
이번 과제의 핵심은 Next.js 프로젝트에서 네스티드 폴더링 기반 라우팅, 4가지 렌더링 방식, 프론트엔드 요청과 백엔드 요청의 차이점과 라우트 핸들러 등을 이해하고 적용해 보는 것에 있는 것 같다.
