발생한 에러 부모 컴포넌트에서 만든 state와 setState 함수를 자식 컴포넌트로 넘기는 과정에서 다음과 같은 에러가 발생했습니다. setCount is not a function 값은 잘 넘어오는 것처럼 보이는데, setCount()를 호출하는 순간 함수가 아니라는 에러가 난 상황입니다. 문제가 된 코드 처음에는 자식 컴포넌트를 ...

발생한 에러 API 요청을 처리하던 중 다음과 같은 에러를 만났습니다. Cannot destructure property 'data' of '(intermediate value)' as it is undefined. 보통 이런 코드를 작성했을 때 발생할 수 있습니다. const { data } = await api.get("/users/me"...

발생한 에러 React Query를 사용하던 중 다음 에러가 발생했습니다. No QueryClient set, use QueryClientProvider to set one 이 에러는 React Query 훅이 사용할 QueryClient를 찾지 못할 때 발생합니다. 대표적으로 useQuery, useMutation을 사용하는 컴포넌트가 Qu...

interceptors란? axios interceptors는 요청이 서버로 나가기 전이나, 응답이 then/catch로 전달되기 전에 중간에서 가로채 처리할 수 있는 기능입니다. 쉽게 말하면 API 요청과 응답의 공통 처리 지점을 만드는 기능입니다. 예를 들어 모든 요청에 Authorization 헤더를 붙이거나, 401 에러가 발생했을 때 로...

들어가며 JWT를 처음 사용하면 로그인 후 토큰을 저장하고 API 요청에 붙이는 흐름은 금방 이해할 수 있습니다. 하지만 실제 서비스에 적용하려고 하면 곧바로 이런 질문을 만나게 됩니다. Access Token이 만료되면 어떻게 해야 할까요? 사용자가 계속 로그인 상태를 유지하게 하려면 어떻게 해야 할까요? 이 문제를 해결하기 위해 보통 Ac...

들어가며 로그인 후 서버에서 access token을 받으면, 그 안에 사용자 id나 권한 같은 기본 정보가 들어 있는 경우가 있습니다. 이 정보를 화면에 바로 보여주고 싶을 때 매번 사용자 정보 API를 다시 호출하는 대신, JWT의 payload를 읽어 활용할 수 있습니다. React에서는 jwt-decode 라이브러리를 사용하면 JWT pa...

들어가며 브라우저 기본 alert()와 confirm()은 간단하지만 디자인을 바꾸기 어렵고, 서비스 분위기와도 잘 맞지 않을 때가 많습니다. 이럴 때 SweetAlert2를 사용하면 조금 더 보기 좋은 알림 모달을 빠르게 만들 수 있습니다. 이번 글에서는 React 프로젝트에서 SweetAlert2를 설치하고 기본 알림, 확인 모달, 입력 모달...

들어가며 React Router로 중첩 라우트를 만들다 보면 부모 라우트에서 가진 값을 자식 라우트 컴포넌트가 사용해야 할 때가 있습니다. 일반 컴포넌트라면 props로 넘기면 되지만, 라우트에서는 자식 컴포넌트가 <Outlet />을 통해 렌더링됩니다. 그래서 이런 고민이 생깁니다. <Outlet /> 여기에 prop...

들어가며 HTML에서 a 태그는 링크를 만들 때 가장 많이 사용하는 태그입니다. 처음에는 단순히 다른 페이지로 이동할 때만 쓰는 것처럼 보이지만, 실제로는 이메일 보내기, 전화 연결, 파일 다운로드처럼 여러 기능을 처리할 수 있습니다. 이번 글에서는 a 태그에서 자주 사용하는 패턴을 하나씩 정리해볼게요. 기본 페이지 이동 가장 기본적인 사...

들어가며 React를 TypeScript와 함께 사용하면 props, state, API 응답 타입을 더 안전하게 다룰 수 있습니다. 처음에는 설정 파일이 많아 보여서 어렵게 느껴질 수 있지만, 프로젝트 생성 흐름만 알면 크게 복잡하지 않습니다. 이번 글에서는 React TypeScript 프로젝트를 생성하고, 초기에 확인하면 좋은 파일들을 정리...