AbortController 자바스크립트에서 비동기 작업을 중단할 수 있도록 도와주는 API이다. (특히 fetch() 요청 중단)Promise는 원래 취소 기능이 없지만, AbortController로 특정 요청을 강제로 취소할 수 있다. 기본 개념AbortController는 비동기 작업을 제어하기 위한 signal 객체를 제공한다.controller.abort()를 호출하면 해당 signal을 감지하는 모든 요청이 즉시 취소된다.const controller = new AbortController(); const { signal } = controller; fetch("https://jsonplaceholder.typicode.com/todos/1", { signal }) .then((respon..
관련 주제 '이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관' 이벤트 루프와 Web APIs의 관계자바스크립트는 싱글 스레드 언어로 한번에 하나의 작업만 실행할 수 있다.하지만 브라우저에서 비동기 작업을 처리할때는 이벤트 루프와 Web APIs가 함께 작동하여 여러 작업을 효율적으로 수행할 수 있다.즉, Web APIs가 없을 경우에는 자바스크립트는 싱글 스레드 언어이므로 모든 작업을 순차적으로 실행해야하는 비극을 겪을 수 있다. Web APIs 란?브라우저가 제공하는 기능으로 자바스크립트가 직접 실행할 수 없는 작업을 담당한다.자바스크립트는 Web APIs에 작업을 위임하고, Web APIs는 작업이 끝나면 콜백을 다시 자바스크립트로 넘겨주게 된다.즉, Web APIs는 자바스크립트의 비동기 처..
이벤트 위임(Event Delegation)과 성능 최적화
이벤트 위임(Event Delegation)과 성능 최적화 이벤트 위임 (Event Delegation)하위 요소에 개별적으로 이벤트 리스너를 추가하는 대신에 상위 요소에서 하나의 이벤트 리스너를 통해 이벤트를 감지하여 하위요소들의 이벤트를 처리하는 기법이다.자바스크립트의 이벤트 버블링(Event Bubbling)을 이용하여 이벤트가 부모 요소까지 전파하는 특성을 활용했으며, 이벤트가 발생한 하위요소에서 직접 핸들러를 실행하는 것이 아니라 부모요소에서 이벤트를 감지하여 실행하는 방식이다. 예제// 개별 이벤트 리스너document.querySelectorAll('.btn').forEach((button) => { button.addEventListener('click', () => { cons..
프로토타입과 프로토타입 체인
프로토타입과 프로토타입 체인 프로토타입 (Prototype)자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반의 객체 지향 언어이다.여기서 객체 지향 언어라는건 === 객체지향 프로그래밍(OOP, Object-Oriented Programming)으로 데이터(속성)과 행동(메서드)을 하나의 객체(Object)로 묶어 프로그래밍하는 방법이다. 객체속성 (Property) - 객체의 상태를 나타냄 (ex: 이름, 나이, 색상등..)메서드 (Method) - 객체가 수행할 수 있는 동작 (ex: 걷다, 뛰다, 날다등..) 모든 객체는 자신의 부모 역할을 하는 객체인 프로토타입(Prototype)을 참조한다.모든 객체는 프로토타입 링크 [[Prototype]] (또는 __proto__)라는 숨겨진 링크를..