2026년 최신 JavaScript 및 TypeScript 면접 질문과 자세한 답변을 정리했습니다. 프론트엔드 개발자가 기술 인터뷰 라운드를 자신 있게 통과할 수 있도록 도와주세요.

Virtual DOM이란 무엇인가요? React는 렌더링 간 차이를 확인하기 위해 어떤 알고리즘을 사용하나요?
빠른 검색을 입력하면 결과가 혼합되는 경우 어떻게 처리하나요? (경합 조건)
검색 결과를 다시 가져오지 않도록 캐시하는 방법
유형과 인터페이스
의 차이점은 무엇입니까?
일반?
부분, 필수...와 같은 매핑된 유형은 어떻게 처리합니까? 작동합니까?
TypeScript의 제한점 enum 메커니즘

이벤트 루프는 어떻게 작동합니까? Microtask와 Macrotask는 무엇입니까?
클로저란 무엇입니까? 클로저로 인해 버그나 메모리 문제가 발생하는 실제 예를 들어보세요. JavaScript에서
이것은 어떻게 작동하나요? 화살표 기능과 일반 기능의 차이점은 무엇인가요?
프로토타입과 프로토타입 체인? JavaScript가 프로토타입 기반이라는 것은 무엇을 의미합니까?
깊은 복사와 얕은 복사 — 언제 프로덕션 버그가 발생합니까?
디바운스 대 스로틀 — 다르며 어떤 경우에 발생합니까?
Promise 대 Async/Await — async/await가 코드를 생성합니까? 동기?
비동기 코드의 오류를 처리하는 방법은 무엇인가요? (try/catch, .catch, 전역 핸들러)

알 수 없음과 모든 것 — 어느 것을 사용해야 하며 왜 사용합니까?
Union과 Intersection 유형 — 차이점은 무엇입니까?
never 무엇입니까? TypeScript는 언제 유형을 절대로 추론하지 않습니까?
keyof와 typeof는 무엇입니까?
유형 축소/유형 가드란 무엇입니까? 예를 들어 (in, typeof, instanceof).

자세히 보기: 인터뷰 질문 Next.js 2026 Advanced

최근 여러 번의 Frontend 인터뷰 후에 저는 매우 분명한 사실을 깨달았습니다.

Framework는 인터뷰 요청에 도움이 될 수 있습니다.
그러나 JavaScript와 TypeScript는 합격 또는 실패 여부를 결정합니다.

많은 개발자가 React, NextJS를 매우 빨리 배우지만 JavaScript가 실제로 작동하는 방식에 대한 기초가 부족합니다. 연습하세요.

그리고 그것이 면접관이 테스트하고 싶은 것입니다.

참고: 이것은 외워야 할 목록이 아닙니다.
아래 질문은 종종 다음을 위해 사용됩니다:

지식의 깊이를 측정
기술적 사고를 평가
개발자 수준 분류

이 섹션을 마스터한다면, 대부분의 라운드 기술을 통과했습니다.

1. 가상 DOM이란 무엇입니까? 알고리즘 비교?

DOM

알고리즘:

React는 O(n³) 대신 휴리스틱 O(n)을 사용합니다.

두 가지 주요 가정:

다른 유형의 요소 → 전체 하위 트리 교체
키를 사용하여 요소를 식별합니다. 목록

2. 검색 시 경쟁 조건

요청이 먼저 전송되고 응답이 나중에 오는 경우 발생합니다.

가장 좋은 처리 방법:

AbortController

const Controller = new AbortController();
fetch(url, { 신호: 컨트롤러.신호 });
컨트롤러.중단();

요청 ID 추적
응답이 최신 요청인 경우에만 UI를 업데이트합니다.

React Query / SWR
이 라이브러리는 이를 전처리합니다.

3. 검색 결과 캐시

목표: 다시 API 호출을 방지합니다.

일반적인 방법:

지도 / 개체

const 캐시 = new Map();

if(cache.has(query)) return 캐시.get(query);

라이브러리: React Query, SWR → 자동 캐시 + 재검증.

고급:

LRU 캐시
TTL(시간 만료)

4. 유형 대 인터페이스

인터페이스

손쉬운 확장
선언 병합
객체/클래스에 적합

유형

합집합, 교차점
더 보기 유연하다

5. 일반이란 무엇입니까?

유형 안전성을 유지하면서 재사용 가능한 코드를 작성할 수 있습니다.

함수 ID(값: T): T {
  반환값;
}

