AI 시대, 프런트엔드 개발자에게는 ‘암기’가 아니라 ‘기본기’가 필요하다!

HTML, CSS, 자바스크립트부터 리액트, 넥스트.js, AI 프로젝트까지!
한 권으로 합격하는 프런트엔드 면접·실무 완성서!

생성형 AI가 코드를 작성해 주는 시대가 열리면서 단순히 최신 기술을 활용하는 수준을 넘어, 기술의 원리를 이해하고 자신의 언어로 설명할 수 있는 개발자의 중요성이 더욱 커지고 있다. 이 책은 11년 차 현직 개발자이자 실제 면접관으로 활동해 온 저자의 실무 경험을 바탕으로 프런트엔드 면접과 실무에서 자주 등장하는 질문 109개를 Q & A 형식으로 정리한 실전 면접 대비서다. 단순히 면접 답변을 암기하는 것이 아니라 질문의 의도를 이해하고 핵심 개념을 자신의 경험과 연결해 설명할 수 있도록 돕는다.

이 책은 HTML, CSS, 자바스크립트 같은 웹 기초부터 리액트와 넥스트.js, 인프라·보안·네트워크, 최신 AI 프로젝트까지 프런트엔드 개발의 핵심을 한 권에서 모두 다룬다. 특히 AI 시대의 개발 환경 변화를 적극 반영하여 AI에 기반한 서비스 개발 과정에서 겪을 수 있는 실무 질문도 함께 수록했다. LLM 스트리밍 응답 처리, RAG 구조, AI 환각 대응 전략, SSE와 웹소켓 비교, ReadableStream 활용 방식 등 AI 기반 서비스를 개발할 때 필요한 최신 프런트엔드 기술도 함께 설명한다. 질문과 답변 형식으로 구성해 필요한 내용을 빠르게 찾아 학습할 수 있으며, 모의 면접 질문으로 실제 면접에서 답변하는 것처럼 연습할 수 있다. 프런트엔드 개발 취업을 준비하는 예비 개발자, 개발 실무 역량과 프런트엔드 개발 기초를 함께 다지고 싶은 주니어 개발자, AI 시대에도 흔들리지 않는 경쟁력을 갖추고 싶은 프런트엔드 개발자에게 든든한 길잡이가 되어 줄 것이다.

[목차]

첫째마당 프런트엔드 기초 - HTML, CSS, 자바스크립트

1장 HTML과 웹 기본 구조

__Q1 HTML이란 무엇인가요?

__Q2 HTML의 Doctype은 어떤 역할을 하나요?

__Q3 〈head〉 태그 안에는 어떤 태그를 사용하나요?

__Q4 시맨틱 태그란 무엇이고, 사용하는 이유를 설명할 수 있나요?

__Q5 웹 표준과 웹 접근성이란 무엇인가요?

__Q6 모든 HTML 태그에는 종료 태그가 있나요?

__Q7 블록 요소와 인라인 요소란 무엇인가요?

__Q8 data-* 속성을 설명할 수 있나요?

__Q9 웹 스토리지란 무엇인가요?

__Q10 〈a〉 태그는 어떻게 사용하나요?

__Q11 〈iframe〉 태그의 장점과 단점은 무엇인가요?

__Q12 헤딩 태그란 무엇인가요?

__Q13 HTML 엔티티란 무엇인가요?

__Q14 〈img〉 태그의 srcset 속성은 언제 사용하나요?

__Q15 〈canvas〉 태그란 무엇인가요?

__Q16 HTML 인코딩이란 무엇인가요?

__Q17 〈svg〉 태그는 어떤 용도로 사용하나요?

2장 최신 CSS 기법과 레이아웃

__Q18 CSS란 무엇인가요?

__Q19 CSS 선택자와 선택자 우선순위를 설명할 수 있나요?

__Q20 가상 클래스와 가상 요소의 차이점은 무엇인가요?

__Q21 〈img〉 태그와 CSS background-image 속성은 각각 언제 사용해야 하나요?

