Fetch 2

fetch 요청의 취소와 AbortController

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

카테고리 없음 2025.12.03

Javascript의 동기와 비동기 - fetch(), Promise

웹 개발의 핵심인 비동기 통신의 흐름을 완벽하게 정리했습니다. fetch API와 Promise의 기초 개념부터, 콜백 지옥과 체이닝을 해결하는 async/await 실전 패턴, 그리고 병렬 처리 최적화까지 다룹니다.📂 JavaScript Core의 2번째 글입니다. JavaScript 비동기 통신: fetch, Promise부터 async/await까지프론트엔드 개발을 하다 보면 네트워크 통신, 데이터 요청, UI 업데이트 등 동기적으로 처리하면 화면이 멈춰버리는 작업들을 마주하게 됩니다. 이때 필요한 것이 바로 비동기(Asynchronous) 처리입니다.과거의 XMLHttpRequest부터 시작해 Promise를 거쳐 async/await까지, 자바스크립트 비동기 처리는 계속 진화해왔습니다. 이 흐..

카테고리 없음 2025.11.23