이번주는 크게 두 가지 측면에서 투자를 실패했다.
NextJS 와 React 중에서 선택해야 했는데, 멘토링 과정에서 NextJS 를 잘 활용하지 못하는 것 같다는 피드백을 떠올리고 NextJS, 그 중에서도 13 특화된 기능 위주로 공부하는데 시간을 썼다. 그리고 CSS-in-JS 라는 문제를 뒤늦게 발견하여 공부 및 13 특화 디렉토리 구조로 바꾸느라 썼던 시간이 하늘로 증발했다.
이틀을 그렇게 시간을 날려 React 특화된 내용을 다시 학습할 시간이 없었고, 대충 알고 있던 내용들로 어찌저찌 끼워맞춰서 개발을 한 느낌이 강하게 들며 그마저도 프로필 수정 validation 부분은 제대로 마치지도 못했다.
페이징은 흔히 두 가지 방식으로 구현할 수 있다. Offset-based, Cursor-based인데, 우리가 진행하는 프로젝트는 페이지 수를 띄워줄 필요가 없으므로 Cursor-based 로 구현하는 것이 성능상에 더 유리하다.
데이터들을 물리적으로 사전에 시간순 정렬하기 위해서는 Clustered Index 를 사용해야 하는데, 문제는 MongoDB는 이를 Clustered Collection 이라는 이름으로 지원하지만 Mongoose 및 NestJS Module이 이를 지원하지 않았다. 나는 이번주에 FE로 활동하여 직접 구현에 참여하진 않았지만 BE에서의 이야기를 들으면서 성능 개선을 위해서는 Cursor-based + Clustered Index가 필요하다고 하였고 이를 위해 Offset-based 페이징에서 Cursor-based 로 옮기고, 여기에 지원되지 않는 Clustered Collection 기능을 찾느라 BE에 많은 오버헤드가 걸렸다.
원하는 디자인을 구현하기 위한 CSS 를 잘 찾아내지 못해 답답했다. 이건 왜 안돼? 이건 왜 이래? 의 연속이었다. 개인적으로 풀스택을 할 일이 있다면 Tailwind 를 써야지 다짐하는 계기가 되었음.
리액트 JSX 컴포넌트에 ref 붙여서 무한 스크롤 구현하는 것은 재밌었다. 다만 이쪽도 상태 관리가 복잡해지는 폼 쪽에서는 머리가 지끈지끈.