__Q22 박스 모델이란 무엇인가요?

__Q23 전처리기란 무엇인가요?

__Q24 display: none, visibility: hidden, opacity: 0의 차이점은 무엇인가요?

__Q25 z-index가 의도대로 동작하지 않는 경우 어떤 것을 확인해야 할까요?

__Q26 인라인 스타일 요소와 블록 스타일 요소를 가운데 정렬하는 방법은 무엇인가요?

__Q27 vertical-align은 왜 수직 정렬이 잘 안 될까요?

__Q28 요소를 중앙 정렬하는 대표적인 방법은 무엇인가요?

__Q29 미디어 쿼리는 언제 사용하나요?

__Q30 animation, transition, transform 속성이란 무엇인가요?

__Q31 플렉스박스와 그리드의 차이점은 무엇이며, 각각 어떤 상황에 사용하는 것이 더 적합한가요?

__Q32 BEM은 무엇이며, 사용하는 이유를 설명할 수 있나요?

__Q33 @supports 규칙은 언제 사용하나요?

__Q34 .is()와 :where() 가상 클래스 선택자의 차이점은 무엇인가요?

3장 자바스크립트 핵심 개념

__Q35 자바스크립트란 무엇인가요?

__Q36 자바스크립트는 어떤 데이터 타입을 가지고 있나요?

__Q37 객체란 무엇인가요?

__Q38 얕은 복사와 깊은 복사란 무엇인가요?

__Q39 호이스팅이란 무엇인가요?

__Q40 동등 연산자와 일치 연산자의 차이점은 무엇인가요?

__Q41 스코프 체인이란 무엇인가요?

__Q42 this 키워드란 무엇인가요?

__Q43 실행 컨텍스트를 들어 본 적 있나요?

__Q44 자바스크립트의 프로토타입이란 무엇인가요?

__Q45 콜백, 프로미스, async/await의 차이점과 각각의 장단점은 무엇인가요?

__Q46 자바스크립트의 이벤트 루프와 태스크 큐란 무엇인가요?

__Q47 클로저란 무엇이고, 어떻게 활용하는지 설명할 수 있나요?

__Q48 클래스를 사용하는 이유는 무엇인가요?

__Q49 이벤트 전파나 위임이란 무엇인가요?

__Q50 일반 함수와 화살표 함수의 가장 큰 차이점은 무엇인가요?

__Q51 스프레드 문법과 레스트 문법의 차이점은 무엇인가요?

__Q52 불변성이란 무엇이고, 자바스크립트에서 중요한 이유는 무엇인가요?

__Q53 디바운싱과 스로틀링의 차이점은 무엇이며, 언제 사용해야 하나요?

__Q54 타입스크립트를 사용하는 이유는 무엇이며, interface와 type 키워드의 차이점을 설명할 수 있나요?

둘째마당 프런트엔드 실전 - 라이브러리와 프레임워크

4장 리액트의 핵심 개념과 실전 활용

__Q55 리액트의 가상 돔과 재조정 과정의 역할은 무엇인가요?

__Q56 클래스 컴포넌트와 함수형 컴포넌트의 차이점은 무엇인가요?

__Q57 useEffect 훅의 동작 원리와 의존성 배열의 중요성을 설명할 수 있나요?

__Q58 리액트에서 컴포넌트 간 통신을 위해 사용하는 다양한 방법을 설명할 수 있나요?

__Q59 리액트의 성능 최적화를 위한 구체적인 방법은 무엇인가요?

__Q60 사용자 정의 훅을 만드는 목적이 무엇인가요?

__Q61 리액트 18 버전에 도입된 동시성 기능을 설명할 수 있나요?

__Q62 리액트 컴포넌트의 오류 처리를 어떻게 구현할 수 있나요?

__Q63 CSR의 개념과 한계점은 무엇인가요?

__Q64 key 속성의 중요성과 정확한 사용법을 설명할 수 있나요?

5장 넥스트.js의 핵심 개념과 실전 활용

__Q65 넥스트.js를 사용하는 이유와 장점은 무엇인가요?

