JavaScript 미드레벨 종합 기술면접
새 면접Q. JavaScript의 이벤트 루프에서 Microtask Queue와 Macrotask Queue의 차이점을 설명하고, Promise, setTimeout, requestAnimationFrame이 각각 어느 큐에서 처리되는지, 그리고 실행 우선순위는 어떻게 되는지 설명해주세요.
Microtask Queue는 Macrotask Queue보다 높은 우선순위를 가지며, 현재 실행 중인 스크립트가 끝나면 즉시 처리됩니다. Promise의 then/catch/finally는 Microtask Queue에, setTimeout/setInterval은 Macrotask Queue에, requestAnimationFrame은 별도의 Animation Frame Queue에서 처리됩니다. 실행 순서는 동기 코드 → Microtask Queue 전체 → requestAnimationFrame → Macrotask Queue 순이며, 각 Macrotask 실행 후에도 Microtask Queue를 다시 확인합니다. 이를 이해하면 비동기 코드의 실행 순서를 정확히 예측하고 성능 최적화에 활용할 수 있습니다.
- • Microtask Queue가 Macrotask Queue보다 높은 우선순위를 가짐
- • Promise는 Microtask, setTimeout은 Macrotask, requestAnimationFrame은 별도 큐
- • 각 Macrotask 실행 후 Microtask Queue를 모두 비우는 패턴 반복
- • 이를 활용한 비동기 코드 최적화 및 실행 순서 제어 가능
process.nextTick (Node.js)과 queueMicrotask의 차이점은 무엇이며, 실무에서 Microtask Queue가 너무 많이 쌓여서 발생하는 문제를 경험한 적이 있나요?
Q. JavaScript에서 프로토타입 체인의 동작 원리를 설명하고, ES6 Class 문법과 기존 프로토타입 기반 상속의 차이점, 그리고 Object.create()를 사용한 상속과 Class 상속의 장단점을 비교해주세요.
프로토타입 체인은 객체에서 속성이나 메서드를 찾을 때 해당 객체에 없으면 __proto__ 링크를 따라 상위 프로토타입을 순차적으로 탐색하는 메커니즘입니다. ES6 Class는 내부적으로 프로토타입을 사용하는 문법적 설탕이지만, constructor 호출 강제, 호이스팅 방식 차이, super 키워드 제공 등의 차이가 있습니다. Object.create()는 프로토타입 체인을 명시적으로 제어할 수 있어 유연하지만, Class는 가독성이 높고 private 필드 등 최신 기능을 지원합니다. 실무에서는 팀 컨벤션과 요구사항에 따라 선택하되, 대부분의 모던 프로젝트에서는 Class 문법을 선호합니다.
- • 프로토타입 체인은 속성 탐색 시 상위 프로토타입을 순차적으로 검색
- • Class는 프로토타입의 문법적 설탕이지만 동작 방식에 차이 존재
- • Object.create()는 유연성, Class는 가독성과 최신 기능 지원
- • 성능 차이는 미미하며 코드 유지보수성과 팀 컨벤션이 선택 기준
프로토타입 체인이 깊어질 때 성능에 미치는 영향은 어떠하며, 실무에서 프로토타입 오염(Prototype Pollution) 취약점을 방지하기 위한 방법은 무엇인가요?
Q. SPA 애플리케이션에서 초기 로딩 성능을 개선하기 위한 Code Splitting 전략을 설명하고, Dynamic Import와 React.lazy의 차이점, 그리고 Chunk 크기 최적화를 위해 Webpack에서 설정할 수 있는 옵션들과 실무 적용 시 고려사항을 설명해주세요.
Code Splitting은 번들을 여러 청크로 나누어 필요한 시점에 로드하는 기법으로, 초기 로딩 시간을 크게 단축할 수 있습니다. Dynamic Import는 ECMAScript 표준으로 Promise를 반환하며 모든 모듈에 사용 가능하고, React.lazy는 React 컴포넌트 전용으로 Suspense와 함께 사용합니다. Webpack에서는 splitChunks 옵션으로 vendor 라이브러리 분리, maxSize로 청크 크기 제한, prefetch/preload로 우선순위 제어가 가능합니다. 실무에서는 라우트 기반 분할을 기본으로 하되, 번들 분석 도구로 중복 코드를 확인하고, 너무 많은 청크는 HTTP 요청 증가로 오히려 성능 저하를 일으킬 수 있어 적절한 균형이 필요합니다.
- • Code Splitting으로 초기 번들 크기 감소 및 로딩 성능 개선
- • Dynamic Import는 범용, React.lazy는 컴포넌트 전용으로 Suspense 연동
- • Webpack splitChunks로 vendor 분리, maxSize로 청크 크기 제어
- • 과도한 청크 분할은 HTTP 요청 증가로 역효과, 번들 분석 필수
HTTP/2 환경에서 Code Splitting 전략이 HTTP/1.1과 어떻게 달라지며, Tree Shaking과 Code Splitting을 함께 적용할 때 주의할 점은 무엇인가요?
Q. JavaScript에서 동기 코드의 try-catch와 비동기 코드의 에러 핸들링 방식 차이를 설명하고, Promise의 unhandled rejection과 async/await에서의 에러 처리 패턴, 그리고 전역 에러 핸들러를 구현할 때 고려해야 할 사항들을 설명해주세요.
동기 코드는 try-catch로 즉시 에러를 잡을 수 있지만, 비동기 코드는 콜백이 나중에 실행되어 try-catch로 잡을 수 없습니다. Promise는 catch 메서드나 두 번째 인자로 에러를 처리하며, unhandled rejection은 window.addEventListener('unhandledrejection')로 전역 처리합니다. async/await는 동기 코드처럼 try-catch를 사용할 수 있어 가독성이 높지만, Promise 체인의 일부 에러는 놓칠 수 있습니다. 전역 에러 핸들러는 마지막 안전장치로 로깅과 사용자 알림에 활용하되, 모든 에러를 전역에서 처리하면 디버깅이 어려우므로 로컬 에러 처리를 우선하고 예상치 못한 에러만 전역으로 올려야 합니다.
- • 동기 코드는 try-catch, 비동기 코드는 Promise catch나 async/await 사용
- • unhandled rejection은 전역 이벤트 리스너로 처리
- • async/await는 가독성이 높지만 Promise 체인 에러 주의
- • 전역 핸들러는 최후 수단이며 로컬 처리 우선, 로깅과 모니터링 필수
Node.js 환경에서 uncaughtException과 unhandledRejection의 차이점과 각각을 처리할 때 프로세스 재시작 전략은 어떻게 수립해야 하나요?
Q. 대규모 JavaScript 애플리케이션에서 상태 관리를 위한 Singleton 패턴, Observer 패턴, Flux 아키텍처의 특징을 비교하고, 각각의 장단점과 어떤 상황에서 어떤 패턴을 선택해야 하는지 실무 경험을 바탕으로 설명해주세요.
Singleton 패턴은 전역 상태를 하나의 인스턴스로 관리하여 간단하지만, 테스트가 어렵고 암묵적 의존성이 생깁니다. Observer 패턴은 상태 변경을 구독자에게 알려 느슨한 결합을 제공하지만, 구독 관계가 복잡해지면 디버깅이 어렵습니다. Flux 아키텍처는 단방향 데이터 흐름으로 예측 가능성을 높이고 디버깅이 쉽지만, 보일러플레이트가 많고 러닝 커브가 있습니다. 소규모 프로젝트나 간단한 전역 설정은 Singleton, 이벤트 기반 시스템은 Observer, 복잡한 상태와 여러 컴포넌트 간 공유가 필요한 대규모 SPA는 Flux(Redux, MobX 등)가 적합합니다. 실무에서는 프로젝트 규모와 팀의 숙련도를 고려해 선택합니다.
- • Singleton은 단순하지만 테스트와 의존성 관리 어려움
- • Observer는 느슨한 결합 제공하나 복잡도 증가 시 디버깅 곤란
- • Flux는 예측 가능성과 디버깅 용이하나 보일러플레이트 많음
- • 프로젝트 규모, 복잡도, 팀 숙련도에 따라 적절한 패턴 선택
최근 React의 Context API와 Zustand 같은 경량 상태 관리 라이브러리가 주목받는 이유는 무엇이며, Redux와 비교했을 때 어떤 트레이드오프가 있나요?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!