배운 점

• styled-components를 사용해 봄으로서 CSS-in-JS 방식을 경험해 볼 수 있었고, 과거에 CSS-in-CSS (CSS-modules) 방식을 사용한 프로젝트가 있었는데 둘을 비교하면서 각 방식의 장단점을 알게 되었습니다.
• Firebase에서 호스팅 기능밖에 써 본 적이 없었는데, Authentication으로 간단하게 소셜 로그인을, Firestore Database로 DB를 사용할 수 있어서 부담을 덜 수 있었습니다.
• 상태 관리 라이브러리의 필요성을 느껴서 Recoil을 사용하였습니다. 메타에서 만들어져서 React 친화적이라고 해서 Redux 대신 사용해보기로 하였습니다.
• react-query를 사용하여 데이터를 가져오는 법에 대해 알게 되었습니다. 데이터를 캐싱할 수 있으며 로딩, 성공, 에러 등 다양한 상태를 감지해서 각각 처리하기 편했습니다.
• react-query의 useInfiniteQuery 훅을 통해 무한 스크롤 기능을 따로 구현하지 않고도 사용할 수 있어 편리했습니다. 스크롤 감지는 Intersection Observer API를 이용하였는데, 처음 써보긴 했지만 사용하기 쉬운 편이라 잘 이해하고 사용할 수 있었습니다.
• 코드 하이라이팅을 위해 여러 하이라이터를 찾다가 react-syntax-highlighter 라는 하이라이터를 사용하게 되었습니다. 테마도 많고, 컴포넌트 형태로 되어 있어 리액트에서 사용하기 적합하다고 판단했습니다.