20231205 퇴근 전 TIL

어드민 페이지 유지보수 도중, 오늘은 꽤 여러 종류의 문제를 마주치고 해결했다. 

 

1. 상이한 두 데이터 구조를 각각 순회해야 하는 경우 -> 순회 한번을 if문 처리로 생략하게 했는데, 향후 확장 사용하기 어려운 구조가 되어 아쉬웠다. 이후 리팩토링하면서 해당 데이터 구조를 손볼 예정

 

2. toISOString 과 잃어버린 9시간

 -> 한 달 전체 날짜 객체를 포함한 배열을 만드려고 하던 도중, 날짜 포맷을 바꾸려고 toISOString 메서드를 사용했다. 그런데 1일부터 31일까지가 아니라, 이전 달 말일부터 이번 달 말일 -1 까지만 나오는게 아닌가 ...? 

 

찾아보니 toISOString은 UTC 시간대라서 우리나라 타임존과 9시간의 시차가 있기 때문이었다 ... 

항상 느끼지만 타임존을 다루는 것은 생각보다 더 고도의 꼼꼼함을 필요로 한다. 타임존 관리만 잘 해도 개발 생산성 높아질 것 같은데, 타임존 관리 케이스들을 찾아보고 적용해봐야겠음!

 

3. react-csv와 엑셀 다운로드

-> 테이블에 보여주는 데이터를 엑셀 다운로드하는 기능을 구현했다. 몇가지 사항을 꼼꼼히 체크하지 못해 트러블슈팅에 꽤 많은 시간을 쏟았다.

 - 데이터와 헤더로 넘겨준 값의 key값이 일치해야 데이터를 긁어와 엑셀 파일로 보여줄 수 있다.

 - 타임스탬프 형식이 지정되어있다면 유의하여 파일명 꼼꼼히 확인하기

 

4. 연, 월 select의 경우 오름차순 / 내림차순을 통일하는 것이 사소해보이지만 꼼꼼히 신경쓰지 않으면 놓치기 쉽다.

 

5. 불필요한 API 요청 줄이기

 -> 화면 진입 시 연결된 코인 리스트를 불러오는 요청, 해당 코인 리스트별 잔액을 보여주는 요청 2가지가 전송되는 형태였다. 해당 코인 리스트를 통해 잔액 보여주는 요청을 전달해야하기에, 두 요청에 async - await을 걸어 순서대로 요청중이었다. 그런데, 화면 진입 후에는 코인 리스트를 불러오는 것은 불필요함에도 검색 옵션을 바꾸어 조회시마다 두 요청이 모두 전송되어 불필요한 API 요청이 발생중이었다. 이에, apollo client 의 fetchPolicy에서 cache-first로 첫 진입 시 캐싱해주는 것으로 개선하였다! 

 

이처럼 놓치기 쉬운 API 요청만 관리해주어도 성능을 개선할 수 있는 것 같다.

그리고 dev에 릴리즈 전 로컬에서 더 꼼꼼히 확인하기... 왜 dev에 올린 후에야 놓친 것들이 보이는지! ㅠㅠ