이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
지금까지는 어떤 입력을 받아 이를 처리하고 완료하는 단계를 순서대로 수행하는 동기 프로그래밍을 다뤘다. 하지만 실제로는 네트워크 요청을 보내고, 데이터 베이스 및 파일 시스템과 상호작용하는 동작을 수행해야 하므로 비동기 API(콜백, 프로미스, 스트림)를 사용하게 된다. 자바스크립트는 이러한 비동기 작업을 처리할 때 멀티 스레드를 지원하는 자바나 C++와 다르게 스레드 하나로 비동기 작업을 처리한다. 자바스크립트는 이벤트 루프 기반의 동시성 모델을 이용해 멀티스레드 기반 프로그래밍에서 공통적으로 나타나는 문제점을 해결한다. (동기화된 데이터 타입의 오버헤드 등) 타입스크립트와 비동기 프로그래밍 비동기 프로그래밍은 코드를 한 줄 씩 따라가며 이해할 수 있는 구조가 아니기 때문에 이해가 어렵다. 타입스크립트..
mutation이란 ? 일반적으로 mutation은 부수 효과(side effect)가 있는 함수를 말한다. 예를 들어, 배열의 push 메서드는 원본 배열을 변경하는 부수효과가 있는 함수이다. 같은 맥락에서 React Query의 useMutation은 서버에 부수 효과(side effect)를 일으킨다. 데이터 추가, 삭제 또는 유저의 로그인 모두 이 경우에 해당한다. useQuery와 useMutation useQuery와 useMutation을 처음 보면 어떤 상황에서 사용해야 하나 헷갈릴 수 있다. useQuery는 GET 요청과, useMutation은 POST, PATCH, DELETE 요청과 유사하다고 생각하면 된다. 언제 사용하면 될까? useQuery는 고유한 쿼리 키를 기반으로 서버에..
