짧은코딩

일단 tailwind css를 기준으로 설명하겠지만 결국 어느 css를 사용하든 원리는 같다! 헤더 고정 우선 헤더를 고정하기 위해서 위 코드처럼 h-28(7rem)으로 고정을 했다. 내용 "100% - (헤더 height)" 하는 법 여기서 noneHeader는 tailwind css를 custom한 style이다. -tailwind.config.js height: { noneHeader: 'calc(100vh - 7rem)', }, 이렇게 calc를 사용해서 100vh - (헤더 height)를 하면 아래 오는 내용을 손 쉽게 가운데 정렬할 수 있다. 완성 코드 이렇게 구성하면 어떤 해상도에서든 헤더의 길이가 고정되어 있다. 그렇기에 초반에 Layout을 제대로 잡아주었다. 이런 구성에 대해서 늘 생..

이번에 진행하는 프로젝트는 webpack, npm이 아닌 vite와 yarn berry를 사용하는 과제를 받았다. 이 글에서 설명하는 초기 세팅은 react, ts, vite, yarn berry, tailwind css + twin.macro(emotion js), recoil, react query, jest, cypress를 설치하는 과정이다!(뭔가 엄청 많다..) 먼저 짧은 후기를 적어보자면 vite에 대한 정보가 너무 없어서 좀 힘겨웠다..! Vite + React + yarn berry 적용 yarn create vite 먼저 이 명령어를 입력하고 react, typescript를 각각 선택해줬다. yarn berry 전환 yarn set version berry pnp 모드 적용 먼저 .ya..

올해 1학기는 학교와 카카오 엔터프라이즈가 협업하여 교육하는 KEA 교육을 들었다. 나는 프론트엔드 개발자가 되고 싶지만, 교육 전반적인 것이 백엔드에 관한 교육이라서 들을지 말지 고민을 많이 했다. 실제로 프론트엔드 부분 말고 백엔드, 데브옵스 과정에 좀 더 중심적인 교육이었다. 이로 인해 솔직히 많이 힘들고 막막했다. 그래도 이 교육을 들은 것에 대해 후회하지 않는다. CI/CD, Docker, GitLab, Jenkins 같은 기술들을 익힐 수 있었다. 아직 저 기술들에 대한 이해도가 사실 높지는 않은 것 같지만 앞으로 좀 더 공부해 나갈 것이다. 사실 올해는 내 인생에 있어서 가장 최악의 해이고 앞으로도 그럴 것이다. 올해 초 너무 좋지 않은 일이 있었다. 그럼에도 잘 버틴 나 자신에게 칭찬을 하..

리페칭을 할 때 중요하게 봐야 되는 것은 서버가 만료 데이터를 업데이트 한다는 것이다. 창을 포커스하는 트리거를 하면 잠시 로딩 인디테이터가 나타나는데 이는 만료되었던 데이터를 가져오기 때문이다. 데이터는 시간이 지나면 자연스럽게 만료된다. stale 쿼리는 어떤 조건 하에서 자동적으로 다시 가져오기가 된다. 새로운 쿼리가 많아지거나 그 쿼리가 처음 호출, 쿼리를 사용하는 컴포넌트 증가, 트리거, 네트워크가 다시 연결되면 리페칭이 일어난다. 그리고 리페칭 간격이 지난 경우에도 리페칭이 다시 일어나는데 이 경우 간격을 둬서 서버를 폴링하고 사용자가 딱히 무엇을 하지 않아도 데이터가 리페칭 된다. 리페칭은 전역 혹은 특정 쿼리로 할 수 있다. refetchOnMount, refetchOnWindowFocus..

