← 모든 게시물

프론트엔드 면접 질문 2026

technologyFebruary 11, 2026·#Technology

2026년 프런트엔드 생태계의 주요 변화를 살펴보고 성능, 컴파일러, 최신 애플리케이션 아키텍처에 대한 기본 질문부터 심층 질문까지 인터뷰를 준비하세요.

프론트엔드 면접 질문 2026

아래는 2026년 표준 프런트엔드 면접 질문의 포괄적인 목록으로 기초부터 심층적인 실제 처리 상황까지 지식 그룹별로 분류되어 있습니다.

  1. 이벤트 루프 및 작업 우선순위 지정: 마이크로태스크 대기열(Promise, async/await)과 매크로태스크 대기열(setTimeout, I/O) 간의 우선순위 차이를 설명하세요. 무한 마이크로태스크 루프로 인해 브라우저가 완전히 응답하지 않을 수 있는 이유는 무엇입니까?

  2. 메모리 관리: "Mark-and-Sweep" 가비지 수집 메커니즘은 어떻게 작동합니까? 복잡한 SPA 애플리케이션에서 메모리 누수를 감지하는 방법과 이를 방지하기 위해 WeakMap/WeakSet은 어떤 역할을 합니까?

  3. 객체 복사 메커니즘: 얕은 복사와 깊은 복사를 구별합니다. structuredClone(), JSON.parse(JSON.stringify()) 및 lodash.cloneDeep의 성능과 제한 사항을 비교합니다.

  4. 참조 논리: 변수 a가 객체이고 b = a를 할당하는 경우 b의 속성을 어떻게 변경합니까? 영향을 미치나요? 어? 중첩된 객체를 복사하기 위해 라이브러리에서 일반적으로 사용되는 알고리즘은 무엇입니까?

  5. 네트워크 응답 시간을 최적화하기 위해 순차적 await 명령 대신 Promise.all을 언제 사용해야 합니까? 이기종 요청 목록을 처리할 때 Promise.allSettled가 시스템에 더 많은 안정성을 제공하는 시나리오를 설명하세요.

  6. 조건부 성능: switch와 if-else의 실행 메커니즘을 구별하세요. 조건이 많을 때 일반적으로 switch가 더 빠른 이유는 무엇이며 컴파일러의 "점프 테이블" 개념은 무엇입니까?

  7. TypeScript 진화: 2026년 추세에서 기존 Enum 대신 as const와 결합된 "String Literal Unions" 사용을 선호하는 이유는 무엇입니까? 번들 크기 및 유형 안전성에 대한 영향 분석.

  8. 고급 입력: infer 키워드가 조건부 유형에서 작동하는 방식과 as를 사용한 강제와 비교하여 satisfies 연산자의 이점을 설명합니다.

  9. 메모 논리: Hook Can useMemo 함수 정의를 기억하시나요?

  10. useCallback Nuances: 재렌더링 성능 최적화 외에도 참조 안정성과 관련된 useCallback에 대한 다른 중요한 사용 사례가 있습니까?

  11. 내부 후크 저장소: 메모된 값 값)이 실제로 React의 Fiber 데이터 구조에 저장됩니까? Hooks 호출 순서가 "신성한" 순서로 간주되는 이유는 무엇입니까?

  12. useMemo와 useEffect: useMemo 및 useEffect를 동일한 내부 논리로 사용하지만 사용자 경험이나 실행 타이밍 측면에서 결과가 다른 예를 들어 보겠습니다.

  13. DOM 동기화: 런타임과 useEffect와 useLayoutEffect의 의도된 사용 차이는 무엇입니까? Hook을 잘못 사용하면 언제 UI 깜박임이 발생하나요?

  14. 함수 구성 요소 수명 주기: useEffect를 사용하여 함수 구성 요소의 수명 주기를 자세히 설명해주세요. 정리 기능은 정확히 언제 실행됩니까?

  15. 후크 규칙:루프, 조건문 또는 중첩 함수에서 후크를 호출할 수 없는 이유는 무엇입니까?

  16. useRef 메커니즘: Fiber 후드에서 useRef는 어떻게 작동합니까? React 19가 forwardRef를 제거하는 이유와 ref를 전달하는 새로운 메커니즘은 무엇입니까?

  17. 컨텍스트 API 최적화: 컨텍스트의 값 중 일부만 변경될 때 전체 하위 구성 요소 트리가 다시 렌더링되는 것을 방지하는 최적화 전략은 무엇입니까?

  18. 새로운 React 19 후크: 방법을 설명하세요. 작동하고 후크 useActionState, useOptimistic 및 use() 함수가 해결하는 문제는 무엇입니까?

  19. 서버에서? 이 프로세스에서 초기화 데이터의 역할을 설명합니다.

  20. 렌더링 비교: 렌더링 전략(SSG, SSR, ISR 및 PPR(부분 사전 렌더링))을 자세히 구분합니다. PPR은 "네트워크 폭포수" 문제를 어떻게 해결합니까?

  21. 직렬화 규칙을 위반하지 않고 서버 구성 요소에서 클라이언트 구성 요소로 데이터를 전달하는 방법은 무엇입니까? 이 경계를 넘어 함수나 클래스 인스턴스를 직접 전달하는 것이 허용되지 않는 이유는 무엇입니까?

  22. 캐싱 아키텍처: revalidateTag(), updateTag() 및 use 캐시 지시문(Next.js 16)과 같은 새로운 API를 사용하여 데이터 최신성을 명시적으로 제어하는 방법.

  1. Tailwind v4 Oxide Engine: 애플리케이션을 빌드할 때 Tailwind v4는 빌드 패키지에 전체 CSS 라이브러리를 포함합니까, 아니면 실제로 사용되는 클래스만 포함합니까? "소스 감지" 메커니즘에 대해 설명하세요.

  2. CRP(중요 렌더링 경로) 심층 분석: HTML 구문 분석 중에 브라우저는 async 또는 defer 속성 없이