__Q66 CSR, SSR, SSG를 설명할 수 있나요?

__Q67 앱 라우터와 페이지 라우터의 차이점은 무엇인가요?

__Q68 서버 컴포넌트와 클라이언트 컴포넌트의 역할과 차이점을 설명할 수 있나요?

__Q69 〈Image〉 컴포넌트를 사용하는 이유와 장점은 무엇인가요?

__Q70 넥스트.js에서 검색 엔진 최적화를 어떻게 개선할 수 있나요?

__Q71 넥스트.js의 라우팅 시스템은 무엇인가요?

__Q72 넥스트.js의 하이드레이션 오류란 무엇인가요?

__Q73 넥스트.js에서 API 루트를 사용하는 목적은 무엇인가요?

__Q74 넥스트.js 앱을 배포할 때 고려해야 할 사항은 무엇이고, 어떤 플랫폼을 주로 사용하나요?

셋째마당 프런트엔드 심화 - 협업 지식과 AI

6장 프런트엔드 개발자가 알아야 할 인프라·보안·네트워크

__Q75 REST API와 RESTful API를 설명할 수 있나요?

__Q76 CDN은 무엇이며, 프런트엔드 앱 성능 개선에 어떻게 기여하나요?

__Q77 브라우저 캐싱 전략을 설명할 수 있나요?

__Q78 서버리스 함수로 API 키와 같은 민감한 정보를 어떻게 관리할까요?

__Q79 CORS는 무엇인가요?

__Q80 프런트엔드 영역에서 발생할 수 있는 웹 사이트의 보안 위협은 어떤 것이 있을까요?

__Q81 웹 보안에서 HTTPS가 왜 중요한지 설명할 수 있나요?

__Q82 Base64 인코딩이란 무엇인가요?

__Q83 웹 앱의 세션 관리와 쿠키 기반의 보안 이슈에 대해 설명할 수 있나요?

__Q84 서드 파티 스크립트를 추가할 때 발생할 수 있는 성능과 보안 위험은 무엇일까요?

__Q85 웹 사이트의 로딩 성능을 최적화하는 방법으로 어떤 것이 있을까요?

__Q86 마이크로 프런트엔드 아키텍처가 무엇이고 도입했을 때의 장점과 단점을 설명할 수 있나요?

__Q87 웹 브라우저가 웹 사이트를 렌더링하는 과정을 네트워크 관점에서 설명할 수 있나요?

__Q88 웹소켓은 어떤 경우에 사용하며, HTTP 폴링 방식과 비교했을 때의 장단점은 무엇인가요?

__Q89 HTTP와 HTTP2의 차이점은 무엇인가요?

7장 실무에서 필요한 프로젝트 지식

__Q90 프로젝트 빌드와 배포가 무엇인가요?

__Q91 ES 모듈과 CommonJS 모듈의 차이점은 무엇인가요?

__Q92 번들러를 사용하는 이유는 무엇인가요?

__Q93 브라우저 렌더링 과정을 단계별로 설명할 수 있나요?

__Q94 하이브리드 앱 개발에서 웹뷰와 앱이 소통할 수 있는 방법은 무엇인가요?

__Q95 package.json 파일의 주요 필드와 역할을 설명할 수 있나요?

__Q96 크로스 브라우징이란 무엇인가요?

__Q97 프런트엔드에서 사용하는 TDD 기법을 설명할 수 있나요?

__Q98 깃플로는 무엇이며, 그 외에는 어떤 버전 관리 전략이 있을까요?

__Q99 구글의 코어 웹 바이탈이란 무엇인가요?

8장 AI 프로젝트

__Q100 LLM의 응답 지연 문제를 사용자 경험 측면에서 어떻게 해결할 수 있나요?

__Q101 AI의 환각 현상으로 잘못 만든 UI 컴포넌트가 렌더링될 위험을 방지하는 방안은 무엇인가요?

__Q102 생성형 AI 채팅 UI에서 중단 기능을 구현한다면 어떤 기술을 사용할 수 있나요?

