개발일지 2024-07-29

체크박스 상태값을 트래킹하여 체크여부에 따라 테이블 컬럼을 변경하는 로직을 짰다. react-hook-form을 사용하고 있는터라, useForm의 객체를 binding하여 상태가 변경된 이후 columns을 변경하는 로직으로 구조를 설계했다.

카드를 선택함에 따라서 카드의 선택 여부를 나타내는 네비게이션 제어하는 기능을 개발했다. 카드 네비게이션 색상과 카드를 선택했을때, 색상을 고려해야했고, 카드 선택에 대한 값을 컴포넌트간에 공유를 해야했기 때문에 recoil 셀렉터를 사용했다. 셀렉터 기본값은 null값을 허용했다. 그 이유는 빈값에 대한 명시적인 값을 넣어 관리하고 싶었기 때문이다. null체크를 해야하는 번거로움이 있지만, string을 단일 타입을 사용했을때, 역시 string의 빈값을 점검해야하기 때문에 로직 동일하다. 따라서 null 허용이 보다 명시적으로 나타낼 수 있다고 생각하여 nullable한 타입을 선택했다.

카드 내부의 row를 가져오는 로직을 수정했다. 기획에 대한 모호한 부분을 놓쳐 row마다 상태값을 추가했다. activate 여부에 따라 색상을 다르게 가져가도록 했다. activate가 false인 row는 color를 회색으로 처리했다.

여기서 row에 대한 값을 추출하는게 문제였는데, 공통코드를 가져오는 리스트는 단 하나밖에 존재하지 않았고, 따라서 FE에서 가공을 해줘야하는 상황이다. value를 갖고 data > list > codeValue 의 값이 일치하는 list를 추출하는 로직이 필요했다. 따라서 각 row 마다 list만큼의 순환을 만들었고 이는 FE 성능에 영향을 미칠것이다. 다행히 data.list의 길이는 99정도 되는데 이정도로는 부하가 안걸리나보다. 사전에 리스트를 추출하기 편리한 데이터구조를 만든다음 value를 hash 알고리즘으로 가져오도록 변경할 수 있을것 같은데… 일단 일정이 이틀밖에 안남았으니, 다음에 리팩터링 하는걸로... 오늘은 여기까지...