mirabo01 님의 블로그

React 프로젝트를 하다 보면 ‘데이터를 언제, 얼마나 자주 불러와야 하는가’가 늘 고민거리입니다.단순히 한두 번의 요청이라면 신경 쓰지 않아도 되지만,규모가 커질수록 같은 데이터를 반복해서 요청하게 되고,API 트래픽이 급격히 늘어나면서 성능 저하가 일어납니다.저는 이런 문제를 React Query를 통해 해결했습니다.이 라이브러리를 처음 접했을 땐 단순히 useQuery로 API를 감싸는 정도로만 썼지만,이후 실무에서 본격적으로 캐싱 전략을 세워보니 정말 다른 세상이 열리더군요.캐싱을 ‘잘’ 한다는 건 결국 타이밍의 문제입니다React Query의 핵심은 “데이터를 다시 불러올 타이밍을 제어한다”는 점입니다.즉, 같은 데이터를 언제 새로 요청하고, 언제 캐시에서 꺼내 쓸지 결정하는 게 핵심입니다.처..

최근에 작업했던 서비스에서 로그인 유지 기능을 안정적으로 구현해야 하는 일이 있었습니다.그전까진 단순히 access token만으로 인증을 처리했는데, 며칠 지나면 사용자들이 “갑자기 로그아웃돼요”라고 제보하기 시작하더군요.처음엔 단순한 버그겠거니 했는데, 알고 보니 토큰 만료 로직과 세션 관리 구조가 제각각이라 발생한 문제였습니다.그 일을 계기로 React에서 Refresh Token 기반의 인증 흐름을 체계적으로 설계하는 법을 정리하게 되었습니다.로그인 유지 구조를 단순히 생각했던 시절초기엔 정말 단순하게 만들었습니다.백엔드에서 access token을 발급받으면 localStorage에 저장하고,Axios 요청 시마다 헤더에 붙이는 방식이었습니다.이 구조의 문제는, access token이 만료되면..

프로젝트를 하다 보면, 의도치 않게 에러가 터지고 그게 UI까지 그대로 드러나는 경우가 있습니다. 예전엔 콘솔에 찍힌 에러 메시지만 보고 해결하려고 했는데, 서비스 규모가 커지면서 그런 방식이 통하지 않게 됐습니다. 에러가 한 군데서만 나는 게 아니라, API 요청, 렌더링, 상태 관리, 네트워크 등 여러 지점에서 터지기 시작하니까요.그래서 이번에는 제가 최근에 적용했던 “전역 에러 처리”와 “Axios 인터셉터 기반 인증 흐름 관리” 방법을 정리해보려 합니다. 단순히 개념 설명이 아니라, 실제 서비스에 적용하면서 얻은 시행착오 중심으로 이야기해보겠습니다.화면이 멈추지 않게 만드는 첫 번째 장치리액트를 쓰다 보면, 한 컴포넌트에서 에러가 나면 그 아래 트리 전체가 렌더링되지 않는 경우가 있습니다. 화면이..

1. 왜 라우터와 React Query를 함께 고려해야 할까React Router는 페이지 간의 UI 전환을 담당하고,React Query는 각 페이지의 데이터 로딩과 캐싱을 담당합니다.이 두 가지를 잘 결합하면페이지를 이동할 때마다 새로 데이터를 불러오지 않아도 되고,사용자는 즉각적인 반응성을 느낄 수 있습니다.예를 들어대시보드 → 설정 → 통계 페이지로 이동하더라도이미 캐시에 있는 데이터를 재활용하면 로딩 없이 전환이 가능합니다.2. 예제 시나리오이번 예제는 다음 구조를 가정합니다./dashboard ├── /stats ├── /notifications └── /settings각 페이지는 서버로부터 데이터를 받아오며,React Query를 통해 캐시 관리가 이루어집니다.3. React Query 전역..

1. SPA에서 라우팅이 필요한 이유React는 기본적으로 단일 페이지 애플리케이션(SPA) 구조를 따릅니다.즉, 화면 이동 시 실제로 페이지가 새로고침되지 않고컴포넌트의 전환만 이루어집니다.하지만 대시보드나 관리자 페이지처럼여러 화면(예: 통계, 알림, 설정 등)을 구성할 때는각 화면을 독립된 “페이지 단위”로 나누는 것이 훨씬 효율적입니다.이를 가능하게 해주는 것이 바로 React Router입니다.2. React Router 설치 및 기본 설정먼저 패키지를 설치합니다.npm install react-router-dom그다음 프로젝트의 루트에서 BrowserRouter를 적용합니다.// index.jsimport { BrowserRouter } from 'react-router-dom';import ..

