하루 기록.
recoil을 사용한 전역 모달 관리(with TypeScript)
이전 포스팅에서 context API, redux를 사용한 모달 관리에 대해서 소개했었다. // store/modalSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = []; export const modalSelector = (state) => state.modal; export const modalSlice = createSlice({ name: "modal", initialState, reducers: { openModal: (state, action) => { const { type, props } = action.payload; return state.concat({ type, props }); }, clos..
react-query는 어떻게 작동할까
QueryClient react-query를 프로젝트에 셋팅할 때, 가장 먼저 하는 것은 앱의 최상위에서 QueryClientProvider로 우리의 앱을 감싸주는 일이다. import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; ... const queryClient = new QueryClient(); function Root() { return ( ); } 우리는 먼저 새로운 QueryClient인스턴스를 생성하고, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다. 이 QueryClient는 단순하게 표현하자면 QueryCache와 MutationCache를 담는 ..
React-saga를 통해 axios 호출 취소하기
회사 프로젝트에서 특정 수치를 조회하기 위해 사용하는 API가 있다. 이 API는 상황에 따라서 호출 시간이 오래 걸리고, 조회 항목이 많아질수록 호출 시간이 길어진다. 만약 사용자가 수치를 조회하는 중 화면을 나간다면, 수치 조회 API는 여전히 Pending 중이기 때문에 그 영향으로 새로 렌더링 되는 화면의 로딩이 길어지게 된다. 수치 조회 API의 응답을 기다리는 중 현재 페이지가 unmount된다면, 해당 API 호출을 취소하여 불필요한 데이터 호출을 막고, UX를 개선하려 한다. 현재 프로젝트에서 비동기 통신 라이브러리는 axios 사용, 비동기 로직은 react-saga 로 관리 중이다. 따라서 이 글에서는 이 두 라이브러리를 사용하여 API 호출을 취소하는 방법을 다룬다. Axios의 취소..
![[React] CRA에서 Path alias 설정하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3Bk6V%2FbtrRAEkQ3Xj%2FpD8kYkD7DjwvgCVtbttbVK%2Fimg.gif)
[React] CRA에서 Path alias 설정하기
(2022.02.14 수정) 이전 프로젝트에서는 괜찮았으나, 이번 React-Query 프로젝트에서는 Atomic system에서 착안한 새로운 폴더 구조를 시도해본 만큼 코드 상단의 무수한 ../../../ 들이 신경 쓰이기 시작했다. 그동안 미뤄왔던 path alias를 설정을 드디어 프로젝트에 적용했고, 그 과정을 여기에 기록해보려 한다. (‘미루고 미루다가 드디어 적용한 것’이라 말하니 뭔가 엄청난 작업을 해야 할 것 같지만 사실 설정은 매우 간단하다.) Path Alias란 path alias는 경로에 별칭을 붙인다는 뜻으로, path alias를 사용하면 "../../../hooks/quires/useMovieDetail"과 같은 경로를 "@hooks/quires/useMovieDetail" ..