이벤트 루프 - js의 비동기 처리 엔진

이벤트 루프는 js의 비동기 실행 모델의 핵심 메커니즘입니다. 단일 스레드 언어인 js가 어떻게 여러 작업을 동시에 처리하는 것처럼 보이는지를 설명하는 중요한 개념입니다.

이벤트 루프는 js 엔진 자체 일부가 아니라, 브라우저나 Node.js와 같은 호스트 환경에서 제공하는 메커니즘입니다.

이벤트 루프의 작동 방식

이벤트 루프는 다음과 같은 순서로 작동합니다.

1. 콜 스택에서 코드 실행: 모든 js 코드는 콜 스택에서 실행됩니다.
2. 비동기 작업 위임: setTimeout, fetch, 이벤트 리스너와 같은 비동기 작업은 Web API 또는 Node.js에 위임되고, 즉시 콜 스택에서 제거됩니다.
3. 콜백 큐에 추가: 비동기 작업이 완료되면, 해당 콜백 함수는 적절한 큐에 추가됩니다.
4. 콜 스택 확인: 이벤트 루프는 콜 스택이 비어있는지 지속적으로 확인합니다.
5. 콜백 실행: 콜 스택이 비어있으면, 다음 순서로 콜백을 실행합니다.
   • 먼저 마이크로태스크 큐의 모든 작업을 실행 (Promise의 .then(), queueMicrotask() 등)
   • 그 다음 태스크 큐에서 하나의 작업을 가져와 실행(setTimeout, setInterval, UI 이벤트 등)

console.log("시작");

setTimeout(() => {
  console.log("타임아웃 콜백");
}, 0);

Promise.resolve().then(() => {
  console.log("프로미스 콜백");
});

console.log("종료");

// 출력 순서:
// "시작"
// "종료"
// "프로미스 콜백" (마이크로태스크 큐)
// "타임아웃 콜백" (태스크 큐)

---

이벤트 루프의 중요성

1. 비차단 동작: 무거운 작업이 UI를 차단하지 않도록 합니다.
2. 비동기 프로그래밍: 네트워크 요청, 타이머, 이벤트 처리와 같은 비동기 작업을 가능하게 합니다.
3. 성능 최적화: 단일 스레드에서도 효율적인 리소스 사용을 가능하게 합니다.

---

프로토타입 - js의 상속 메커니즘

js는 클래스 기반이 아닌 프로토타입 기반 언어입니다. 프로토타입은 js 객체가 다른 객체로부터 속성과 메서드를 상속받는 메커니즘입니다.

모든 js 객체는 프로토타입 객체를 참조하며, 이 프로토타입 객체의 속성과 메서드를 상속받습니다. 객체의 프로토타입은 내부 [[Prototype]] 속성에 저장됩니다.

프로토타입 체인

프로토타입 체인은 객체의 속성이나 메서드를 찾는 과정입니다.

1. 객체의 특정 속성이나 메서드를 찾을 때, js 엔진은 먼저, 해당 객체 자체를 확인
2. 찾고자 하는 속성이 객체에 없으면, 엔진은 해당 객체의 프로토타입에서 찾음
3. 프로토타입에도 없으면, 프로토타입의 프로토타입에서 찾는 식으로 계속됨
4. 이 체인은 null(Object.prototype의 프로토타입이 null)에 도달할 때까지 계속됨

---

프로토타입의 장점

1. 메모리 효율성: 모든 인스턴스가 동일한 메서드를 각각 복사하지 않고 프로토타입을 통해 공유합니다.

2. 동적 상속: 프로토타입 체인은 런타임에 수정될 수 있어 동적인 상속 구조를 지원합니다.

---

결론

이벤트 루프는 js가 비동기 작업을 어떻게 처리하는지 설명하고, 프로토타입은 객체 간의 상속과 속성 공유가 어떻게 이루어지는지를 보여줍니다.