강의
프론트엔드 기술 면접
면접 질문으로 정리하는 핵심 개념
자주 나오는 프론트엔드 면접 질문을 개념 설명과 퀴즈로 정리합니다. 자바스크립트·리액트·Next.js부터 인프라·보안·네트워크, 실무 프로젝트 지식, AI 프로젝트까지 질문 하나하나를 근거와 함께 익힙니다.
자바스크립트 핵심 개념
- 01자바스크립트란 무엇인가요?자바스크립트의 정체 — 동적 타입의 인터프리터 언어이자 단일 스레드 기반이며, 엔진과 런타임 위에서 어떻게 동작하는지 정리합니다.
- 02자바스크립트는 어떤 데이터 타입을 가지고 있나요?7가지 원시 타입과 객체 타입, 원시값과 참조값의 차이, typeof null 같은 함정을 정리합니다.
- 03객체란 무엇인가요?키-값 쌍의 집합인 객체의 정의와 생성·접근 방법, 참조 타입의 특성, 프로퍼티 다루기를 정리합니다.
- 04얕은 복사와 깊은 복사란 무엇인가요?한 단계만 복사하는 얕은 복사와 중첩 구조까지 복사하는 깊은 복사의 차이, spread·structuredClone의 동작을 정리합니다.
- 05호이스팅이란 무엇인가요?선언이 스코프 최상단으로 끌어올려지는 호이스팅과 var·let·const·함수 선언의 차이, TDZ를 정리합니다.
- 06동등 연산자와 일치 연산자의 차이점은 무엇인가요?타입 강제 변환을 하는 == 와 타입까지 비교하는 === 의 차이, 권장 사용법과 함정을 정리합니다.
- 07스코프 체인이란 무엇인가요?변수가 유효한 범위인 스코프, 렉시컬 스코프, 안쪽에서 바깥으로 변수를 찾아 올라가는 스코프 체인을 정리합니다.
- 08this 키워드란 무엇인가요?호출 방식에 따라 달라지는 this의 4가지 바인딩 규칙과 화살표 함수의 렉시컬 this를 정리합니다.
- 09실행 컨텍스트를 들어 본 적 있나요?코드가 실행되는 환경 정보인 실행 컨텍스트, 콜 스택, 생성/실행 단계, 호이스팅과의 관계를 정리합니다.
- 10자바스크립트의 프로토타입이란 무엇인가요?객체가 다른 객체를 상속하는 프로토타입 체인의 원리와 prototype·__proto__, 상속 동작을 정리합니다.
- 11콜백, 프로미스, async/await의 차이점과 장단점은 무엇인가요?비동기 처리 3가지 방식의 발전 과정 — 콜백 지옥, 프로미스 체이닝, async/await의 가독성을 정리합니다.
- 12자바스크립트의 이벤트 루프와 태스크 큐란 무엇인가요?단일 스레드에서 비동기를 처리하는 이벤트 루프, 콜 스택, 마이크로태스크와 매크로태스크 큐의 우선순위를 정리합니다.
- 13클로저란 무엇이고, 어떻게 활용하는지 설명할 수 있나요?함수가 자신이 선언된 렉시컬 환경을 기억하는 클로저의 원리와 데이터 은닉·상태 유지 활용을 정리합니다.
- 14클래스를 사용하는 이유는 무엇인가요?프로토타입 기반 상속을 더 명확하게 표현하는 class 문법, 생성자·상속·private 필드를 정리합니다.
- 15이벤트 전파나 위임이란 무엇인가요?캡처링과 버블링으로 이뤄지는 이벤트 전파, stopPropagation·preventDefault, 이벤트 위임 패턴을 정리합니다.
- 16일반 함수와 화살표 함수의 가장 큰 차이점은 무엇인가요?this 바인딩, arguments, 생성자 사용 가능 여부 등 일반 함수와 화살표 함수의 핵심 차이를 정리합니다.
- 17스프레드 문법과 레스트 문법의 차이점은 무엇인가요?값을 펼치는 스프레드(...)와 여러 값을 모으는 레스트(...)의 방향 차이와 활용을 정리합니다.
- 18불변성이란 무엇이고, 자바스크립트에서 중요한 이유는 무엇인가요?데이터를 직접 바꾸지 않고 새 값을 만드는 불변성의 개념과 예측 가능성·변화 감지에서의 중요성을 정리합니다.
- 19디바운싱과 스로틀링의 차이점은 무엇이며, 언제 사용해야 하나요?마지막 호출만 실행하는 디바운싱과 일정 간격으로 실행하는 스로틀링의 차이와 적용 사례, 구현을 정리합니다.
- 20타입스크립트를 사용하는 이유는 무엇이며, interface와 type의 차이는 무엇인가요?정적 타입으로 버그를 줄이는 타입스크립트의 이점과, 타입 정의 도구인 interface와 type의 차이를 정리합니다.
리액트 핵심 개념
- 01가상 DOM과 재조정 과정의 역할은 무엇인가요?실제 DOM의 가벼운 표현인 가상 DOM과, 변경점을 찾아 최소한으로 반영하는 재조정(reconciliation) 알고리즘을 정리합니다.
- 02클래스 컴포넌트와 함수형 컴포넌트의 차이점은 무엇인가요?생명주기 메서드와 this에 의존하던 클래스 컴포넌트와, 훅으로 상태·효과를 다루는 함수형 컴포넌트의 차이를 정리합니다.
- 03useEffect 훅의 동작 원리와 의존성 배열의 중요성은 무엇인가요?렌더링 이후 실행되는 부수 효과, 의존성 배열에 따른 실행 시점, 클린업 함수와 stale closure 문제를 정리합니다.
- 04컴포넌트 간 통신 방법에는 어떤 것들이 있나요?props 전달, 콜백을 통한 상태 끌어올리기, Context API, 상태 관리 라이브러리 등 컴포넌트가 데이터를 주고받는 방법을 정리합니다.
- 05리액트의 성능 최적화 방법에는 어떤 것들이 있나요?불필요한 리렌더링을 줄이는 memo·useMemo·useCallback, 코드 스플리팅, 리스트 가상화 등 핵심 최적화 기법을 정리합니다.
- 06사용자 정의 훅을 만드는 목적은 무엇인가요?상태 로직을 재사용 가능한 함수로 분리하는 커스텀 훅의 목적과 규칙, 그리고 상태가 공유되지 않는 이유를 정리합니다.
- 07리액트 18의 동시성 기능을 설명할 수 있나요?렌더링을 중단·재개할 수 있는 동시성 렌더링과 startTransition·useDeferredValue·자동 배칭·Suspense를 정리합니다.
- 08리액트 컴포넌트의 오류 처리를 어떻게 구현하나요?렌더링 중 에러를 잡는 에러 바운더리(Error Boundary)의 동작과, 이벤트 핸들러·비동기 코드를 try/catch로 다뤄야 하는 이유를 정리합니다.
- 09CSR의 개념과 한계점은 무엇인가요?브라우저에서 자바스크립트로 화면을 그리는 클라이언트 사이드 렌더링의 동작과, 초기 로딩·SEO 측면의 한계를 정리합니다.
- 10key 속성의 중요성과 올바른 사용법은 무엇인가요?리스트 재조정에서 항목을 식별하는 key의 역할과, 배열 인덱스를 key로 쓸 때 생기는 문제를 정리합니다.
Next.js 핵심 개념
- 01Next.js를 사용하는 이유와 장점은 무엇인가요?순수 리액트(CSR)의 한계를 보완하는 Next.js의 렌더링 방식, 라우팅, 최적화 기능 등 핵심 장점을 정리합니다.
- 02CSR, SSR, SSG의 차이를 설명할 수 있나요?HTML을 어디서·언제 만드는지에 따라 나뉘는 CSR·SSR·SSG(그리고 ISR)의 동작과 적합한 상황을 정리합니다.
- 03앱 라우터와 페이지 라우터의 차이점은 무엇인가요?Next.js의 두 라우팅 패러다임인 App Router(app/)와 Pages Router(pages/)의 구조와 기능 차이를 정리합니다.
- 04서버 컴포넌트와 클라이언트 컴포넌트의 차이는 무엇인가요?앱 라우터에서 기본인 서버 컴포넌트와, 상호작용을 담당하는 클라이언트 컴포넌트('use client')의 역할 차이를 정리합니다.
- 05next/image의 〈Image〉 컴포넌트를 쓰는 이유는 무엇인가요?일반 img 태그 대신 next/image를 쓸 때 얻는 자동 최적화, 지연 로딩, 레이아웃 이동 방지 등의 장점을 정리합니다.
- 06Next.js에서 검색 엔진 최적화(SEO)를 어떻게 개선하나요?서버 렌더링, 메타데이터 API, 시맨틱 마크업, 사이트맵 등 Next.js가 제공하는 SEO 개선 수단을 정리합니다.
- 07Next.js의 라우팅 시스템은 어떻게 동작하나요?폴더 구조가 곧 URL이 되는 파일 기반 라우팅과 동적 경로, 중첩 레이아웃, 클라이언트 내비게이션을 정리합니다.
- 08Next.js의 하이드레이션 오류란 무엇인가요?서버가 만든 HTML과 클라이언트가 처음 렌더한 결과가 어긋날 때 발생하는 하이드레이션 불일치의 원인과 해결법을 정리합니다.
- 09Next.js에서 API 라우트를 사용하는 목적은 무엇인가요?프론트엔드와 같은 프로젝트에서 백엔드 엔드포인트를 만드는 API 라우트(Route Handler)의 용도와 활용을 정리합니다.
- 10Next.js 앱 배포 시 고려사항과 주로 쓰는 플랫폼은 무엇인가요?렌더링 방식에 따른 호스팅 요구사항, 환경 변수, 빌드 산출물, 그리고 Vercel을 비롯한 배포 플랫폼을 정리합니다.
인프라·보안·네트워크
- 01REST API와 RESTful API를 설명할 수 있나요?자원 중심 설계 원칙인 REST와, 그 제약을 충실히 지킨 API를 가리키는 RESTful의 의미를 정리합니다.
- 02CDN은 무엇이며 프런트엔드 성능 개선에 어떻게 기여하나요?지리적으로 분산된 캐시 서버 네트워크인 CDN의 개념과, 프런트엔드 로딩 성능을 높이는 원리를 정리합니다.
- 03브라우저 캐싱 전략을 설명할 수 있나요?Cache-Control·ETag·Last-Modified 등 HTTP 캐시 헤더로 정적 자산을 효율적으로 관리하는 전략을 정리합니다.
- 04서버리스 함수로 API 키 같은 민감 정보를 어떻게 관리할까요?프런트엔드에 노출되면 안 되는 비밀 키를 서버리스 함수와 환경 변수로 안전하게 다루는 방법을 정리합니다.
- 05CORS는 무엇인가요?동일 출처 정책을 완화해 다른 출처의 자원 요청을 허용하는 브라우저 보안 메커니즘 CORS를 정리합니다.
- 06프런트엔드에서 발생할 수 있는 웹 보안 위협은 무엇이 있나요?XSS·CSRF·클릭재킹 등 프런트엔드에서 주의해야 할 대표적 웹 보안 위협과 방어법을 정리합니다.
- 07웹 보안에서 HTTPS가 왜 중요한가요?TLS로 통신을 암호화하는 HTTPS가 제공하는 기밀성·무결성·인증과, 이것이 중요한 이유를 정리합니다.
- 08Base64 인코딩이란 무엇인가요?바이너리 데이터를 텍스트로 표현하는 Base64 인코딩의 개념과 용도, 그리고 암호화가 아니라는 점을 정리합니다.
- 09세션 관리와 쿠키 기반 보안 이슈를 설명할 수 있나요?쿠키·세션으로 인증 상태를 유지하는 방식과, 쿠키 보안 속성으로 위협을 막는 방법을 정리합니다.
- 10서드 파티 스크립트의 성능·보안 위험은 무엇인가요?외부 스크립트(분석·광고·위젯 등)가 가져오는 성능 저하와 보안 위협, 그리고 완화 방법을 정리합니다.
- 11웹 사이트 로딩 성능을 최적화하는 방법은 무엇이 있나요?자산 경량화·로딩 전략·렌더링 최적화 등 초기 로딩 성능을 끌어올리는 핵심 기법을 정리합니다.
- 12마이크로 프런트엔드 아키텍처의 장단점은 무엇인가요?프런트엔드를 독립 배포 가능한 작은 단위로 쪼개는 마이크로 프런트엔드의 개념과 장단점을 정리합니다.
- 13브라우저가 웹 사이트를 렌더링하는 과정을 네트워크 관점에서 설명할 수 있나요?URL 입력부터 화면 표시까지, DNS·TCP·TLS·HTTP 요청과 자원 로딩의 네트워크 흐름을 정리합니다.
- 14웹소켓은 언제 쓰고, HTTP 폴링과 비교하면 어떤가요?양방향 실시간 통신인 웹소켓의 사용 사례와, HTTP 폴링·롱폴링과 비교한 장단점을 정리합니다.
- 15HTTP와 HTTP/2의 차이점은 무엇인가요?멀티플렉싱·헤더 압축·서버 푸시 등 HTTP/2가 HTTP/1.1의 한계를 어떻게 개선했는지 정리합니다.
실무 프로젝트 지식
- 01프로젝트 빌드와 배포가 무엇인가요?소스 코드를 배포 가능한 산출물로 바꾸는 빌드와, 그것을 사용자에게 제공하는 배포의 개념과 흐름을 정리합니다.
- 02ES 모듈과 CommonJS 모듈의 차이점은 무엇인가요?import/export 기반 ESM과 require/module.exports 기반 CommonJS의 문법·로딩 방식·동작 차이를 정리합니다.
- 03번들러를 사용하는 이유는 무엇인가요?모듈을 묶고 최적화하는 번들러의 역할과, 그것이 해결하는 문제(요청 수·호환성·최적화)를 정리합니다.
- 04브라우저 렌더링 과정을 단계별로 설명할 수 있나요?HTML·CSS를 화면 픽셀로 바꾸는 브라우저의 렌더링 파이프라인(DOM·CSSOM·렌더 트리·레이아웃·페인트·합성)을 정리합니다.
- 05하이브리드 앱에서 웹뷰와 앱이 소통하는 방법은 무엇인가요?웹뷰(WebView)와 네이티브 앱 사이의 양방향 통신(JS 인터페이스·메시지 브리지) 방식을 정리합니다.
- 06package.json의 주요 필드와 역할을 설명할 수 있나요?프로젝트 메타데이터·의존성·스크립트·진입점 등 package.json의 핵심 필드와 역할을 정리합니다.
- 07크로스 브라우징이란 무엇인가요?여러 브라우저·환경에서 일관된 동작과 모습을 보장하는 크로스 브라우징의 개념과 대응 방법을 정리합니다.
- 08프런트엔드에서 사용하는 TDD 기법을 설명할 수 있나요?테스트를 먼저 작성하는 TDD의 Red-Green-Refactor 사이클과 프런트엔드에서의 적용 방법을 정리합니다.
- 09깃플로는 무엇이며, 그 외 버전 관리 전략은 무엇이 있나요?Git Flow의 브랜치 구조와 GitHub Flow·Trunk-Based 등 대표적인 브랜치 전략을 비교해 정리합니다.
- 10구글의 코어 웹 바이탈이란 무엇인가요?사용자 경험을 측정하는 구글의 핵심 지표 LCP·INP·CLS의 의미와 기준, 개선 방향을 정리합니다.
AI 프로젝트
- 01LLM의 응답 지연 문제를 사용자 경험 측면에서 어떻게 해결할 수 있나요?LLM 응답이 느릴 때 체감 지연을 줄이는 스트리밍·낙관적 피드백·스켈레톤 등 UX 전략을 정리합니다.
- 02AI 환각으로 잘못 만든 UI 컴포넌트의 렌더링 위험을 어떻게 방지하나요?LLM이 생성한 UI/코드를 그대로 렌더링할 때의 위험과, 스키마 검증·화이트리스트·샌드박스 등 방어 전략을 정리합니다.
- 03생성형 AI 채팅 UI에서 중단 기능을 구현한다면 어떤 기술을 사용할 수 있나요?스트리밍 중인 LLM 응답을 멈추는 중단 기능을 AbortController로 구현하는 방법과 고려사항을 정리합니다.
- 04길게 대화할 때 토큰 소모를 줄이는 프런트엔드 컨텍스트 관리 전략은 무엇인가요?대화가 길어질수록 커지는 토큰 비용을, 윈도잉·요약·선택적 컨텍스트로 줄이는 프런트엔드 전략을 정리합니다.
- 05RAG 구조에서 프런트엔드 개발자의 역할은 무엇이라고 생각하나요?검색 증강 생성(RAG) 파이프라인의 개념과, 그 안에서 프런트엔드가 맡는 입력·표시·출처·UX 역할을 정리합니다.
- 06이미지를 멀티모달 모델에 보낼 때 Base64와 멀티파트 중 무엇을 선호하나요?멀티모달 모델에 이미지를 전송하는 두 방식(Base64 인라인 vs multipart/form-data)의 장단점과 선택 기준을 정리합니다.
- 07고화질 사진 업로드 시 토큰 비용을 아끼고 처리 속도를 높이는 방법은 무엇인가요?멀티모달 모델에 고해상도 이미지를 보낼 때 리사이즈·압축·해상도 조절로 토큰 비용과 처리 시간을 줄이는 방법을 정리합니다.
- 08LLM의 텍스트 응답을 구현할 때 SSE와 웹소켓 중 무엇을 선호하나요?LLM 토큰 스트리밍에 쓰이는 SSE(서버센트 이벤트)와 WebSocket을 비교하고, 단방향 스트리밍에 SSE가 적합한 이유를 정리합니다.
- 09Fetch API로 스트리밍 응답을 처리할 때 ReadableStream을 어떻게 다루나요?fetch 응답의 body(ReadableStream)를 reader로 읽고, 디코딩·청크 누적·SSE 파싱으로 토큰을 점진 처리하는 방법을 정리합니다.
- 10스트리밍 도중 네트워크가 끊겼을 때 자연스럽게 재연결하는 전략은 무엇인가요?LLM 스트리밍 중 연결이 끊겼을 때 이어받기 위한 재시도·백오프·재개(resume)·상태 보존 전략을 정리합니다.