자바스크립트 비동기 처리 면접 질문

자바스크립트의 비동기 처리는 프론트엔드 개발에서 빠질 수 없는 핵심 개념이에요.

API 호출, 타이머, 이벤트 처리 등 모든 곳에서 사용되죠.

면접에서도 정말 자주 나오는 주제이니 확실히 이해해두시면 좋을 거예요.

비동기 처리 기본 개념

1. 동기와 비동기의 차이점은? 동기는 코드가 순서대로 실행되어서 앞선 작업이 끝날 때까지 기다리는 방식이에요. 비동기는 시간이 오래 걸리는 작업을 백그라운드에서 처리하고, 다른 코드를 계속 실행하는 방식이죠. 마치 빨래를 돌려놓고 다른 집안일을 하는 것과 같아요.

2. 자바스크립트가 싱글 스레드인데 어떻게 비동기 처리가 가능한가요? 자바스크립트 엔진은 싱글 스레드지만, 브라우저나 Node.js 같은 런타임 환경에서 Web API나 C++ API를 통해 멀티 스레딩을 지원해요. 이벤트 루프가 이런 비동기 작업들을 조율해서 마치 동시에 실행되는 것처럼 보이게 해줘요.

3. 이벤트 루프는 어떻게 동작하나요? 콜 스택, 태스크 큐, 마이크로태스크 큐를 계속 확인하면서 작업을 스케줄링해요. 콜 스택이 비어있으면 마이크로태스크 큐를 먼저 확인하고, 그 다음에 태스크 큐를 확인해서 콜 스택으로 이동시켜요. 마치 교통 정리하는 경찰관 같은 역할이에요.

Callback과 Promise

4. 콜백 함수의 한계는 무엇인가요? 콜백 헬(Callback Hell)이 가장 큰 문제예요. 비동기 작업이 중첩되면 코드가 피라미드 모양으로 깊어져서 읽기 어려워져요. 에러 처리도 복잡해지고 디버깅이 힘들어져요.

5. Promise가 콜백보다 좋은 이유는? 체이닝을 통해 순차적인 비동기 작업을 깔끔하게 표현할 수 있어요. .catch()로 에러 처리도 통합적으로 할 수 있고, Promise.all(), Promise.race() 같은 유틸 메서드도 제공해요. 코드 가독성이 훨씬 좋아져요.

6. Promise의 상태는 어떻게 변화하나요? 처음에는 pending(대기) 상태에서 시작해요. 작업이 성공하면 fulfilled(이행), 실패하면 rejected(거부) 상태로 변경돼요. 한 번 settled(이행 또는 거부)된 Promise는 상태가 변경되지 않아요.

7. Promise.all()과 Promise.allSettled()의 차이는? Promise.all()은 모든 Promise가 성공해야 성공하고, 하나라도 실패하면 바로 실패해요. Promise.allSettled()는 모든 Promise의 결과를 기다린 후 성공/실패 결과를 배열로 반환해요.

Async/Await

8. async/await의 장점은? 비동기 코드를 동기 코드처럼 작성할 수 있어서 가독성이 좋아요. try/catch로 에러 처리도 직관적이고, 디버깅할 때도 스택 트레이스가 더 명확해요. Promise 체이닝보다 훨씬 자연스럽게 읽힙니다.

9. await는 언제 사용할 수 있나요? async 함수 안에서만 사용할 수 있어요. 일반 함수에서는 사용할 수 없고, 최상위 레벨에서 사용하려면 top-level await(ES2022)를 지원하는 환경이어야 해요.

10. async/await에서 병렬 처리는 어떻게 하나요? await를 순차적으로 사용하면 직렬 처리가 되어서 느려요. Promise.all()을 함께 사용하거나, Promise를 먼저 생성한 후 나중에 await하는 방식으로 병렬 처리를 할 수 있어요.

실무 활용

11. 비동기 작업에서 메모리 누수를 방지하려면? 컴포넌트가 언마운트된 후에 setState를 호출하지 않도록 주의해야 해요. AbortController를 사용해서 진행 중인 요청을 취소하거나, 플래그 변수로 컴포넌트 상태를 확인하는 방법이 있어요.

12. Race Condition을 어떻게 해결하나요? 여러 비동기 요청이 순서대로 완료되지 않을 때 발생하는 문제예요. 요청에 순서 번호를 부여하거나, 이전 요청을 취소하는 방식으로 해결할 수 있어요. 디바운싱이나 스로틀링도 효과적이에요.

이런 비동기 처리 개념들은 실무에서 매일 사용하는 내용들이에요. API 호출부터 사용자 인터렉션까지, 거의 모든 곳에서 활용되죠. 실제 프로젝트에서 어떻게 적용했는지 구체적인 예시를 준비해두시면 좋을 거예요.