1. 로그인 후 보여지는 대시보드란?로그인 시스템을 구축했다면,다음 단계는 **로그인한 사용자의 데이터를 시각적으로 보여주는 대시보드(Dashboard)**입니다.예를 들어 다음과 같은 정보가 표시됩니다.로그인한 사용자의 이름, 이메일, 가입일최근 활동 내역알림, 메시지, 통계 등이 페이지는 서버에서 **로그인된 사용자 정보(API)**를 가져와야 하며,데이터 갱신이 잦기 때문에 React Query를 사용하는 것이 가장 효율적입니다.2. 기본 구조대시보드 페이지를 구현하기 위해 다음 세 가지가 필요합니다.1️⃣ 사용자 인증 토큰을 포함한 API 요청2️⃣ React Query의 useQuery로 데이터 가져오기3️⃣ 로딩/에러/성공 상태에 따른 UI 처리3. API 요청 설정Axios를 사용할 때,모든..

1. 로그인 기능, 왜 제대로 설계해야 할까?프론트엔드 개발에서 로그인은 단순한 폼 이상의 의미를 가집니다.단지 아이디와 비밀번호를 입력받는 것 같지만,실제로는 토큰 관리, 에러 처리, 상태 동기화, 보안까지 함께 고려해야 합니다.많은 초보 개발자가 다음과 같은 문제를 겪습니다.로그인 후 새로고침 시 인증 정보가 사라짐잘못된 비밀번호 입력 시 에러 처리 누락로그인/로그아웃 시 전역 상태 업데이트 누락이번 강의에서는React Hook Form + React Query를 결합해현실적인 로그인 기능을 구현하는 방법을 단계별로 살펴보겠습니다.2. 기본 세팅먼저 필요한 라이브러리를 설치합니다.npm install react-hook-form @tanstack/react-query axios그리고 전역에서 Reac..

1. 폼과 서버 통신, 왜 어려운가?리액트 프로젝트에서 회원가입, 로그인, 게시글 작성 같은 폼은 필수입니다.하지만 많은 개발자가 다음과 같은 문제를 겪습니다.입력 검증과 서버 요청 코드가 섞임제출 중 로딩 상태나 에러 처리 누락성공 후 데이터 리페칭이나 페이지 이동이 복잡함이 문제를 해결하기 위한 가장 강력한 조합이 바로React Hook Form + React Query입니다.React Hook Form은 “입력값을 관리”하고,React Query는 “서버와의 통신 상태를 관리”합니다.두 라이브러리를 함께 사용하면폼 로직과 네트워크 로직을 완벽히 분리할 수 있습니다.2. 준비하기두 라이브러리를 설치합니다.npm install react-hook-form @tanstack/react-query axio..

1. 폼 관리의 어려움리액트로 개발하다 보면 **사용자 입력을 다루는 폼(form)**을 자주 만들게 됩니다.로그인, 회원가입, 게시글 작성, 검색창 등 거의 모든 페이지에서 사용되죠.그런데 이런 폼을 useState로 하나씩 관리하기 시작하면 다음과 같은 문제가 생깁니다.const [name, setName] = useState('');const [email, setEmail] = useState('');const [password, setPassword] = useState('');입력 필드가 늘어날수록 코드가 복잡해지고,검증(validation)이나 에러 메시지를 처리하기도 점점 어려워집니다.이 문제를 해결하기 위해 만들어진 라이브러리가 바로 React Hook Form입니다.2. React Hoo..

1. 클라이언트 상태 vs 서버 상태리액트에서 상태는 크게 두 가지로 나뉩니다.구분 설명 예시클라이언트 상태(Client State)컴포넌트 내부에서만 사용하는 값모달 열림 여부, 입력 값서버 상태(Server State)서버로부터 가져온 데이터게시글 목록, 사용자 정보useState나 useReducer는 클라이언트 상태 관리에는 적합하지만,서버 상태 관리에는 한계가 있습니다.왜냐하면 서버 데이터는 비동기적이며, 여러 소스에서 동시에 바뀔 수 있기 때문입니다.이를 효율적으로 관리하기 위해 등장한 라이브러리가 바로 React Query입니다.2. React Query란?React Query는 서버 데이터 관리에 특화된 라이브러리입니다.비동기 데이터 fetching, 캐싱, 리페칭(refetch), 동기화..