실무 Promise 아키텍처: 취소, 타임아웃, 재시도, 메모리와 작업 수명

Promise와 async/await 깊이 이해하기 4/4들어가며Promise 코드를 작성하는 것은 어렵지 않다.어려운 것은 작업의 생명주기를 설계하는 일이다.사용자가 페이지를 떠나면 요청을 중단해야 하는가?timeout이 발생하면 실제 네트워크 요청도 종료되는가?부모 작업이 실패하면 자식 작업은 어떻게 되는가?어떤 오류를 재시도해도 안전한가?영원히 pending인 Promise는 무엇을 메모리에 유지하는가?하나가 아닌 여러 비동기 값은 무엇으로 표현해야 하는가? Promise는 성공과 실패를 표현하지만 다음 요소를 직접 제공하지 않는다.취소timeout자원 소유권재시도 정책멱등성backpressure구조적 동시성 이 요소들은 애플리케이션 아키텍처가 별도로 설계해야 한다.1. Promise에는 취소가 없..

Promise 동시성 설계: 순차 실행, 조합자, Critical Path

Promise와 async/await 깊이 이해하기 3/4들어가며async/await 코드는 읽기 쉽다.그러나 너무 자연스럽게 읽히기 때문에 오히려 불필요한 순차 실행을 만들기 쉽다. const user = await fetchUser();const settings = await fetchSettings(); 두 작업이 서로 독립적이라면 이 코드는 존재하지 않는 의존 관계를 만들어낸다.fetchUser 완료 ↓fetchSettings 시작 Promise 동시성 설계의 핵심은 Promise.all()을 외우는 것이 아니다.다음 질문에 답하는 것이다.어떤 작업이 다른 작업의 결과를 필요로 하는가?어떤 작업은 동시에 시작할 수 있는가?실패했을 때 나머지 작업은 어떻게 해야 하는가?동시에 몇 개까지..

async/await의 실행 원리: Job, 마이크로태스크, 실행 컨텍스트

Promise와 async/await 깊이 이해하기 2/4들어가며async/await은 Promise 코드를 동기 코드처럼 읽을 수 있게 만든다. async function loadUser() { const response = await fetch("/api/user"); const user = await response.json(); return user;} 하지만 코드가 동기적으로 보이는 것과 실제로 동기적으로 실행되는 것은 다르다.await은 스레드를 멈추지 않는다.Promise를 제거하지도 않는다.실제로는 다음과 같은 과정이 일어난다.async 함수 실행→ await 지점에서 실행 컨텍스트 중단→ Promise 반응 등록→ 호출자에게 제어권 반환→ Promise 완료→ Job을 통해 실행 컨..

Promise의 의미론: 비동기 작업이 아닌 단일 할당 상태 기계

Promise와 async/await 깊이 이해하기 1/4들어가며Promise는 흔히 “나중에 값을 받기 위한 객체”라고 설명된다.이 설명은 입문 단계에서는 유용하지만, 다음 질문에는 충분히 답하지 못한다.resolve()를 호출했는데도 왜 Promise가 여전히 pending일 수 있는가?then()은 왜 항상 새로운 Promise를 반환하는가?Promise 안에 Promise를 반환해도 왜 중첩되지 않는가?Promise와 thenable은 무엇이 다른가?이미 만들어진 Promise를 다시 기다리면 작업도 다시 실행되는가?이 질문들에 답하려면 Promise를 단순한 비동기 문법이 아니라 다음 세 가지 관점에서 바라봐야 한다.Promise = 단일 할당 상태 기계 + 미래 결과를 관찰하는 프..

JavaScript 클로저 완전 정복: 함수는 어떻게 자신이 태어난 환경을 기억하는가

프론트엔드 개발자 면접에서 자주 나오는 JavaScript 질문 중 하나가 바로 클로저(Closure) 다.많은 개발자가 클로저를 “함수 안의 함수” 또는 “외부 변수에 접근하는 내부 함수” 정도로 기억한다. 하지만 이 설명은 절반만 맞다. 클로저를 제대로 이해하려면 단순히 코드 패턴을 외우는 것이 아니라, JavaScript가 스코프를 어떻게 결정하는지, 함수가 어떤 환경을 기억하는지, 그리고 그 특성이 실무에서 상태 관리, 이벤트 핸들러, 비동기 처리, React Hooks, 메모리 관리와 어떻게 연결되는지까지 이해해야 한다.이 글에서는 클로저를 기초부터 깊이 있게 정리해본다.1. 클로저를 한 문장으로 정의하면클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경이 함께 묶인 구조다.조금 더 쉽게 말하..

JavaScript의 자료형에는 기본(Primitive) 자료형과 기본이 아닌(Non-primitive) 자료형으로 두 가지 유형의 자료형이 있다. 기본 자료형 JavaScript 언어에서 제공하는 미리 정의된 데이터 유형을 기본 자료형이라고 한다. JavaScript는 Number, String, Boolean, Undefined, Symbol 및 BigInt를 포함하는 여섯 가지 유형의 기본 자료형을 제공한다. 기본 자료형의 크기는 고정되어 있으므로 JavaScript는 콜 스택(실행 컨텍스트)에 기본 자료형을 저장한다. 기본 자료형에 액세스하면 해당 변수에 저장된 실제 값을 조작한다. 따라서 기본 변수는 값에 의해 액세스됩니다. 기본 값을 저장하는 변수를 다른 변수에 할당하면 변수에 저장된 값이 생..

컴퓨터 프로그래밍에서 깊은 복사는 새 메모리 주소로 새 객체를 만들고 원래 객체의 속성 값을 새 객체에 복사하는 객체의 복사본이다. 반면 얕은 복사는 새 메모리 주소로 새 객체를 생성하지만 해당 속성에 대해 원본 객체와 동일한 객체(주소)를 참조하는 객체의 복사본이다. 다음은 자바스크립트를 사용하여 깊은 복사와 얕은 복사를 구현한 예제다. const original = { a: 1, b: { c: 2 } }; // original 객체의 얕은 복사본 const shallowCopy = { ...original }; // original 객체의 깊은 복사본 const deepCopy = JSON.parse(JSON.stringify(original)); // original 객체의 속성 수정 origina..