__Q103 길게 대화할 때 토큰 소모를 줄이는 프런트엔드 컨텍스트 관리 전략은 무엇인가요?

__Q104 RAG 구조에서 프런트엔드 개발자의 역할은 무엇이라고 생각하나요?

__Q105 이미지를 멀티모달 모델에 보낼 때 Base64 인코딩 방식과 멀티파트 방식 중 어떤 방식을 선호할까요?

__Q106 고화질 사진을 업로드할 때 토큰 비용을 아끼고 처리 속도를 높이는 방법은 무엇인가요?

__Q107 LLM의 텍스트 응답을 구현할 때 SSE와 웹소켓 중 어떤 것을 선호하나요?

__Q108 Fetch API를 사용하여 스트리밍 응답을 처리할 때 ReadableStream을 어떻게 다루나요?

__Q109 스트리밍 도중 네트워크 연결이 끊겼을 때 자연스럽게 재연결하는 전략은 무엇일까요?

찾아보기

AI가 결과를 순식간에 내주는 시대, 우리는 점점 ‘왜’를 설명하는 능력을 잃어 가고 있습니다. 이 책은 원리와 개념을 깊이 이해함으로써 AI가 내놓은 결과를 스스로 검증하고, 문제의 본질을 꿰뚫어 보는 힘을 길러 줍니다. 원리 기반의 사고로 수많은 난제를 해결해 온 개발자의 노하우가 담긴 실전 바이블입니다.
_ 현대자동차 | 임○홍

10년 넘게 프런트엔드 엔지니어로 일하고 수많은 채용 인터뷰에 면접관으로 참여하며, 개발자에게 기초와 이를 설명하는 능력이 얼마나 중요한지 절감했습니다. 이 책은 프런트엔드 개발자에게 필요한 핵심 지식을 폭넓고 명료하게 정리한 안내서입니다. 주니어 개발자에게는 필독서가 될 것이며, 경험 많은 엔지니어에게도 지식을 단단히 정리하는 데 큰 도움이 될 것입니다. 빠르게 변하는 AI 시대일수록, 결국 개발자를 지탱하는 힘은 흔들리지 않는 기본기이기 때문입니다.
_ 브이원씨 | 이○만

면접을 준비하다 보면 개념은 알고 있지만 어떻게 설명해야 할지 막막할 때가 있습니다. 이 책은 프런트엔드 기초부터 실무에서 마주치는 다양한 기술 영역, 최신 AI 프로젝트 기술까지 Q & A 형식으로 촘촘하게 담았습니다. 개념 정리, 실전 답변 예시, 모의 면접 질문을 함께 구성해서 면접 준비와 실무 역량을 동시에 키울 수 있습니다. 빠르게 변하는 기술 환경 속에서 방향을 잡고 싶은 모든 프런트엔드 개발자에게 강력히 추천합니다.
_ 삼성전자 | 김○은

실제 면접장에서 프런트엔드 기초 질문에 의외로 답을 어려워하는 지원자를 많이 보았습니다. 익숙하게 사용하는 기술이라도 그 원리를 얼마나 깊이 이해하고 있는지가 큰 차이를 만듭니다. 이 책은 프런트엔드 면접에서 꼭 필요한 핵심 기초 지식을 탄탄하게 담아냈습니다. 기술 면접을 준비하고 있다면 꼭 읽어 보길 추천합니다.
_ 현대오토에버 | 양○걸

면접은 단순한 암기 싸움이 아닙니다. 이 책은 끊임없이 '왜'라는 질문을 던지며 프런트엔드의 본질을 이해하도록 이끕니다. 특히 LLM 기반 AI 프로젝트를 다룬 질문은 급변하는 개발 환경에서 스스로를 차별화할 수 있는 강력한 무기가 됩니다. 취업을 준비하는 분은 물론 깊이를 더하고 싶은 현직자까지, 이 책은 여러분이 다음 단계로 나아가는 시간을 앞당겨 줄 것입니다.
_ SK 계열사 | 유○희