프론트엔드 면접 단골 질문 50선

프론트엔드 개발자 면접을 준비하고 계신가요? 수많은 회사를 거쳐온 개발자들과 면접관들이 입을 모아 말하는 "이것만은 꼭 알아야 한다"는 질문들을 정리해봤습니다. 마치 요리를 할 때 기본 재료가 있듯이, 프론트엔드 면접에도 반드시 나오는 기본 질문들이 있어요.

HTML/CSS 기초 질문

1. DOCTYPE이 무엇이고 왜 필요한가요? HTML 문서의 맨 위에 선언하는 것으로, 브라우저에게 "이 문서는 HTML5로 작성되었어요"라고 알려주는 역할입니다. 마치 편지 봉투에 받는 사람 주소를 적는 것처럼 필수적이죠.

2. 시맨틱 태그를 사용하는 이유는? <div>와 <span>만 쓰는 것보다 <header>, <nav>, <main>, <article> 같은 의미있는 태그를 쓰면 검색엔진도 이해하기 쉽고, 스크린 리더 같은 보조 기술도 내용을 더 잘 파악할 수 있어요.

3. CSS Box Model이 무엇인가요? 모든 HTML 요소는 상자 모양이에요. 안쪽부터 content(내용) → padding(안쪽 여백) → border(테두리) → margin(바깥쪽 여백) 순서로 구성됩니다.

4. position 속성들의 차이점은?

• static: 기본값, 문서 흐름대로
• relative: 원래 위치 기준으로 이동
• absolute: 부모 기준으로 절대 위치
• fixed: 화면 기준으로 고정
• sticky: 스크롤에 따라 달라붙는 효과

5. Flexbox와 Grid의 차이점은? Flexbox는 1차원(가로 또는 세로) 레이아웃에 적합하고, Grid는 2차원(가로와 세로 동시) 레이아웃에 적합해요. 신발끈은 Flexbox, 바둑판은 Grid라고 생각하시면 됩니다.

JavaScript 핵심 질문

6. var, let, const의 차이점은?

• var: 함수 스코프, 호이스팅됨, 재선언 가능
• let: 블록 스코프, 재할당 가능
• const: 블록 스코프, 재할당 불가능

7. 호이스팅이 무엇인가요? 변수 선언과 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상이에요. 마치 책을 읽기 전에 목차를 먼저 훑어보는 것과 비슷합니다.

8. 클로저가 무엇인가요? 함수가 자신이 선언된 환경의 변수들을 기억하는 것이에요. 함수가 끝나도 그 변수들에 접근할 수 있죠. 마치 사람이 고향을 떠나도 고향의 기억을 간직하는 것과 같아요.

9. this 키워드는 무엇을 가리키나요? 상황에 따라 달라져요. 일반 함수에서는 전역 객체, 메서드에서는 해당 객체, 화살표 함수에서는 상위 스코프의 this를 가리킵니다.

10. Promise와 async/await의 차이점은? 둘 다 비동기 처리를 위한 방법이에요. Promise는 체이닝 방식이고, async/await는 동기 코드처럼 작성할 수 있어서 더 읽기 쉬워요.

브라우저와 성능 관련 질문

11. 브라우저 렌더링 과정을 설명해주세요. HTML 파싱 → DOM 생성 → CSS 파싱 → CSSOM 생성 → 렌더 트리 생성 → 레이아웃 계산 → 페인트 → 컴포지트 순서로 진행됩니다.

12. 리플로우와 리페인트의 차이는? 리플로우는 레이아웃이 다시 계산되는 것이고, 리페인트는 색상이나 배경 등 시각적 요소만 다시 그려지는 것이에요. 리플로우가 더 비용이 큽니다.

13. Critical Rendering Path가 무엇인가요? 브라우저가 HTML, CSS, JavaScript를 화면에 그리기까지의 과정이에요. 이 경로를 최적화하면 페이지 로딩 속도가 빨라집니다.

14. 웹 접근성이 중요한 이유는? 모든 사람이 웹사이트를 사용할 수 있어야 하기 때문이에요. 시각 장애인, 청각 장애인, 신체 장애인 모두가 불편함 없이 사용할 수 있어야 합니다.

15. SEO를 위해 신경써야 할 점들은? 메타 태그 설정, 시맨틱 태그 사용, 이미지 alt 속성, 페이지 로딩 속도 최적화, 모바일 친화적 디자인 등이 중요해요.

이런 질문들은 면접에서 90% 이상 등장하는 단골 질문들이에요. 각각의 개념을 정확히 이해하고, 실무에서 어떻게 적용되는지까지 생각해보시면 면접에서 좋은 인상을 남길 수 있을 거예요. 다음 글에서는 React 관련 질문들을 더 자세히 다뤄보겠습니다.