코드 땜장이

Promise resolve와 fulfilled의 차이: 호출하는 함수와 도달한 상태를 구분하기 빠른 답 resolve 는 Promise의 상태 이름이 아니라 Promise 생성자 안에서 제공되는 함수입니다. fulfilled 는 Promise가 성공 값으로 완료된 상태입니다. resolve(value) 에 일반 값을 넘기면 대개 fulfilled 가 되지만, rejected Promise나 실패하는 thenable을 넘기면 rejected 가 될 수 있습니다. resolve 호출은 동기 코드에서 일어나도 then 콜백은 현재 실행 흐름이 끝난 뒤 microtask로 실행됩니다. 목차 한눈에 비교 시간 흐름으로 이해하기 Promise의 상태와 값 구분하기 resolve를 호출해도 fulfilled가 아닐 수 있는 경우 콘솔 출력으로 보는 실행 순서 resolve, reject, then, catch를 함께 읽는 법 자주 나오는 오해 면접에서 설명할 때의 기준 한눈에 비교 개념 resolve 는 호출하는 함수이고, fulfilled 는 Promise가 가질 수 있는 상태입니다. 위치 resolve 는 new Promise((resolve, reject) => {}) 의 실행자 함수에 인자로 들어오고, fulfilled 는 Promise 내부 상태를 설명할 때 쓰입니다. 역할 resolve 는 전달된 값으로 Promise 해결 절차를 시작하고, fulfilled 는 그 절차가 성공 값으로 끝난 상태를 뜻합니다. 값 처리 resolve(1) 은 1 로 이행되지만, resolve(Promise.reject(error)) 는 바깥 Promise도 거부될 수 있습니다. 실행 시점 resolve 호출은 지금 실행 중인 코드에서 발생하고, then 콜백은 microtask 큐를 거쳐 나중에 실행됩니다. 오류 의미 fulfilled 는 성공 값이 있는 상태이고, 실패 이유가 있는 상태는 rejected 입니다. resolve 와 fulfilled 가...

자바스크립트 Promise를 상태 흐름과 실행 순서로 이해하기 빠른 답 Promise는 비동기 작업의 성공 값이나 실패 이유를 나중에 전달하기 위한 객체입니다. 상태는 pending 에서 fulfilled 또는 rejected 로 한 번만 바뀌며, 이후 다시 바뀌지 않습니다. then , catch , finally 콜백은 현재 동기 코드가 끝난 뒤 마이크로태스크로 실행됩니다. 복잡한 비동기 흐름은 긴 then 체인보다 async/await 와 좁은 범위의 try/catch 로 나누면 읽기 쉬워집니다. 목차 시간 흐름으로 이해하기 흐름으로 보기 값, 상태, 오류를 나눠 보기 Promise 생성자는 언제 실행될까 상태는 한 번만 결정된다 에러 전파와 catch의 의미 여러 작업을 조합할 때의 차이 then 체인과 async await 디버깅할 때 자주 보는 신호 흔한 오해 시간 흐름으로 이해하기 생성 시점 new Promise(...) 가 실행되면 executor 함수는 즉시 실행됩니다. → 대기 시점 아직 결과가 정해지지 않은 Promise는 pending 상태입니다. → 결정 시점 resolve 또는 reject 중 먼저 호출된 쪽으로 결과가 정해집니다. → 예약 시점 then , catch , finally 콜백은 마이크로태스크 큐에 등록됩니다. → 실행 시점 현재 동기 코드가 끝난 뒤 예약된 콜백이 실행됩니다. Promise를 “비동기니까 전부 나중에 실행되는 코드”로만 이해하면 콘솔 출력 순서가 자주 헷갈립니다. Promise 생성자 안의 executor는 동기적으로 실행됩니다. 나중에 실행되는 쪽은 Promise의 결과를 관찰하는 then , catch , finally 콜백입니다. 이 차이를 구분하면 상태 전환, 에러 전파, Promise.all 같은 조합 메서드의 동작을 더 차분하게 따라갈 수 있습니다. 흐름으로 보기 흐름 다이어그램 이 흐름에서 중요한 지점은 “작업이 시작되는 시점”과 “결과를 받는 콜백이 실행되...

