웹 개발에서 살아남기

비동기 통신 중 불필요해진 요청을 강제로 취소할 수 있는 AbortController의 사용법을 정리한다. 리액트의 useEffect 클린업 함수와 결합하여 메모리 누수를 막고, 검색 기능에서 발생하는 경쟁 상태(Race Condition)를 해결하는 실무 패턴을 다룬다. fetch 요청 강제 중단: AbortController 활용 가이드웹 애플리케이션을 개발하다 보면 진행 중인 네트워크 요청을 취소해야 할 때가 종종 있다. 예를 들어, 사용자가 대용량 이미지를 업로드하다가 "취소" 버튼을 누르거나, 검색창에 글자를 빠르게 입력할 때 이전 검색 요청이 늦게 도착해 결과가 뒤섞이는 경우가 대표적이다.이런 상황에서 요청을 그대로 두면 네트워크 리소스가 낭비될 뿐만 아니라, 의도치 않은 데이터 덮어쓰기 버그..

React Hook Form에서 formState의 값이 업데이트되지 않거나 isDirty가 항상 false로 나오는 문제는 RHF의 성능 최적화 핵심인 Proxy 기반 Lazy Evaluation(지연 평가) 때문이다. 이 현상의 기술적 원리와 올바른 구독(Subscribe) 방법을 정리한다. React Hook Form: formState 업데이트가 안 되는 이유 (Lazy Evaluation)React Hook Form(이하 RHF)으로 폼을 개발하다 보면 황당한 경험을 할 때가 있다. form.formState.isDirty 값을 체크해서 수정 사항이 없으면 제출을 막으려고 로직을 짰는데, 폼을 아무리 수정해도 여전히 false로 나와서 기능이 동작하지 않는 현상이다.더 기묘한 건, 디버깅을 위해..

React Hook Form을 사용하는데 입력 반응 속도가 느리다면 watch의 오남용을 의심해야 한다. 폼의 상태를 구독하여 리렌더링을 유발하는 watch와 값을 조용히 가져오는 getValues의 차이점, 그리고 useWatch를 이용한 렌더링 범위 최적화 전략까지 정리한다. React Hook Form 성능 최적화: watch vs getValues, 그리고 useWatchReact Hook Form(이하 RHF)이 다른 라이브러리보다 빠른 이유는 비제어 컴포넌트(Uncontrolled Component) 방식을 사용하여 입력값이 바뀔 때마다 리렌더링을 하지 않기 때문이다.하지만 개발자가 편의상 watch 함수를 무분별하게 사용하면, RHF의 장점인 'No Re-render' 특성이 사라지고 use..