소득공제
분철
Do it! AI 시대에 살아남는 프런트엔드 면접의 기술
대기업 프런트엔드 면접관이 알려 주는 109가지 실전 질문
- 베스트
- IT 모바일 top100 2주
이미 소장하고 있다면 판매해 보세요.
- 국내배송만 가능
- 분철옵션 선택 시, 배송일이 변경될 수 있습니다.
- 분철상품은 해외배송이 불가합니다.
- 문화비소득공제 가능
이 상품의 태그
![내신콘서트 중학영어 기출문제집 [2학기 통합본] 중2 동아 윤정미 (2026년)](https://image.yes24.com/goods/193187754/L)
상세 이미지
책소개
관련 동영상
목차
|
첫째마당 프런트엔드 기초 — 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 스트리밍 도중 네트워크 연결이 끊겼을 때 자연스럽게 재연결하는 전략은 무엇일까요? 찾아보기 |
저자 소개 1
hee
12년 차 프런트엔드 개발자. 현대자동차 AI랩과 42dot을 거쳐, 현재는 CJ 계열사에서 LLM 기반 서비스를 개발하며 고객 경험 개선에 집중하고 있다.
다수의 프런트엔드 개발자 채용 면접관 경험을 바탕으로, 단순 암기가 아닌 원리를 이해하는 면접 학습법을 전하고자 이 책을 집필했다.
저서
● 《리액트로 배우는 소켓 프로그래밍》(루비페이퍼, 2023)
정희의 다른 상품
관련 분류
품목정보
- 발행일
- 2026년 06월 23일
- 쪽수, 무게, 크기
- 628쪽 | 170*240*35mm
- ISBN13
- 9791163038696
출판사 리뷰
|
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 |
추천평
|
AI가 결과를 순식간에 내주는 시대, 우리는 점점 ‘왜’를 설명하는 능력을 잃어 가고 있습니다. 이 책은 원리와 개념을 깊이 이해함으로써 AI가 내놓은 결과를 스스로 검증하고, 문제의 본질을 꿰뚫어 보는 힘을 길러 줍니다. 원리 기반의 사고로 수많은 난제를 해결해 온 개발자의 노하우가 담긴 실전 바이블입니다. - 현대자동차 | 임○홍
|
|
10년 넘게 프런트엔드 엔지니어로 일하고 수많은 채용 인터뷰에 면접관으로 참여하며, 개발자에게 기초와 이를 설명하는 능력이 얼마나 중요한지 절감했습니다. 이 책은 프런트엔드 개발자에게 필요한 핵심 지식을 폭넓고 명료하게 정리한 안내서입니다. 주니어 개발자에게는 필독서가 될 것이며, 경험 많은 엔지니어에게도 지식을 단단히 정리하는 데 큰 도움이 될 것입니다. 빠르게 변하는 AI 시대일수록, 결국 개발자를 지탱하는 힘은 흔들리지 않는 기본기이기 때문입니다. - 브이원씨 | 이○만
|
|
면접을 준비하다 보면 개념은 알고 있지만 어떻게 설명해야 할지 막막할 때가 있습니다. 이 책은 프런트엔드 기초부터 실무에서 마주치는 다양한 기술 영역, 최신 AI 프로젝트 기술까지 Q & A 형식으로 촘촘하게 담았습니다. 개념 정리, 실전 답변 예시, 모의 면접 질문을 함께 구성해서 면접 준비와 실무 역량을 동시에 키울 수 있습니다. 빠르게 변하는 기술 환경 속에서 방향을 잡고 싶은 모든 프런트엔드 개발자에게 강력히 추천합니다. - 삼성전자 | 김○은
|
|
실제 면접장에서 프런트엔드 기초 질문에 의외로 답을 어려워하는 지원자를 많이 보았습니다. 익숙하게 사용하는 기술이라도 그 원리를 얼마나 깊이 이해하고 있는지가 큰 차이를 만듭니다. 이 책은 프런트엔드 면접에서 꼭 필요한 핵심 기초 지식을 탄탄하게 담아냈습니다. 기술 면접을 준비하고 있다면 꼭 읽어 보길 추천합니다. - 현대오토에버 | 양○걸
|
|
면접은 단순한 암기 싸움이 아닙니다. 이 책은 끊임없이 '왜'라는 질문을 던지며 프런트엔드의 본질을 이해하도록 이끕니다. 특히 LLM 기반 AI 프로젝트를 다룬 질문은 급변하는 개발 환경에서 스스로를 차별화할 수 있는 강력한 무기가 됩니다. 취업을 준비하는 분은 물론 깊이를 더하고 싶은 현직자까지, 이 책은 여러분이 다음 단계로 나아가는 시간을 앞당겨 줄 것입니다. - SK 계열사 | 유○희
|