사용 사례 상위:

API 응답 래퍼
저장소 패턴
맞춤 후크

키워드는 다음과 같아야 합니다.
재사용 가능 + 유형 안전

6. 매핑된 유형

이전 유형에서 새 유형을 생성할 수 있습니다.

부분 예:

type Partial = {
  [T 키의 P]?: T[P];
};

공통:

부분 → 선택
필수 → 필수
읽기 전용
선택/생략

유형 변환을 이해했음을 보여줍니다.

7. 열거형의 한계

런타임 객체 생성 → 번들 증가
트리 쉐이킹의 어려움
유연하지 않음

최신 추세:

type Role = "admin" | "사용자";

더 가볍고 더 안전합니다.

8. 이벤트 루프

JS는 단일 스레드이지만 이벤트 루프 덕분에 비동기를 처리합니다.

흐름:

콜 스택이 동기화를 실행합니다.
비동기 → 웹 API
콜백 → 대기열
이벤트 루프가 푸시됨 스택

마이크로태스크가 우선순위입니다. 매크로태스크:

마이크로태스크:

약속
queueMicrotask

매크로태스크:

setTimeout
setInterval

요령: Promise는 먼저 setTimeout을 실행합니다.

9. 클로저

함수는 범위가 종료되더라도 외부 범위를 기억합니다.

function counter() {
  개수 = 0으로 둡니다.
  return () => ++count;
}

버그 발생:

큰 참조 유지 → 메모리 누수
var
를 사용한 루프

let로 수정합니다.

10. 어떻게 작동하나요?

작성된 위치가 아니라 함수가 호출되는 방식에 따라 다릅니다.

빠른 규칙:

방법 → this = 객체
화살표 → 이것을 바인딩하지 마세요
call/apply/bind → set 수동으로

11. 프로토타입 체인

JS는 클래스 기반이 아니지만 프로토타입 기반입니다.

속성에 액세스할 때:

객체에서 검색
없음 → 프로토타입으로 이동
null까지

12. 깊은 복사와 얕은 복사

얕은: 참조 중첩 객체를 복사합니다.

{...obj}

심층:

structuredClone(obj)

13. 디바운스 대 스로틀

디바운스: 사용자가 입력을 중지한 후에만 실행합니다.

스로틀: 간격별로 실행 횟수를 제한합니다.

검색 → 디바운스
스크롤 → 스로틀

14. Promise 대 Async/Await

Async/await는 Promise의 구문 설탕일 뿐입니다.

코드를 동기식으로 만들지 않고 여전히 비동기식입니다.

장점:

쉬움 읽기
시도/잡기

15. 비동기 오류 처리

✔ try/catch
✔ .catch()
✔ 전역 핸들러

16. 알 수 없음 대 모두

모두: 유형 검사를 끕니다.
알 수 없음: 사용하기 전에 확인해야 합니다.

항상 알 수 없음을 선호합니다.

17. Union vs Intersection

Union (|) →
Intersection (&) 유형 중 하나 → 모두 있어야 함

Intersection은 쉽게 충돌을 일으킵니다.

18. never

발생하지 않음 값 유형입니다.

예:

함수 발생 오류
무한 루프

스위치의 철저한 검사에 사용됩니다.

19. keyof & typeof

keyof: 객체의 키를 공용체 유형으로 가져옵니다.

type Keys = keyof User;

typeof: 변수에서 유형을 가져옵니다.

재사용 가능한 유형을 구축할 때 매우 강력합니다.

20. 유형 보호 / 축소

학생들이 유형을 보다 구체적으로 이해하는 데 도움이 됩니다.

예:

if(typeof value === "string") {
}

또는:

in
instanceof
custom Guard

매우 명확한 패턴이 있습니다:

이벤트 루프, 클로저 또는 제네릭과 같은 주제에 대해 깊이 있게 대답하면 면접관은 거의 즉시 난이도를 높일 것입니다. 왜냐하면 그들은 당신이 단순히 암기하는 것이 아니라는 것을 알고 있기 때문입니다.

인터뷰 준비 시간이 3~5일밖에 없다면

우선 순위를 정하세요.

이벤트 루프
클로저
이것
제네릭
알 수 없음 vs. 모두

이 5가지 주제를 마스터하면 대부분의 후보자를 능가했습니다.

2026년 상위 30가지 JavaScript 및 TypeScript 인터뷰 질문 - 자세한 답변이 포함된 실제 전투