목차

목표 정산

이번 주에 목표로 둔 사항들은 아래와 같다.

• 관리자 페이지 기능 구현
  • 앞서 View를 구현한 관리자 로그인, 회원가입 등의 페이지들의 Firebase 기능 연동
  • Firebase Auth의 기능들을 적극적으로 활용
• 사용자 대기 입력 페이지 Firebase 기능 연동
• React-Query 학습
  • 사실상 위의 두 과정을 모두 적용하기 위해서는 React-Query의 학습이 필수불가결이다.
    • 왜 서버 상태 관리가 필요한지?
    • 페칭과 캐시, 그리고 쿼리란 무엇인지?
    • React-Query의 기본 환경 설정, QueryClinet와 QueryClientProvider
    • 그리고 React-Query 사용의 핵심인 useQuery와 useMutation
      • 일단은 여기까지 우선적으로 공부하고 이해하여 정리하기로.

이번 주의 가장 큰 고비는 사실 React-Query였다. Redux Toolkit의 thunk 방식에 익숙한 입장에서는 React-Query의 useQuery와 useMutation은 너무나도 낯선 존재였고, 공부할 때마다 하나하나 동작이 되지 않는 문제를 거쳐가다보니 학습 자체가 고통스러웠다.

그래도 동작이 잘 되는 것도 보고, 하나하나씩 계속해서 쓰다보니까 안다고 말하기에는 아직 미묘하다고 생각하지만 발가락을 살짝 담가본 느낌이 드는 것 같았다.

고통스러운 React-Query 도전기

저번 주도 그랬지만 useQuery를 공부하는 데에서 많이 힘들었던 부분은 페칭, 캐시, 쿼리의 의미와 stale과 cache를 이해하는 거였다.

지금도 완전히 이해하는 건 아니지만, 어렵기 때문에 어떻게든 쉽게 이해하기 위해 구글과 유튜브를 계속해서 검색하고 보고, 읽고, 써보고, 정리해가면서 겨우겨우 내 것으로 만들어 낸 것 같다.

하지만, useQuery말고도 핵심적으로 쓰이는 다른 hook이 하나 더 있었으니, 바로 useMutation이다.

useQuery가 데이터를 받아오는 데에 쓰인다면, useMutation은 데이터를 추가, 수정, 삭제하는 데에 쓰인다.

그러다보니 useQuery 만큼이나 어떻게 쓰이는지를 이해하는 게 중요했고, 다른 사람들의 예시 코드들을 참고하면서 사용법을 알아가려고 했지만 useQuery와 마찬가지로 코드 흐름을 이해하는 것 자체가 너무나도 버거웠다.