개발일지 2024-08-13(화)

오전까지 기존 리스트 형태의 관계 코드들을 트리구조 형식으로 변경하는 작업을 했다. 기획전 기술검토 단계라 트리 구조로 뿌려주고 다시 그 형태를 children하위 값을 넣어 반복되는 구조로 변경하는 개발을 진행해야했다. child item을 호출하기 전 parent키를 전달하여 그 값에 대응되는 체크박스 상태값들을 저장하는 방식으로 머릿속으로 구상했지만, 개발 착수 전 개발 업무가 날라가버렸다. 일정상 관계 설정은 추후에 진행해야할 것 같고, 현재 급한 메뉴부터 진행해야하는 상황이었다. 내부 개발일정상 밀려난 거라 어쩔수없이 수긍했고, 회계-원장 메뉴를 개발을 담당하게 됐다. 원장은 분개, 분개장, 계정별원장, 합계금액시산표 등 다양한 용어들이 등장해 한번 숙지한 후에 화면 레이아웃 개발을 진행했다.

우선 메뉴를 라우터에 매핑되도록 했다. 탭 메뉴를 상태 값으로 관리하려고 했고, 초기값은 location에서 가져오도록 했다. 각 메뉴 변경시, 라우터가 변경되도록 하였다. 라우터를 추가하는데 react-router-dom에서는 성능상 이슈가 없는 것으로 확인하여 라우터를 변경시킴으로써 메뉴가 변경되도록 설계했다. 상태만으로 관리하게 된다면 새로고침과 같은 사이드이펙트가 발생할 것 같아 url에서 값을 추출하고, 값에 따라 메뉴가 변경되는 방식을 채택하였다.

메뉴 컴포넌트는 관리하기 편리하게 컴포넌트로 추출하였고, 메뉴 제어 로직은 hook에 묶어두었다.

레이아웃은 구성완료했고, 이제 각 화면마다 뿌려줄 데이터 필터섹션과 테이블을 세팅해야한다. 각각 컴포넌트를 만들고, 컬럼 데이터는 hooks에서 공통적으로 관리되도록 구성하려 한다. 오늘은 여기까지...