도서 소개

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

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

  출판사 리뷰

AI 시대에도 프런트엔드 면접에서 기본기가 중요한 이유는 무엇인가요?
생성형 AI가 코드를 빠르게 작성해 주는 시대가 되었지만, 실제 면접에서는 여전히 “왜 이렇게 구현했나요?”, “이 기술을 선택한 이유는 무엇인가요?” 같은 질문이 이어집니다. 이제 기업은 단순히 코드를 작성할 수 있는 개발자보다 기술의 원리를 이해하고 자신의 언어로 설명할 수 있는 개발자를 필요로 합니다. 《Do it! AI 시대에 살아남는 프런트엔드 면접의 기술》은 HTML, CSS, 자바스크립트 같은 웹 기본기부터 리액트, 넥스트.js, AI 프로젝트 실무까지 프런트엔드 개발자가 반드시 알아야 할 핵심 질문 109개로 면접과 실무 경쟁력을 동시에 키울 수 있습니다.

프런트엔드 면접은 어떻게 준비해야 할까요?
프런트엔드 면접은 단순 암기만으로 합격하기 어렵습니다. 면접관은 지원자가 특정 기술을 얼마나 많이 알고 있는지보다 “왜 사용하는지”, “실제 프로젝트에서 어떻게 적용했는지”를 더 중요하게 봅니다. 이 책은 질문과 답변 형식으로 구성해서 실제 면접 흐름처럼 학습할 수 있으며, 개념 설명 → 실무 적용까지 자연스럽게 연결되어 꼬리 질문까지 대비할 수 있습니다. 따라서 면접을 처음 준비하는 취업 준비생은 물론, 실무 경험을 정리하고 싶은 주니어 개발자에게도 효과적입니다.

이 책에서는 어떤 프런트엔드 기술과 질문을 다루나요?
《Do it! AI 시대에 살아남는 프런트엔드 면접의 기술》은 최신 프런트엔드 기술 스택과 실무 면접 질문을 폭넓게 다룹니다. 특히 최근 채용 시장에서 중요도가 높아진 AI 프로젝트 관련 질문까지 포함해 단순한 개념 이해를 넘어 실제 서비스 구현과 기술 선택의 이유까지 설명할 수 있도록 구성했습니다.

이 책에서는 다음과 같은 핵심 기술과 실무 주제를 학습할 수 있습니다.
- HTML 웹 구조와 시맨틱 태그
- CSS 레이아웃과 최신 스타일링 기법
- 자바스크립트의 핵심 개념과 비동기 처리
- 타입스크립트 활용 방법
- 리액트의 가상 돔과 성능 최적화
- 넥스트.js의 SSR·CSR·SSG
- 브라우저 렌더링 과정과 웹 성능 최적화
- REST API, CORS, HTTPS, 웹 보안
- 웹소켓, SSE, 스트리밍 응답 처리
- LLM, RAG, AI 프로젝트 구조 이해

AI 시대에 프런트엔드 역량이 왜 더 중요해질까요?
최근 AI 서비스는 단순한 채팅 기능을 넘어 실시간 스트리밍, 멀티모달 UI, 개인화 경험까지 요구하고 있습니다. 사용자가 기다리는 동안 자연스럽게 응답을 보여 주고, 긴 대화를 효율적으로 관리하며, AI가 잘못 생성한 결과를 안정적으로 처리하는 것까지 모두 프런트엔드 개발자의 역할입니다. 따라서 이 책은 단순히 AI를 사용하는 방법이 아니라, AI 기반 서비스를 실제 사용자 경험으로 연결하는 방법까지 설명합니다. 이를 통해 최신 프론트엔드 기술과 AI 서비스의 구조를 함께 이해하고 면접과 실무에서 경쟁력 있는 개발자로 성장할 수 있습니다.

이 책은 어떤 독자에게 추천하나요?
- 프런트엔드 개발 취업을 준비하는 예비 개발자
- 기술 면접에서 논리적으로 답변하고 싶은 취업 준비생
- 프런트엔드 개발 기본기를 다시 정리하고 실무 역량을 강화하고 싶은 주니어 개발자
- AI 시대에도 경쟁력 있는 개발자로 성장하고 싶은 프런트엔드 개발자
- RAG·LLM·스트리밍 UI 같은 AI 프로젝트 실무를 준비하는 개발자

혼자 공부해도 충분히 따라갈 수 있을까요?
비전공자나 초보 개발자도 따라올 수 있도록 개념 정의부터 차근차근 설명합니다. 질문 중심 구성이라 면접 전날 빠르게 핵심만 정리하기에도 좋고, 처음부터 순서대로 읽으며 기본기를 쌓기에도 적합합니다. 또한 모의 면접 형식의 추가 질문으로 실제 면접 때처럼 답변 연습도 할 수 있습니다.

혼자 공부하다가 막히면 어떡하죠?
혼자 계획을 세우고 공부하다 보면 금방 지치기 마련입니다. ‘Do it! 스터디룸’의 공부단에 접속해서 이 책 완독에 도전해 보세요. 함께 공부하는 사람들도 만나고, 공부하는 내용을 올려 공유하고 인증하면 이지스퍼블리싱에서 출간한 책 선물도 받을 수 있습니다. 또한 어려운 내용이 있다면 ‘Do it! 스터디룸’ 게시판에 질문을 남겨 보세요. 전문가와 저자가 명쾌하게 해결해 드립니다.
- Do it! 스터디룸: cafe.naver.com/doitstudyroom

  작가 소개

지은이 : 정희
12년 차 프런트엔드 개발자. 현대자동차 AI랩과 42dot을 거쳐, 현재는 CJ 계열사에서 LLM 기반 서비스를 개발하며 고객 경험 개선에 집중하고 있다.다수의 프런트엔드 개발자 채용 면접관 경험을 바탕으로, 단순 암기가 아닌 원리를 이해하는 면접 학습법을 전하고자 이 책을 집필했다.저서-《리액트로 배우는 소켓 프로그래밍》(루비페이퍼, 2023)저자와 소통할 수 있는 공간- 이메일 devhee01@gmail.com- 인스타그램 @dev.hee

  목차

첫째마당 프런트엔드 기초 - 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 스트리밍 도중 네트워크 연결이 끊겼을 때 자연스럽게 재연결하는 전략은 무엇일까요?

찾아보기

  회원리뷰