자바스크립트 이벤트 루프: 싱글 스레드가 비동기 작업을 처리하는 방식 빠른 답 싱글 스레드는 자바스크립트 코드가 실행되는 콜 스택이 하나라는 뜻이지, 런타임 전체가 한 작업만 한다는 뜻은 아닙니다. 타이머, 네트워크, 파일 I/O 같은 대기 작업은 브라우저 Web APIs나 Node.js 런타임이 맡고, 완료된 콜백만 다시 실행 큐로 들어옵니다. Promise.then , queueMicrotask 같은 마이크로태스크는 일반 태스크보다 먼저 처리되므로 setTimeout 보다 앞서 실행될 수 있습니다. 브라우저와 Node.js는 이벤트 루프 구조가 다르고, Node.js 20 이후에는 타이머와 setImmediate 의 상대 순서를 설명할 때 오래된 자료와 차이가 있습니다. 목차 시간 흐름으로 이해하기 흐름으로 보기 싱글 스레드라는 말의 정확한 범위 이벤트 루프가 실행 순서를 정하는 방식 태스크와 마이크로태스크를 구분해야 하는 이유 브라우저와 Node.js의 차이 실행 환경을 남기는 설정 예시 Node.js에서 관찰하는 실행 순서 오류와 로그로 디버깅하기 흔한 오해 시간 흐름으로 이해하기 현재 작업 동기 코드가 콜 스택에서 위에서 아래로 실행됩니다. → 작업 위임 setTimeout , fetch , 파일 I/O 같은 대기 작업은 런타임으로 넘어갑니다. → 완료 대기 타이머 만료, 네트워크 응답, I/O 완료 콜백이 큐에 들어갑니다. → 마이크로태스크 현재 콜 스택이 비면 Promise.then , queueMicrotask 가 먼저 실행됩니다. → 다음 태스크 타이머, 이벤트 콜백 같은 태스크가 실행되고 브라우저는 렌더링 기회를 얻습니다. 흐름으로 보기 흐름 다이어그램 이 흐름에서 자바스크립트 엔진이 직접 모든 일을 붙잡고 있는 것은 아닙니다. 엔진은 현재 실행 중인 함수 본문을 처리하고, 오래 걸리는 대기 작업은 브라우저나 Node.js 런타임에 넘깁니다. 작업이 끝나면 콜백이 큐에 들어가고, 이벤트 루프가 콜 스택이 비는 시점에 맞...

자바스크립트 이벤트 루프, 실행 순서가 헷갈릴 때 바로 이해하는 방법 목차 이벤트 루프가 필요한 이유 콜 스택, 태스크 큐, 마이크로태스크 큐를 분리해서 보기 실제로 어떤 순서로 실행되는가 실험 환경은 이렇게 준비하면 충분합니다 브라우저에서 실행 순서를 직접 확인해보기 Node.js에서는 무엇이 다를까 실무에서 자주 틀리는 포인트 실행 순서 버그를 잡는 가장 현실적인 방법 빠른 답 이벤트 루프는 콜 스택이 비었을 때 대기 중인 작업을 실행 순서에 맞게 넘겨주는 구조입니다. Promise.then, queueMicrotask는 보통 setTimeout보다 먼저 실행되며, 이유는 마이크로태스크가 더 높은 우선순위를 가지기 때문입니다. setTimeout(fn, 0)은 즉시 실행이 아니라 현재 동기 코드가 끝난 뒤 다음 턴으로 미루는 동작에 가깝습니다. 실행 순서 버그를 잡을 때는 콜 스택, 마이크로태스크, 매크로태스크를 분리해서 로그로 확인해야 합니다. 초안을 발행용 글로 다시 정리하고 있습니다. 빠른 답 을 짧게 다듬고, 브라우저·Node.js에서 바로 실행해 볼 수 있는 설정과 예제를 중심으로 본문을 재구성하겠습니다.# 자바스크립트 이벤트 루프, 실행 순서가 헷갈릴 때 바로 이해하는 방법 빠른 답 이벤트 루프는 콜 스택이 비는 시점마다 대기 중인 작업을 확인하고, 우선순위에 맞게 다시 실행 흐름에 올리는 런타임 메커니즘입니다. Promise.then , queueMicrotask , await 이후 코드는 보통 setTimeout(..., 0) 보다 먼저 실행됩니다. 이들은 마이크로태스크로 처리되기 때문입니다. setTimeout(fn, 0) 은 즉시 실행이 아니라 현재 동기 코드와 현재 턴의 마이크로태스크가 끝난 뒤 다음 태스크로 넘기는 예약에 가깝습니다. 실행 순서가 꼬일 때는 코드를 동기 , 마이크로태스크 , 매크로태스크 로 나눠 로그를 찍으면 원인을 가장 빨리 찾을 수 있습니다. 이벤트 루프가 필요한 이유 자바스크립트는 ...