이번에는 댓글 CRUD를 구현하면서 페이지네이션을 구현해야 하는 과제였다.
많이 해봤어서 그닥 어렵다고 느껴지지는 않았지만, 이전의 다른 사람의 코드를 받아서 해야 했기 때문에 기존에 과제를 보고 생각했던 방향과는 다른 방향으로 구현을 했다(내꺼가 선택받지는 못했지만.)
이번에는 구조를 우리가 짜는 것이아니라 짜여져있는걸 받아서 crud를 구현하는 방식이었다. 외람된 말이지만 소스코드를 봤는데 정말 생각지도 못한 형태로 html이 짜여져있어서 벙쩌있었다. ㅎㅎ
이번엔 그닥 내가 코드를 짜면서 생각의 전환이 있다던가 깨달음이있다던가 그랬던 과제는 아니였어서, 인상 깊지는 않다. 이전과 다르게 월요일 저녁~수요일 저녁까지 끝내야했기에 더 맘 급하게 코드를 짰던 것 같다. 하지만 다시 구조부터 다시짜서 dnd 다시 해보는거 이후에 레포를 파서 해볼 예정이다. 시간이 촉박할 때랑 아닐때는 다를 거라 생각한다! 코드에 대한 글 작성도 그때 덧붙이기로!
구현 목표
- 댓글 작성하고 난 뒤: 다른 페이지에 위치하고 있었더라도 1페이지로 이동, 입력 폼 초기화
- 댓글 수정하고 난 뒤: 현재 보고있는 페이지 유지, 입력 폼 초기화
- 삭제하고 난 뒤: 1페이지로 이동
입력 폼 초기화
이 부분이 생각보다 애를 먹었는데 리덕스 thunk를 사용하는데 폼에다 수정을 위해서 defaultValue로 값을 넣어놨기 때문에 폼을 제출했을 때 값이 자동으로 초기화 되지 않았다.(onChange 이벤트가 실행될 때 계속 변경되는 value로 처리를 하기에는 잦은 렌더링을 야기할 것 같아 포기)
그래서 말도 안되지만 폼의 reset메서드를 인자로 넘겨볼까 하면서 말도 안되는 생각을 직접 코드를 옮기다가 장렬히 망했고, useEffect 훅을 사용해 commentData의 값이 변경될 때(수정을 위해 수정버튼을 눌렀을 때 해당 글의 내용을 dispatch했었다.) useRef를 통해 해당 폼을 reset해주도록 했었다. 정말 가독성 와우!
삭제하고 난 뒤: 1페이지로 이동
이 부분도 그냥 처리를 했었는데, 사이드 이펙트가 발생했다. 1페이지에서 삭제를 하게 된다면 계속 이전/다음 버튼이 사라져...! 어쩔수 없이 useEffect에서 글의 총 갯수를 의존성 배열에 추가해 해당 1페이지는 계속 get요청을 하도록 변경했다. 그래도 이전/다음 버튼이 연속으로 1페이지의 글을 삭제했을 때 버벅거리며 안나타나는 경우가 있어서, 버튼은 계속 존재하게 하되, 버튼에 disabled attribute를 추가해서 어떤 조건에 충족되지 않을 시 true가 되도록 설정했다.
하면서 아쉬웠던 점
이번 과제도 로컬로 json-server를 사용했기 때문에 사용자가 나 혼자임을 감안하면서 코드를 짰던 것 같다. 과제 구현 목표또한 그랬고.
근데 만약에 100명넘는 사람이 글을 작성하고 있고, 내가 글을 수정하는 와중에 글이 있던 페이지가 변경된다면 그때는 어떻게 해야하는 걸까? 삭제나 글을 등록할 때는 1페이지로 이동하면서 데이터를 다시 가져오도록 했는데, 수정은 어떻게 해야하는 걸까? 그냥 상태에 그 데이터만 수정 후 6페이지에 있어요~해야하는걸까? 그 부분이 궁금하다
12월 19일 부터 시작했던 프리온보딩은 종료됐다. 코드에 대해 좋은 코드가 무엇이며 나는 어떻게 짜야 하는것인가 라는 생각이 더 많이 들었던 기간이었다. 물론 라이브세션에 했던 내용들은 정확히 기억이 나지 않아 다시 복습이 필요하겠지만, 배운 점이 있다면 성공했던 시간투자가 아닐까 싶다. 카테고리는 학습 종료쪽으로 옮기겠지만, dnd나 이번과제나 부족한 점이 많으니 그 부분을 채워서 다시 구현해보고, 세션내용도 생각하면서 계속 내용을 추가할 것이다.
