[RQ(29)]Lazy Days Spa 앱 입문

앱이 한 page 이상일 때 react-query가 어떻게 작동하는지 알아보자.

우리가 배울 것

• 설정하는 법
• 오류 중앙 집중화
• 콜백을 로드
• component에 바로 useQuery를 쓰기보단, Custom hooks를 사용한다.

• 서버를 변경해도 해당 변경 사항은 우리가 소유한 서버이기 때문에 유지된다.
• client랑 server 폴더 모두 다운로드 하고 둘다 npm install 해야함
• server의 경우 .env 파일 생성하고, express secret을 추가하야함
  • 인증을 위해 json 웹 토큰을 사용하기 때문에 필수적.
  • 우리가 사용하는 json 웹 토큰 라이브러리는 암호화를 위해 express secret을 사용함.
    
    server 에서 npm install 하는 코드

env 파일을 열어서 EXPRESS SECRET 을 설정할 것임.

vi .env

EXPRESS_SECRET
: 뭐든 상관없음. JSON 웹 토큰 암호화를 안전하게 유지하기 위한 것.

• 이처럼 공용 서버에서 실행할 일이 거의 없으므로, 자신만의 secret 키를 만드는게 의미는 없지만 꽤 일반적임

client 폴더 가서

npm install

우리가 살펴볼 것

• indicator을 fetching 하고, error를 handling 하는 것을 centralize 한다.
• refetching data
  : react-query가 data를 새로 고칠 시간이라고 결정하고, 이를 제어할 수 있는 방법
• 인증 통합
  • 인증을 수행할 때 당연히 server와 통신해야함.
  • react-query와는 어떻게 작동할까? => 문제를 분리하는 방법으로 가자.
• 활성화 여부에 대한 조건이 있는 서버에 대한 쿼리
• react-query로 변형과 query testing도 살펴보자.
• useQuery, mutations, pagination, prefetching 에 대한 많은 예시를 살펴보자.