환경 오류들 해결
lf? crlf?
줄바꿈 문자를 윈도우는 crlf, 리눅스나 맥은 lf를 사용한다고 한다.
vscode를 보면 나는 윈도우를 쓰기 때문에 기본이 crlf로 되어있다. 그런데 린터의 설정이 lf로 되어있기 때문에 cr을 제거하라고 에러메시지를 띄워준다. 그래서 이 프로젝트에서는 lf로 사용하기 위해 프로젝트 루트에서 .vscode 디렉토리 안에 setting.json을 만들어
{
"files.eol": "\n"
}로 설정해준다. 이렇게 하면 lf를 사용할 수 있다!
그런데 이미 클론해온 파일들은 crlf로 되어있는지 적용이 안되었다.. 그래서 그냥 eslint설정을 추가해줬다
"prettier/prettier":["error",{"endOfLine": "auto"}],
이러면 auto니 건들진 않고 그냥 사용하겠다는 의미같은데 에러는 없어진다.
그런데 알고보니 git에서도 이걸 관리하고 있었다.
git의 autocrlf라는 속성이 true이면 커밋할때 crlf인 걸 lf로 변환해주었던것! 비슷한 메시지를 커밋할 때 본 것 같기도 하다.
아무튼 그래서 그냥 이대로 쓰기로 했다.
react-query
저번 강의에서 리액트 쿼리에 대해 배웠다. 이름은 많이 들어봤지만 뭔지 몰랐는데 지금 이해한 바로는 비동기 통신의 복잡한 처리를 리액트 생태계에 맞춰서 굉장히 편하게 사용할 수 있는 도구라고 생각한다.
이전 과제에서 이미 보낸 요청을 중복해서 보내는 것을 방지하기 위해 isLoading을 추가하기도 했는데 이것을 react-query에서는 그냥 제공해준다. 또한 로컬 캐싱, 실패시 재요청 등 수많은 기능을 제공한다. 그리고 간편한 설정으로 Suspense, Error boundary도 함께 사용할 수 있다. 많은 기능을 제공하는 만큼 잘 이해하고 사용하기에는 시간이 걸릴 것 같다.
오늘은 기본 사용법과 캐싱에 대해 조금 알아봤다.
- 먼저 QueryClient와 QueryClientProvider로 root부분을 감싸준다
queryClient를 아직 자세히 써보진 않았지만 axios의 instance처럼 기본적인 설정을 해서 이걸 바탕으로 react-query를 사용하게 되는 것 같다.
...
<QueryClientProvider>
<App />
</QueryClientProvider>- 실제 데이터를 가져올 땐 useQuery를 사용.
(데이터를 get할때 사용한다. post, update는 useMutation을 사용한다고 한다)
useQuery의 첫번째 파라미터는 unique key 또는 key 배열, 두번째 파라미터는 데이터를 가져올 비동기 api호출 함수가 들어간다.
unique key는 아직은 좀 어렵지만 react-query 내부에서 캐싱 등에 사용하는 것 같다. 배열로 넘기게 되면 0번 인덱스는 string으로 컴포넌트에서 부를 때 사용하고 두번째 부터 값은 query 함수 내부에서 파라미터로 전달된다.
useQuery는 비동기로 동작하며 여러 요청이 있어도 따로 먼저 온 요청을 기다리거나 하진 않고 동시에 진행된다.
캐싱
react-query는 요청했던 결과를 캐싱하여 저장하는데, 이 때 어떤 요청인지 구분하기 위해서 useQuery의 첫번째 인자로 전달한 키 값을 사용한다. 동일한 키 값을 가진 캐시가 존재하면 새로 요청하지 않고 이대로 사용하는것이다.
그리고 캐싱을 결정하는 두가지 요소가 있는데 cachetime과 staletime이다.
cachetime은 메모리에 저장한 캐시 데이터를 언제까지 유지할지를 정한다. 이 시간이 지나면 캐시를 지우는 것이다. default는 5분이다.
그런데 staletime은 뭘까?
stale은 '신선하지 않은' 이라는 뜻이다. 그러니까 이 캐시된 데이터가 오래되어 신선하지 않고 믿을 수 없다는 의미다. 이 시간이 지나면 캐시데이터가 있어도 새로 요청을 진행한다. default는 0이어서 계속 새로 요청을 보낸다고 한다. 설정을 잘 해주어야겠다.
아직 못한 것
react query만 해도 공부할 게 너무 많다. enabled를 사용해 조건에 따라 요청을 진행하는 것도 있고, 재요청 부분이나 useMutation같은것들도 더 보고 실제로 적용해봐야겠다.
또 redux-toolkit도 함께 배웠는데 공부해야한다. redux를 사용해본 경험이 있어서 그나마 이해가 조금 되는편이지만 redux-toolkit은 써본적이 없어서 사용법은 좀 익혀야겠다.
그리고 저번 과제도 그렇고 서버 api가 조건이 썩 좋지 않을때가 많아 임시데이터로 실험해보고싶어서 msw라는 도구를 사용해보려고 한다.
도움
