팀과제 마무리

첫번째 팀 과제가 마무리됐다. 검색 자동완성이 메인이었는데 이번에 react-query를 통해 요청을 캐싱해보기도하고 debounce를 적용해 이벤트를 최적화하기도 했다. 몰랐던 기능을 다양하게 사용해볼 수 있어서 좋았다.

아쉬운 점

이번에 가장 아쉬운 점은 react-query의 useQueries를 활용하지 못했다는 점이다. axios.all을 사용해 여러개의 쿼리를 사용하긴 했지만 개인적으로는 useQueries를 활용해서 캐싱도 좀 더 적용하고 싶었는데 그러지 못했다.

문제가 됐던 건 요청 자체보다는 컴포넌트의 무한리렌더링이었다. useQueries를 반환받은 results라는 값을 useEffect의 dependency에 넣었는데 이게 같은 컴포넌트에서 useSelector로 가져오고 있는 state에 dispatch를 보냈을 때 리렌더링이 일어나면서 results가 엄청나게 많이 바뀌었다.

아무튼 이 현상을 극복하지못하고 결국 useQueries를 사용하지 못했는데 다음에는 제대로 사용해보고싶다.

강의

태그 사용

태그를 시멘틱하게 잘 사용하는것이 중요하다.

b 태그보다 mark 등 다른 태그를 사용. b는 bold라는 뜻인데 이게 왜 bold인지도 알 수 없고 이건 css로 처리할 부분이라 b태그를 사용하는건 추천하지 않는 것 같다.

인라인과 블록 태그를 구분해서 사용. 인라인 태그 안에 블록 태그를 넣지 말자.
사실 각 태그들이 인라인인지 블록인지 헷갈리고 잘 모르고 사용할 때가 많은데 한번 생각해 볼 필요가 있다.

차트 라이브러리

victory.js 를 사용하자!
강사님이 추천해준 라이브러리는 victory.js다.

victory.js의 장점은 리액트에서 사용이 굉장히 편하고 공식페이지에 문서가 굉장히 잘 작성돼있어서 참고하기도 쉽고 사용하기도 쉽다.

부동소수점

모든 프로그래밍 언어가 부동소수점 문제를 가지고 있겠지만 자바스크립트는 다른 언어에 비해 근본?이 없는? 편이기 때문에 더 주의해야한다.
당장 0.1 + 0.1 == 0.3이 false이기 때문이다.

이런 경우를 방지하기 위해 값이 굉장히 크거나 작아서 문제가 될 때는 bignumber.js 등 다른 라이브러리를 통해 처리한다