📌 이 글을 활용하는 방법
이 면접 질문 리스트는 난이도별, 분야별로 구성되어 있습니다. 단순히 답변을 외우기보다는 각 질문의 개념을 정확히 이해하고, 본인의 언어로 설명할 수 있도록 준비하시기 바랍니다. ⭐ 표시는 특히 자주 출제되는 필수 질문입니다.
1️⃣ HTML/CSS 기초 (15문항)
⭐ 핵심 질문
1. 브라우저 렌더링 과정에 대해 설명해주세요. ⭐⭐⭐
브라우저는 HTML을 파싱하여 DOM 트리를 생성하고, CSS를 파싱하여 CSSOM 트리를 생성합니다. 이 두 트리를 결합하여 렌더 트리를 만든 후, 레이아웃 계산을 거쳐 화면에 페인팅합니다. JavaScript 실행 시 렌더링이 중단될 수 있어 script 태그 위치가 중요합니다.
2. Reflow와 Repaint의 차이점은 무엇인가요? ⭐⭐
Reflow는 요소의 크기나 위치가 변경되어 레이아웃을 다시 계산하는 과정이고, Repaint는 색상이나 배경 등 시각적 속성만 변경되어 다시 그리는 과정입니다. Reflow가 Repaint보다 비용이 크므로 성능 최적화 시 주의해야 합니다.
3. display 속성의 종류와 차이점을 설명해주세요. ⭐
block은 한 줄 전체를 차지하며 width/height 지정 가능, inline은 컨텐츠 크기만큼만 차지하며 width/height 지정 불가, inline-block은 inline처럼 배치되지만 block의 속성을 가짐, none은 요소를 완전히 제거합니다.
4. Box Model에 대해 설명해주세요.
5. px, em, rem의 차이점은 무엇인가요? ⭐
6. Flexbox의 주요 속성과 동작 원리를 설명해주세요. ⭐
7. Grid와 Flexbox의 차이점과 사용 시나리오는?
8. CSS 선택자의 우선순위 규칙을 설명해주세요.
9. position 속성의 종류와 차이점은?
10. 반응형 웹을 구현하는 방법에는 어떤 것이 있나요?
11. Semantic HTML이 중요한 이유는 무엇인가요?
12. CSS Cascading에 대해 설명해주세요.
13. z-index는 어떻게 동작하나요?
14. Attribute와 Property의 차이점은?
15. CSS 애니메이션과 transition의 차이는?
2️⃣ JavaScript 핵심 개념 (30문항)
⭐ 필수 질문
16. 호이스팅(Hoisting)에 대해 설명해주세요. ⭐⭐⭐
인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 선언문을 해당 스코프의 최상단으로 끌어올리는 것처럼 동작하는 JavaScript의 특징입니다. var는 undefined로 초기화되지만, let과 const는 TDZ(Temporal Dead Zone)에 빠져 ReferenceError가 발생합니다.
17. var, let, const의 차이점을 설명해주세요. ⭐⭐⭐
var는 함수 스코프, 재선언/재할당 가능, 호이스팅 시 undefined 초기화. let은 블록 스코프, 재할당 가능, TDZ 존재. const는 블록 스코프, 재할당 불가, TDZ 존재. 현대 JavaScript에서는 const 우선, 재할당 필요 시 let 사용을 권장합니다.
18. 클로저(Closure)란 무엇인가요? ⭐⭐⭐
함수가 선언될 때의 렉시컬 환경을 기억하여, 외부 함수의 실행이 끝난 후에도 외부 함수의 변수에 접근할 수 있는 특성입니다. 데이터 은닉, 모듈 패턴, 콜백 함수 등에 활용되지만, 메모리 누수에 주의해야 합니다.
19. this의 동작 원리를 설명해주세요. ⭐⭐⭐
20. 이벤트 루프(Event Loop)에 대해 설명해주세요. ⭐⭐⭐
21. 콜스택(Call Stack)과 테스크 큐(Task Queue)의 차이는? ⭐⭐
22. 마이크로태스크 큐와 매크로태스크 큐의 차이점은? ⭐
23. 프로토타입(Prototype)과 프로토타입 체인을 설명해주세요. ⭐⭐
24. 동기와 비동기의 차이점은 무엇인가요? ⭐⭐
25. Promise와 async/await의 차이를 설명해주세요. ⭐⭐⭐
26. 얕은 복사와 깊은 복사의 차이는? ⭐
27. 스코프와 스코프 체인에 대해 설명해주세요. ⭐⭐
28. 실행 컨텍스트(Execution Context)란? ⭐
29. ES6에서 추가된 주요 기능들은 무엇인가요? ⭐
30. Arrow Function과 일반 함수의 차이는? ⭐⭐
31. 구조 분해 할당(Destructuring)에 대해 설명해주세요.
32. Spread 연산자와 Rest 파라미터의 차이는?
33. map, filter, reduce의 차이와 사용 사례는? ⭐
34. 이벤트 버블링과 캡처링에 대해 설명해주세요. ⭐
35. 이벤트 위임(Event Delegation)이란?
36. 디바운싱(Debouncing)과 쓰로틀링(Throttling)의 차이는? ⭐
37. JavaScript는 어떤 언어인가요? (싱글스레드, 인터프리터 등) ⭐
38. 모듈 시스템(CommonJS vs ES Modules)의 차이는?
39. null과 undefined의 차이점은?
40. ==와 ===의 차이점을 설명해주세요. ⭐
41. 고차 함수(Higher Order Function)란?
42. 순수 함수(Pure Function)와 사이드 이펙트란?
43. 커링(Currying)에 대해 설명해주세요.
44. try-catch-finally 동작 원리는?
45. JavaScript의 메모리 관리와 가비지 컬렉션은?
3️⃣ React 핵심 개념 (35문항)
⭐ React 필수 질문
46. React의 Virtual DOM에 대해 설명해주세요. ⭐⭐⭐
Virtual DOM은 실제 DOM의 가벼운 복사본으로, React가 메모리에 저장하는 JavaScript 객체입니다. 상태 변경 시 새로운 Virtual DOM과 이전 Virtual DOM을 비교(Diffing)하여 변경된 부분만 실제 DOM에 적용(Reconciliation)하므로, 성능이 향상됩니다.
47. useState의 동작 원리를 설명해주세요. ⭐⭐⭐
useState는 함수형 컴포넌트에서 상태를 관리하는 Hook입니다. React는 내부적으로 Fiber 아키텍처를 사용하여 각 컴포넌트의 Hook 호출 순서를 배열로 관리하며, setState 호출 시 새로운 렌더링을 예약합니다. setState는 비동기로 동작하며, 함수형 업데이트를 사용하면 최신 상태를 보장받을 수 있습니다.
48. useEffect의 동작 원리와 의존성 배열을 설명해주세요. ⭐⭐⭐
useEffect는 컴포넌트의 사이드 이펙트를 처리하는 Hook입니다. 의존성 배열이 없으면 매 렌더링마다 실행, 빈 배열이면 마운트 시에만 실행, 배열에 값이 있으면 해당 값이 변경될 때 실행됩니다. cleanup 함수를 반환하면 언마운트 시 또는 다음 effect 실행 전에 호출됩니다.
49. Props와 State의 차이점을 설명해주세요. ⭐⭐⭐
50. React의 생명주기(Lifecycle)에 대해 설명해주세요. ⭐⭐
51. 함수형 컴포넌트와 클래스형 컴포넌트의 차이는? ⭐⭐
52. React Hooks가 등장한 이유는 무엇인가요? ⭐⭐
53. useMemo와 useCallback의 차이점은? ⭐⭐⭐
54. React.memo는 언제 사용하나요? ⭐⭐
55. useRef는 어떻게 동작하나요? ⭐
56. useContext를 사용하는 이유는? ⭐⭐
57. useReducer는 언제 사용하나요?
58. useEffect와 useLayoutEffect의 차이점은? ⭐
59. Custom Hook을 만드는 이유와 방법은? ⭐
60. React의 key prop은 왜 필요한가요? ⭐⭐
61. 제어 컴포넌트와 비제어 컴포넌트의 차이는?
62. Prop Drilling이란 무엇이고 어떻게 해결하나요? ⭐⭐
63. Context API와 Redux의 차이점은? ⭐⭐
64. Redux의 3가지 원칙을 설명해주세요. ⭐
65. Redux Toolkit을 사용하는 이유는?
66. React의 렌더링 최적화 방법에는 무엇이 있나요? ⭐⭐
67. React에서 불변성을 유지해야 하는 이유는? ⭐⭐
68. React Fragment는 무엇이고 언제 사용하나요?
69. Portal은 무엇이고 언제 사용하나요?
70. Error Boundary에 대해 설명해주세요.
71. React의 Strict Mode는 무엇인가요?
72. Suspense와 Lazy Loading에 대해 설명해주세요. ⭐
73. React의 Concurrent Mode란?
74. Server Component는 무엇인가요?
75. React 18의 새로운 기능들은? ⭐
76. SPA의 장단점은 무엇인가요? ⭐
77. React Router의 동작 원리는?
78. React, Vue, Angular의 차이점은? ⭐
79. CSR과 SSR의 차이점을 설명해주세요. ⭐⭐
80. Next.js를 사용하는 이유는 무엇인가요? ⭐
4️⃣ 네트워크 & 웹 (10문항)
81. CORS란 무엇이고 어떻게 해결하나요? ⭐⭐⭐
Cross-Origin Resource Sharing의 약자로, 다른 출처의 리소스 접근을 제어하는 보안 메커니즘입니다. 프록시 서버 사용, 서버에서 Access-Control-Allow-Origin 헤더 설정, JSONP 사용 등으로 해결할 수 있습니다.
82. HTTP와 HTTPS의 차이점은? ⭐
83. HTTP 메서드(GET, POST, PUT, DELETE 등)의 차이는? ⭐⭐
84. RESTful API란 무엇인가요? ⭐⭐
85. 쿠키, 세션, 로컬스토리지, 세션스토리지의 차이는? ⭐⭐
86. 웹 보안(XSS, CSRF)에 대해 설명해주세요. ⭐
87. 웹소켓(WebSocket)이란 무엇인가요?
88. JWT 토큰 인증 방식을 설명해주세요. ⭐
89. HTTP 상태 코드(200, 400, 500 등)의 의미는? ⭐
90. GraphQL과 REST API의 차이점은?
5️⃣ 성능 최적화 & 기타 (10문항)
91. 웹 성능 최적화 방법에는 어떤 것이 있나요? ⭐⭐⭐
이미지 최적화(lazy loading, WebP 포맷), 코드 스플리팅, Tree Shaking, 번들 사이즈 줄이기, CDN 사용, 브라우저 캐싱, 불필요한 리렌더링 방지, 디바운싱/쓰로틀링 적용 등이 있습니다.
92. Webpack, Vite 등 번들러의 역할은? ⭐
93. Code Splitting은 무엇이고 왜 필요한가요? ⭐
94. Tree Shaking이란 무엇인가요?
95. 브라우저 캐싱 전략을 설명해주세요.
96. TypeScript를 사용하는 이유는 무엇인가요? ⭐⭐
97. 테스트 코드 작성의 중요성과 방법은? ⭐
98. CI/CD에 대해 설명해주세요.
99. 접근성(Accessibility)을 고려한 개발이란?
100. 최신 프론트엔드 기술 트렌드를 어떻게 학습하나요? ⭐
💡 추가: 실무 상황 질문 (보너스)
🔥 실무 시나리오 질문
• 섬네일 이미지의 용량이 너무 클 때 어떻게 해결하시겠습니까?
• 레거시 코드로 인해 로딩 시간이 오래 걸립니다. 우선순위를 어떻게 정하시겠습니까?
• 10만개 이상의 상품을 렌더링해야 하는 커머스 사이트를 어떻게 구현하시겠습니까?
• 프로젝트에서 성능 최적화를 어떻게 진행했나요?
• 팀원과 기술적 의견 충돌이 있을 때 어떻게 해결하나요?
📚 면접 준비 전략
✅ 효과적인 준비 방법
1단계: 핵심 개념 이해
⭐⭐⭐ 표시된 질문부터 공부하세요. 이 질문들은 거의 모든 면접에서 나옵니다.
2단계: 본인의 언어로 설명
답변을 외우지 말고, 개념을 이해한 후 본인의 경험과 연결하여 설명하세요.
3단계: 코드로 증명
개념을 설명한 후 간단한 코드 예시를 보여줄 수 있으면 큰 가산점입니다.
4단계: 프로젝트 경험 연결
"제가 프로젝트에서 이 기술을 사용했을 때..."로 시작하는 실무 경험을 추가하세요.
5단계: 모의 면접
친구나 선배 개발자에게 질문을 받아보며 실전처럼 연습하세요.
⚠️ 면접 시 주의사항
- 모르는 것을 아는 척하지 마세요. "잘 모르지만 이렇게 이해하고 있습니다"가 정직합니다.
- 질문에 대한 핵심만 간결하게 답변하세요. 불필요한 부연설명은 감점 요소입니다.
- 면접관의 질문 의도를 파악하세요. 꼬리 질문에 대비하여 깊이있게 준비하세요.
- 긴장해도 괜찮습니다. 차분히 생각을 정리한 후 답변하세요.
- 포트폴리오 프로젝트에 사용한 기술은 반드시 깊이있게 공부하세요.
📖 추가 학습 자료
• MDN Web Docs: JavaScript, HTML, CSS 공식 문서
• React 공식 문서: 2025년 업데이트된 최신 문서 필독
• 모던 JavaScript 튜토리얼: 심화 개념 학습
• GitHub 저장소: Esoolgnah/Frontend-Interview-Questions
• 유튜브: 드림코딩, 노마드코더, 코딩애플 면접 시리즈
🎯 면접 성공을 위한 마지막 조언
면접은 지식을 평가하는 것이 아니라, 함께 일하고 싶은 사람인지 확인하는 자리입니다. 기술적 역량도 중요하지만, 문제 해결 능력, 소통 능력, 학습 태도가 더욱 중요합니다.
완벽한 답변보다는 솔직하고 논리적인 사고 과정을 보여주세요. "모르겠지만 이렇게 접근해보겠습니다"라는 자세가 때로는 더 좋은 인상을 줍니다.
여러분의 면접 합격을 진심으로 응원합니다! 💪
💡 팁: 이 글을 북마크하고, 면접 전날 ⭐⭐⭐ 표시된 질문들만 빠르게 복습하세요!
정기적으로 업데이트되는 최신 면접 트렌드를 반영하여 내용이 추가될 예정입니다.
