코딩하는 곰돌이

[Frontend] Redux 비동기 관리 정리

Redux 비동기 관리 정리(thunk부터 RTK Query까지)Redux의 reducer는 순수 함수여야 합니다. 그런데 API 호출, 타이머, 웹소켓처럼 세상의 대부분은 비동기입니다. 이 근본적인 긴장을 Redux 생태계가 어떻게 풀어왔는지, 그리고 지금 가장 권장되는 방식은 무엇인지 정리합니다.1. 왜 Redux에서 비동기가 특별한 문제인가Redux의 핵심 원칙은 reducer가 순수 함수여야 한다는 것입니다.(state, action) => newState같은 입력에는 항상 같은 출력이 나와야 하고, 부수 효과(side effect)가 없어야 합니다. 하지만 fetch로 서버에 요청을 보내는 행위 자체가 이미 부수 효과입니다. 그래서 Redux는 "비동기 로직은 reducer 바깥, 미들웨어라는 ..

[Frontend] Production에서 만나는 Edge Case

중복 요청 · 트랜지션 취소 · 중복 에러 로깅지금까지 Error Boundary의 기본기, react-error-boundary의 내부 구현, React 19의 Actions·useTransition 패턴을 다뤘습니다. 이론적으로 우아한 패턴도 실제 프로덕션 코드에 넣으면 세 가지 문제에 반드시 부딪힙니다. 중복 요청, 취소되지 않는 트랜지션, 그리고 중복 로깅되는 에러입니다. 하나씩 뜯어보겠습니다.1. 중복 요청 방지: isPending만으로는 부족하다문제 상황useTransition을 쓰면 흔히 disabled={isPending}으로 버튼을 잠그는 패턴을 씁니다.function SubmitButton() { const [isPending, startTransition] = useTransitio..

[Frontend] useTransition과 Error Boundary가 만나면?

React 19: useTransition과 Error Boundary가 만나면 생기는 일지난 글들에서 Error Boundary의 기본 개념과 react-error-boundary의 내부 구현을 다뤘습니다. 이번에는 React 19에서 등장한 Actions와 useTransition이 Error Boundary와 결합하면서 만들어진 새로운 에러 핸들링 패턴을 살펴봅니다.1. 기존 방식의 한계: 흩어진 로딩·에러 상태React 18까지, 비동기 작업을 다루는 코드는 대개 이런 모양이었습니다.function ProfileForm() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); ..

[Frontend] React Error Boundary 뜯어보기

react-error-boundary 내부는 어떻게 동작할까지난 글에서 React의 Error Boundary 개념과 react-error-boundary 라이브러리의 사용법을 다뤘습니다. 이번에는 한 걸음 더 들어가, 이 라이브러리가 내부적으로 어떤 원리로 동작하는지 직접 구현해보며 파헤쳐 보겠습니다.⚠️ 아래 코드는 실제 라이브러리 소스를 그대로 옮긴 것이 아니라, 핵심 동작 원리를 이해하기 위해 단순화하여 재구성한 예시입니다. 실제 구현은 TypeScript 타입, 엣지 케이스 처리 등이 훨씬 정교합니다.1. 이 라이브러리가 제공하는 것react-error-boundary는 React가 기본으로 제공하지 않는 세 가지를 채워줍니다.바로 쓸 수 있는 ErrorBoundary 컴포넌트 — 매번 클래스를..

React Error Boundary 완벽 가이드"예상치 못한 에러 하나가 앱 전체를 하얀 화면으로 만들어버린 경험, 다들 있으시죠?"1. 왜 Error Boundary가 필요한가React 16 이전에는 렌더링 중 하나의 컴포넌트에서 에러가 발생하면 React의 내부 상태가 손상되어, 이후 렌더링에서 예측 불가능한 결과를 냈습니다. React 16부터는 렌더링 도중 처리되지 않은 에러가 발생하면 컴포넌트 트리 전체를 언마운트하도록 정책이 바뀌었습니다.즉, 아무 처리도 하지 않으면 다음과 같은 일이 벌어집니다.댓글 위젯 하나가 에러를 던짐 ↓React가 컴포넌트 트리 전체를 unmount ↓사용자는 완전히 하얀 화면(White Screen of Death)을 마주함이 문제를 해결하..