최근 Context API와 Recoil을 비교하면서 위 주제에 대해 이야기하게 되었다. 이에 대한 의견이 나뉘어서 이에 대해 직접 확인해 보는 시간을 가졌다. 먼저 Context의 개념을 알아보고, 코드를 보면서 상태 변화에 따른 렌더링이 어떻게 발생하는지 알아보자. 그 이후에 useMemo, memo 등을 적용해 보면서 최적화하고, Context가 상태 관리 라이브러리를 대체할 수 있는지 생각해 보자. Context 알아보기 Context란 props drilling: 상위 컴포넌트에서 제공하는 데이터를 하위 컴포넌트로 필요한 위치까지 계속해서 넘기는 것 Context API는 이를 극복하기 위해 등장한 개념이다. 명시적 props 전달 없이도 하위 컴포넌트 모두에서 자유롭게 원하는 값을 사용할 수 ..
이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
MYCHELIN 프로젝트에서 가게 상세 페이지를 맡아 진행하면서 해당 가게에 대한 댓글과 저장 데이터를 서버에서 받아와 렌더링하고, 추가, 삭제 등의 mutation을 해야 했다. 이때 React Query를 이용해 받아온 데이터를 캐싱해 사용했다. 유저가 해당 가게를 저장하거나 저장을 취소하고, 댓글을 남기거나 삭제했을 때 즉각적인 피드백을 하기 위해 useMutation, setQueryData, 그리고 invalidateQueries를 통한 낙관적 업데이트를 했다. TL;DR useQuery로 고유한 쿼리 키를 사용해 데이터를 캐싱한다. useMutation으로 서버 데이터를 업데이트한다. mutation 이후에 화면을 바로 업데이트할 필요가 없다면 useMutation에 mutationFn을 전달..
들어가며 [1편]에서 테스트 환경 구축 시 사용되는 패키지의 설정 파일을 살펴보았습니다. [2편]에서는 먼저 Vite, TypeScript, React Testing Library, Jest를 사용해 테스트 환경을 구축하고, 패키지 간 의존성과 설정 파일 문제로 발생했던 에러와 해결책을 공유하고자 합니다. React 테스트 환경 구축하기(Vite, TS, Jest, React Testing Library) Vite 프로젝트 설치 npm create vite@latest test-config -- --template react-ts cd test-config npm install code . // vscode 열기 테스트 관련 패키지 설치 // 2-1 Jest 관련 패키지 설치 npm i -D jest j..
NutriNotes의 목표했던 기능들을 모두 마무리하고 회고를 쓰려고 노션에 항목들을 정리해 두었지만, 쓰고 싶은 내용이 너무 많아 엄두가 나지 않았다. 프로젝트를 진행하며 마주했던 문제와 해결책들을 기록하며, 다시 한번 복기해 보는 시간을 가지기로 했다. 라이브러리 선택 이유 및 이전에 구현된 기능은 중간 회고에 작성되어 있다. 중간 회고 이후로 약 3개월이 지났는데, 약 2개월은 프로젝트를 더 발전시켰고, 그 이후에는 가끔 필요한 부분만 수정하였다. 밤새 끙끙대다 배포를 성공해서 내가 만든 사이트에 접속되었을 때의 기쁨을 잊을 수 없다..>! (내용이 길어져서 빈 부분은 차차 채워나갈 예정입니다..!) 프로젝트 소개(+배포 링크): NutriNotes NutriNotes는 건강에 관심을 기울이는 현대..