useQuery의 select 옵션을 사용하면 쿼리 함수가 반환하는 데이터를 반환할 수 있다. React Query는 불필요한 연산을 줄이기 위해 memoization을 하여 최적화를 한다. 이때 select 함수를 사용하는데 select 함수는 데이터와 함수가 모두 변경되었을 때만 실행되고삼항 연산자로 비교한다. 검색한 데이터와 동일한 데이터고 select 함수에도 변동이 없으면 select 함수는 재실행되지 않는 것이 React Query 최적화이다. 따라서 select 함수는 안정적인 함수일 필요가 있어서 익명 함수는 올 수 없다. 익명 함수를 사용하고 싶다면 useCallback를 사용하면 된다. 사용법 const selectFn = useCallback( (data) => { getAvaila..

프리페칭은 캐시에 아직 데이터가 없는 경우 미리 데이터를 채울 수 있다. prefetchQuery는 queryClient의 메서드이다. 그렇기에 useQuery와 달리 클라이언트 캐시에 추가된다. prefetchQuery는 일회성이다. queryClient를 반환하고 useQuery 클라이언트 hook을 사용한다. 방문할 사이트 예측하는 프리페칭 어떤 사이트에서 홈 화면을 거치고 나서 다른 페이지를 방문할 확률이 높다면 방문할 페이지의 데이터를 미리 프리페칭하는 것이 좋다. 이 예시에서는 홈 화면에 미리 데이터를 프리페칭하는 코드이다. -커스텀 훅 export function useTreatments(): Treatment[] { // fallback을 기본 값으로 둬야 처음에 잠깐 빈 값이 나왔다가 데..

queryClient와 에러 중앙화 기존에는 queryClient를 QueryClientProvider과 같은 파일 내에 선언해 줬다. 하지만 좀 더 큰 규모의 프로젝트에서는 위 사진처럼 queryClient.ts로 따로 빼서 선언해줬다. 이렇게 하면 에러 처리를 중앙화해줄 수 있다. -queryClient.ts // 에러처리 중앙화 function queryErrorHandler(error: unknown): void { // error is type unknown because in js, anything can be an error (e.g. throw(5)) // error이 Error 클래스의 인스턴스인지에 따라 비슷한 방식으로 이름을 정하도록 했다. const title = error inst..

리액트 쿼리에서 무한 스크롤을 구현하려면 useInfiniteQuery를 사용하면 된다. 전체 wrapper 컴포넌트로는 react-infinite-scroller 라이브러리의 InfiniteScroll를 사용하면 된다. -react-infinite-scroller의 npm 사이트 https://www.npmjs.com/package/react-infinite-scroller react-infinite-scroller Infinite scroll component for React in ES6. Latest version: 1.2.6, last published: a year ago. Start using react-infinite-scroller in your project by running `npm..

Mutation mutation은 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 하는 것이다. 데이터를 추가, 수정, 삭제할 때 사용된다. 그렇기에 mutation을 활용하면 optimistic update를 구현할 수 있고, 쿼리 캐시를 업데이트할 수 있으며 클라이언트에 있는 데이터를 최신 상태로 유지할 수 있다. useMutation useMutation은 useQuery와 비슷하다. 하지만 데이터를 저장하지 않아 key는 필요가 없다. 그리고 isLoading은 있지만 데이터를 저장하지 않으니까 캐시 된 항목이 없어서 isFetching은 없다. 기본값으로 재시도는 하지 않지만 설정할 수 있다. 사용법 블로그 댓글을 삭제하는 예시이다. const deleteMutation = useMutat..

isFetching vs isLoading isFetching은 비동기 쿼리가 해결되지 않았음을 의미한다. 즉, feching을 완료하지 않았다는 의미이다. async 함수가 해결되지 않았고 아직 데이터를 가져오는 중이다. isLoading은 isFetching의 하위 집합이며 데이터를 가져오는 상태라는 것을 의미한다. 쿼리 함수가 해결되지 않았고 캐시 된 데이터가 없다. 표시할 캐시 데이터도 없다는 의미이다. 즉, isLoading 상태이면 isFetching은 참이다. => 별 차이가 없어 보일 수 있지만 페이지네이션을 할 때, 캐시 된 데이터가 있을 때와 없을 때를 구분해야 한다. -예시 if (isFetching) return Loading...; 이 코드에서는 캐시 된 데이터의 존재와 상관없이 ..