React3 [아키텍처] FSD 아키텍처 : Feature-Sliced Design 🔽 목표늘 '팀 프로젝트를 잘하려면 어떻게 구조를 설계/분리해야할까?'라는 궁금증이 생겼다. '잘 분리'하기 위해서는 재사용성이 좋게 역할과 책임을 분리해야하고, 다른사람이 이해하기 쉬운 코드가 가장 중요하다고 생각했다. 그래서 다른 개발자가 협업함에 있어서 가독성이 좋고, 역할과 책임이 잘 분리된 구조를 설계해보는걸 목표로 진행중이던 프로젝트를 수정해봤다. 🔽 현재 구조적 문제 상황아래는 기존 프로젝트 구조로 페이지 단위로 분리되었다.react-shopping-cart├─ src│ ├─ apis 👈 api│ │ ├─ cartItems│ │ └─ httpClient.ts│ ├─ pages .. 2025. 6. 12. [UX 개선] 낙관적 업데이트(Optimistic Update) 🔽 낙관적 업데이트란?낙관적 업데이트(Optimistic Update)는 사용자가 어떤 작업(예: 데이터 수정, 삭제, 추가 등)을 요청했을 때, 서버의 응답을 기다리지 않고 UI를 즉시 변경하여 사용자가 빠른 피드백을 받을 수 있도록 하는 기법입니다. 즉, 서버가 요청을 성공적으로 처리할 것이라고 가정하고, 미리 화면을 업데이트하는 방식입니다. 이 방식은 네트워크 지연이나 서버 응답이 느린 환경에서도 사용자 경험(UX)을 크게 개선할 수 있습니다. 다만, 서버 요청이 실패할 경우 UI와 실제 데이터가 불일치할 수 있으므로, 실패 시 원래 상태로 되돌리는(롤백) 처리가 반드시 필요합니다. 🔽 리액트에서의 낙관적 업데이트 예시 1. 직접 상태 관리 (useState 등)예를 들어, 할 일(Todo).. 2025. 6. 3. [TanStack Query] 서버 상태 관리 라이브러리 안녕하세요오늘은 서버 상태 관리 라이브러리인 TanStack Query에 대해 정리해보고자 합니다. 🔽 TanStack QueryTanStack Query(이전 명칭 : react-query)는 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해줍니다. 🔽 왜 사용하는 가? (Why?)클라이언트 상태(useState, useReducer)와는 달리, 서버에서 가져온 데이터는 시간이 지나면 바뀔 수 있고, 언제든 다시 가져와야 할 필요가 있습니다.하지만 전통적인 방식(예: useEffect + axios + useState)으로 이걸 처리하려면 다음과 같은 문제가 발생합니다: ❌ 기존 방식의 문제점loading, error, data 상태를 직접 관.. 2025. 6. 2. 이전 1 다음