최근 새로운 업무를 하며, 괴롭웠던 상황에 대해 몇자 적어보려 합니다.

React, next.js12, typescript로 구현하였습니다.

간단하게 업무에 대해 설명해보자면, 앱에 있는 파트 중 하나를 웹에도 동일하게 구현하는 업무로,

메인페이지, 상세페이지, 검색페이지, 리스트페이지로 구성되어 있었습니다.

그 중 리스트페이지가 특히 저를 무척 괴롭게 하였는데,

리스트페이지의 데이터의 분류를 과정에서 자괴감에 많이 빠졌습니다.

대분류의 탭을 선택하면 대분류의 종류에 따라 중분류의 여부가 결정되고

또한 중분류 내에서도 소분류가 있는 경우와 없는 경우가 존재하고,

이는 다른 분류가 탭으로 구현되는 것과 다르게 바텀시트로 구현되어야 하였습니다.

처음에는 이 부분이 그리 복잡하지 않을거라 생각하고, 역할을 나눠 훅을 만들었지만

연결되는 포인트가 엉켜있어, 제 스스로도 무척 헷갈리는 구조로 구현 되었습니다.

마지막에는 이 부분을 차라리 합쳐 명확성을 높이는 방향으로 수정하였습니다.

여기서 제가 느낀 문제는 복잡한 구조를 정리할 때, 기능들을 깔끔하게 구분하지 못한다는 점입니다.

해보지 못한 기능을 구현하려하니, 구현하다보면 처음에 생각했던 방향성과 다르게 흘러가고,