12월 21, 2025
37 분 읽기

주니어 프론트엔드 개발자 면접 질문: HTML, CSS, JavaScript

interview
career-advice
job-search
entry-level
주니어 프론트엔드 개발자 면접 질문: HTML, CSS, JavaScript
Milad Bonakdar

Milad Bonakdar

작성자

시맨틱 HTML, 반응형 CSS, JavaScript 스코프, 비동기 코드, DOM 이벤트, 배열 메서드를 다루는 32가지 질문을 점검하세요.

소개

주니어 프론트엔드 개발자 면접에서는 HTML이 페이지 구조를 만들고, CSS가 반응형이고 접근성 있는 레이아웃을 만들며, JavaScript가 동작, 데이터, 브라우저 이벤트를 처리하는 방식을 설명할 수 있어야 합니다. 이 가이드는 32가지 연습 질문과 명확한 답변, 예시, 난이도 메모를 통해 기본기를 점검하도록 구성했습니다.

다음 두 단계로 활용하세요.

  • 먼저 답변을 읽기 전에 각 질문에 소리 내어 답해 봅니다.
  • 그런 다음 예시 답변과 비교하고 다시 볼 주제를 기록합니다.

이것은 전체 면접 가이드의 1부입니다. React, 빌드 도구, 성능 최적화, 디버깅, 접근성, 테스팅 및 소프트 스킬에 대한 질문은 2부: React, 도구 및 고급 주제를 참조하십시오.

HTML 기본 사항 (7개 질문)

1. 시맨틱 HTML 요소란 무엇이며 왜 중요한가요?

답변: 시맨틱 HTML 요소는 브라우저와 개발자 모두에게 그 의미와 목적을 명확하게 설명합니다. 예로는 <header>, <nav>, <main>, <article>, <section>, <aside> 및 <footer>가 있습니다. 이는 스크린 리더 및 보조 기술의 접근성을 향상시키고, 검색 엔진이 콘텐츠 구조를 이해하도록 도와 SEO를 개선하며, 코드를 더 유지 관리하고 읽기 쉽게 만들기 때문에 중요합니다. 컨텍스트를 제공하지 않는 일반적인 <div> 및 <span> 요소와 달리 시맨틱 요소는 콘텐츠의 역할과 의미를 전달합니다.

희귀도: 일반적 난이도: 쉬움

2. 인라인, 블록 및 인라인-블록 요소의 차이점을 설명하세요.

답변:

  • 블록 요소는 새 줄에서 시작하여 사용 가능한 전체 너비를 차지합니다 (예: <div>, <p>, <h1>). 너비 및 높이 속성을 설정할 수 있습니다.
  • 인라인 요소는 같은 줄에 머물며 필요한 만큼의 너비만 차지합니다 (예: <span>, <a>, <strong>). 너비나 높이를 설정할 수 없습니다.
  • 인라인-블록 요소는 인라인으로 유지되지만 블록 요소처럼 너비와 높이를 설정할 수 있습니다. 이것은 인라인의 흐름과 블록의 크기 조정 기능을 결합합니다.

희귀도: 일반적 난이도: 쉬움

3. HTML에서 void (자체 닫힘) 요소는 무엇인가요?

답변: Void 요소는 닫는 태그가 없고 콘텐츠를 포함할 수 없는 HTML 요소입니다. 일반적인 예로는 <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, 및 <source>가 있습니다. 이러한 요소는 여는 태그와 속성만으로 완료됩니다. 예를 들어, <img src="photo.jpg" alt="description">에는 닫는 </img> 태그가 필요하지 않습니다.

희귀도: 일반적 난이도: 쉬움

4. 웹사이트를 접근 가능하게 만들려면 어떻게 해야 하나요? 접근성을 향상시키는 HTML 속성은 무엇인가요?

답변: 웹사이트를 접근 가능하게 만들려면:

  • 시맨틱 HTML 요소(<nav>, <main>, <header>, <footer>)를 사용하세요.
  • 모든 이미지에 콘텐츠를 설명하는 alt 속성을 제공하세요.
  • 레벨을 건너뛰지 않고 적절한 제목 계층 구조(H1-H6)를 유지하세요.
  • for 속성을 사용하여 <label> 요소로 폼 입력을 레이블링하세요.
  • 적절한 탭 순서로 키보드 접근성을 보장하세요.
  • 시맨틱 HTML이 충분하지 않은 경우 ARIA 속성을 사용하세요: aria-label, aria-describedby, aria-hidden, aria-live
  • 복잡한 위젯에 role 속성을 추가하세요.
  • 충분한 색상 대비(일반 텍스트의 경우 4.5:1)를 보장하세요.
  • 대화형 요소를 포커스 가능하게 만들고 보이는 포커스 표시기를 제공하세요.

희귀도: 일반적 난이도: 중간

5. 폼에서 GET과 POST 메서드의 차이점을 설명하세요.

답변:

  • GET: 폼 데이터를 URL에 쿼리 매개변수로 추가하여 데이터를 브라우저에서 볼 수 있게 합니다. 길이 제한(~2000자)이 있으며, 캐시 및 북마크가 가능하고, 민감한 데이터에는 안전하지 않습니다. 요청이 서버 상태를 수정하지 않는 데이터 검색에 사용됩니다 (검색, 필터).
  • POST: 데이터를 URL에 표시되지 않고 요청 본문에 보냅니다. 길이 제한이 없으며, 기본적으로 캐시할 수 없고, 민감한 정보에 더 안전합니다. 서버 상태를 수정하는 데이터 제출에 사용됩니다 (로그인 폼, 파일 업로드, 레코드 생성).

예: 검색 폼은 일반적으로 결과를 북마크할 수 있도록 GET을 사용하는 반면, 로그인 폼은 자격 증명을 숨기기 위해 POST를 사용합니다.

희귀도: 일반적 난이도: 쉬움-중간

6. <meta> 태그의 목적은 무엇인가요?

답변: <meta> 태그는 페이지에 표시되지는 않지만 브라우저, 검색 엔진 및 기타 웹 서비스에서 사용되는 HTML 문서에 대한 메타데이터를 제공합니다. 일반적인 용도는 다음과 같습니다.

  • 문자 인코딩: <meta charset="UTF-8">
  • 반응형 디자인을 위한 뷰포트 설정: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • SEO 설명: <meta name="description" content="페이지 설명">
  • 작성자 정보: <meta name="author" content="이름">
  • 키워드 (현재는 관련성이 낮음): <meta name="keywords" content="키워드1, 키워드2">

희귀도: 일반적 난이도: 쉬움

7. <script>, <script async>, 및 <script defer>의 차이점은 무엇인가요?

답변:

  • 일반 <script>: 스크립트가 다운로드 및 실행되는 동안 HTML 파싱을 차단합니다. 스크립트가 완료될 때까지 페이지 렌더링이 중지됩니다.
  • <script async>: HTML 파싱과 병렬로 스크립트를 다운로드하지만 준비되면 즉시 실행됩니다 (파싱을 차단할 수 있음). 실행 순서가 보장되지 않습니다. 분석과 같은 독립적인 스크립트에 적합합니다.
  • <script defer>: 병렬로 다운로드하지만 HTML 파싱이 완료된 후에만 실행되며 스크립트 순서를 유지합니다. DOM 또는 다른 스크립트에 의존하는 스크립트에 가장 적합합니다.

모범 사례: 적절한 실행 순서를 보장하면서 최적의 성능을 위해 <script defer>를 <head>에 배치하세요.

희귀도: 흔하지 않음 난이도: 중간

CSS 기본 사항 (10개 질문)

8. CSS 박스 모델을 설명하세요.

답변: CSS 박스 모델은 요소가 네 가지 구성 요소 (안쪽에서 바깥쪽으로)로 렌더링되는 방식을 설명합니다.

  1. 콘텐츠: 실제 콘텐츠 (텍스트, 이미지)
  2. 패딩: 콘텐츠와 테두리 사이의 공간 (내부)
  3. 테두리: 패딩을 둘러싼 테두리
  4. 마진: 테두리 바깥쪽의 공간 (요소 사이)

box-sizing 속성은 계산에 영향을 미칩니다.

  • box-sizing: content-box (기본값): 너비/높이는 콘텐츠에만 적용됩니다. 패딩과 테두리가 추가됩니다.
  • box-sizing: border-box: 너비/높이에는 콘텐츠 + 패딩 + 테두리가 포함됩니다 (더 직관적).

예: box-sizing: border-box를 사용하면 width: 100px; padding: 10px; border: 2px;인 요소는 정확히 100px 너비를 유지합니다.

희귀도: 일반적 난이도: 쉬움-중간

9. CSS 특이성을 설명하고 어떻게 작동하는지 설명하세요.

답변: CSS 특이성은 여러 규칙이 동일한 요소를 대상으로 할 때 어떤 스타일이 적용되는지 결정합니다. 특이성은 선택기를 계산하여 계산됩니다.

  • 인라인 스타일: 1000점
  • ID: 각 100점
  • 클래스, 속성, 가상 클래스: 각 10점
  • 요소, 가상 요소: 각 1점

예:

  • #nav .button = 110 (1 ID + 1 클래스)
  • .header .nav a = 21 (2 클래스 + 1 요소)
  • div p = 2 (2 요소)

특이성이 같으면 마지막 규칙이 우선합니다 (캐스케이딩). !important는 모든 것을 재정의하지만 피해야 합니다. 모범 사례: 스타일 지정에는 클래스를 사용하고 ID와 !important는 피하세요.

희귀도: 일반적 난이도: 중간

10. Flexbox란 무엇이며 언제 사용하나요?

답변: Flexbox는 단일 축 (행 또는 열)을 따라 항목을 정렬하기 위한 1차원 레이아웃 시스템입니다.

부모 (플렉스 컨테이너) 속성:

  • display: flex - 플렉스박스 활성화
  • flex-direction - row, column, row-reverse, column-reverse
  • justify-content - 주축을 따라 정렬 (center, space-between, space-around)
  • align-items - 교차축을 따라 정렬 (center, flex-start, flex-end, stretch)
  • flex-wrap - 래핑 제어 (nowrap, wrap)

자식 (플렉스 항목) 속성:

  • flex-grow - 다른 항목에 비해 항목이 얼마나 커지는지
  • flex-shrink - 항목이 얼마나 줄어드는지
  • flex-basis - 커지거나 줄어들기 전의 초기 크기
  • align-self - 개별 항목에 대한 align-items 재정의

Flexbox 사용: 탐색 모음, 카드 레이아웃, 요소 중앙 정렬, 공간을 고르게 분배, 컨테이너 내 항목 정렬.

희귀도: 일반적 난이도: 중간

11. CSS Grid란 무엇이며 Flexbox와 어떻게 다른가요?

답변: CSS Grid는 행과 열을 동시에 사용하여 복잡한 레이아웃을 만들기 위한 2차원 레이아웃 시스템입니다.

주요 차이점:

  • Grid: 2차원 (행 + 열), 페이지 레이아웃에 가장 적합
  • Flexbox: 1차원 (단일 축), 컴포넌트에 가장 적합

Grid 속성:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3개의 열 */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* 또는 gap */
}

언제 사용:

  • Grid: 전체 페이지 레이아웃, 잡지 스타일 디자인, 복잡한 그리드 구조
  • Flexbox: 탐색 모음, 카드, 그리드 셀 내의 컴포넌트
  • 둘 다 함께: 매크로 레이아웃에는 Grid, 마이크로 레이아웃에는 Flexbox

희귀도: 일반적 난이도: 중간

12. div를 가로 및 세로로 중앙에 배치하는 방법은 무엇인가요?

답변:

최신 접근 방식 (선호):

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

레거시 접근 방식:

/* 절대 위치 지정 */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 마진 자동 (가로 전용, 너비 필요) */
.child {
  margin: 0 auto;
  width: 300px;
}

Flexbox와 Grid는 더 깔끔하고 유연하기 때문에 현재 표준 솔루션입니다.

희귀도: 일반적 난이도: 쉬움-중간

13. CSS 포지셔닝: static, relative, absolute, fixed 및 sticky를 설명하세요.

답변:

  • Static (기본값): 일반적인 문서 흐름, 특별한 포지셔닝 없음
  • Relative: top/right/bottom/left를 사용하여 일반적인 위치를 기준으로 위치 지정됩니다. 문서 흐름에서 원래 공간이 유지됩니다. 절대적인 자식의 포지셔닝 컨텍스트로 자주 사용됩니다.
  • Absolute: 흐름에서 제거되고 가장 가까운 위치 지정된 조상 (또는 없는 경우 뷰포트)을 기준으로 위치 지정됩니다. 다른 요소에 영향을 주지 않습니다.
  • Fixed: 흐름에서 제거되고 뷰포트를 기준으로 위치 지정됩니다. 스크롤할 때 제자리에 유지됩니다.
  • Sticky: relative와 fixed의 하이브리드입니다. 스크롤 임계값까지는 상대적으로 작동하다가 고정됩니다. 흐름에서 시작하는 스티키 헤더에 유용합니다.

예: 스크롤 후 고정되는 탐색은 position: sticky; top: 0;을 사용합니다.

희귀도: 일반적 난이도: 중간

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

답변:

  • display: none: 요소가 문서 흐름에서 완전히 제거되고, 공간을 차지하지 않고, 스크린 리더에 접근할 수 없고, 포인터 이벤트가 없습니다.
  • visibility: hidden: 요소가 보이지 않지만 레이아웃에서 공간을 유지하고, 여전히 DOM에 있으며, 스크린 리더에 접근할 수 없고, 포인터 이벤트가 없습니다.
  • opacity: 0: 요소가 보이지 않지만 공간을 유지하고, 여전히 DOM에 있으며, 여전히 스크린 리더에 접근할 수 있고, 여전히 포인터 이벤트를 받습니다.

사용 사례:

  • display: none - 가시성 전환 (모달, 드롭다운)
  • visibility: hidden - 숨기는 동안 레이아웃 유지
  • opacity: 0 - 페이드 애니메이션, 요소의 상호 작용 유지

희귀도: 일반적 난이도: 쉬움-중간

15. CSS 가상 클래스와 가상 요소는 무엇인가요? 예를 들어 주세요.

답변:

가상 클래스 (단일 콜론) - 상태 또는 위치에 따라 요소 선택:

a:hover { color: blue; }          /* 마우스 오버 */
input:focus { border: 2px solid blue; }  /* 키보드 포커스 */
li:nth-child(odd) { background: #eee; }  /* 홀수 목록 항목 */
button:disabled { opacity: 0.5; }  /* 비활성화된 상태 */

기타 예: :active, :checked, :first-child, :last-child, :nth-of-type()

가상 요소 (이중 콜론) - 특정 부분을 스타일 지정하거나 콘텐츠 삽입:

p::first-line { font-weight: bold; }  /* 단락의 첫 번째 줄 */
p::first-letter { font-size: 2em; }   /* 드롭 캡 */
.icon::before { content: "→"; }        /* 콘텐츠 삽입 */
input::placeholder { color: gray; }    /* 자리 표시자 텍스트 */

가상 요소는 HTML을 추가하지 않고도 장식 요소에 적합합니다.

희귀도: 일반적 난이도: 중간

16. 반응형 레이아웃을 만드는 방법은 무엇인가요? 미디어 쿼리를 설명하세요.

답변: 반응형 레이아웃은 다음을 사용하여 다양한 화면 크기에 적응합니다.

미디어 쿼리:

/* 모바일 우선 접근 방식 (권장) */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* 태블릿 */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* 데스크톱 */
}

일반적인 중단점:

  • 320px: 작은 모바일
  • 768px: 태블릿
  • 1024px: 데스크톱
  • 1440px: 큰 데스크톱

기타 반응형 기술:

  • 유동 레이아웃 (백분율, vw/vh 단위)
  • 유연한 Flexbox 및 Grid
  • 반응형 이미지 (max-width: 100%, srcset 속성)
  • min-width 쿼리 (모바일 우선) vs max-width (데스크톱 우선)

희귀도: 일반적 난이도: 중간

17. z-index란 무엇이며 어떻게 작동하나요?

답변: z-index는 z축 (앞에서 뒤로)을 따라 위치 지정된 요소 (relative, absolute, fixed, sticky)의 스태킹 순서를 제어합니다.

주요 사항:

  • 위치 지정된 요소에서만 작동합니다 (static 아님)
  • 값이 높을수록 앞에 나타납니다.
  • 음수 값을 사용할 수 있습니다.
  • 기본값은 auto (효과적으로 0)입니다.
  • 자식의 스태킹 방식에 영향을 미치는 "스태킹 컨텍스트"를 만듭니다.

일반적인 문제:

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

z-index가 9999인 자식은 부모의 스태킹 컨텍스트 외부에 있는 z-index가 2인 다른 요소 위에 나타날 수 없습니다.

희귀도: 일반적 난이도: 중간

JavaScript 기본 사항 (15개 질문)

18. var, let, 및 const의 차이점을 설명하세요.

답변:

  • var: 함수 범위, 호이스팅되고 undefined로 초기화, 다시 선언 가능, 최신 코드에서 대부분 사용되지 않음
  • let: 블록 범위, 호이스팅되지만 선언될 때까지 Temporal Dead Zone (TDZ)에 있음, 동일한 범위에서 다시 선언할 수 없음
  • const: 블록 범위, 호이스팅되지만 TDZ에 있음, 선언 시 초기화해야 함, 재할당할 수 없음 (그러나 객체/배열 내용은 변경 가능)

모범 사례:

  • 기본적으로 const를 사용하세요.
  • 재할당해야 할 때 let을 사용하세요.
  • 최신 JavaScript에서 var를 사용하지 마세요.

예:

const name = "Alice";     // 재할당 불가
let count = 0;            // 재할당 가능
count = 1;                // OK
name = "Bob";             // 오류!

const user = { age: 25 };
user.age = 26;            // OK - 객체 속성 변경
user = {};                // 오류 - 재할당

희귀도: 일반적 난이도: 쉬움

19. 클로저란 무엇이며 실제 예제를 제공하세요.

답변: 클로저는 내부 함수가 외부 (둘러싸는) 함수의 범위에서 변수에 액세스할 수 있는 경우입니다. 외부 함수가 반환된 후에도 내부 함수는 이러한 변수를 "클로저"합니다.

예:

function createCounter() {
  let count = 0;  // 개인 변수
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

내부 함수는 createCounter가 실행을 완료한 후에도 count에 대한 액세스를 유지합니다. 이를 통해 데이터 개인 정보 보호가 가능합니다. count는 외부에서 직접 액세스할 수 없습니다.

사용 사례: 데이터 개인 정보 보호, 함수 팩토리, 콜백, 모듈 패턴, 이벤트 핸들러

희귀도: 일반적 난이도: 중간

20. JavaScript에서 ==와 ===를 설명하세요.

답변:

  • == (느슨한 동등성): 비교 전에 타입 강제 변환을 수행하고 타입을 일치하도록 변환합니다.
  • === (엄격한 동등성): 값과 타입을 모두 확인하고 타입 강제 변환을 수행하지 않습니다.

예:

5 == '5'       // true (문자열이 숫자로 강제 변환됨)
5 === '5'      // false (타입이 다름)

null == undefined   // true (특수한 경우)
null === undefined  // false (타입이 다름)

0 == false     // true (둘 다 강제 변환됨)
0 === false    // false (숫자 vs 부울)

모범 사례: 타입 강제 변환으로 인한 예상치 못한 버그를 피하기 위해 항상 ===와 !==를 사용하세요.

희귀도: 일반적 난이도: 쉬움

21. JavaScript에서 호이스팅이란 무엇인가요?

답변: 호이스팅은 코드 실행 전에 컴파일 단계에서 변수 및 함수 선언을 해당 범위의 맨 위로 이동하는 JavaScript의 동작입니다.

다양한 호이스팅 동작:

console.log(x);  // undefined (호이스팅됨, 초기화됨)
var x = 5;

console.log(y);  // ReferenceError (호이스팅되었지만 TDZ에 있음)
let y = 5;

sayHello();      // "Hello!" (함수가 완전히 호이스팅됨)
function sayHello() {
  console.log("Hello!");
}

sayHi();         // TypeError (함수가 아님)
var sayHi = function() {
  console.log("Hi!");
};

주요 사항:

  • var 선언은 호이스팅되고 undefined로 초기화됩니다.
  • let/const는 호이스팅되지만 초기화되지 않은 상태로 유지됩니다 (Temporal Dead Zone).
  • 함수 선언은 (구현을 포함하여) 완전히 호이스팅됩니다.
  • 함수 표현식은 완전히 호이스팅되지 않습니다.

희귀도: 일반적 난이도: 중간

22. this 키워드를 설명하고 화살표 함수에서 어떻게 다른지 설명하세요.

답변: this는 함수가 실행되는 컨텍스트를 나타냅니다. 그 값은 함수가 호출되는 방식에 따라 달라집니다.

일반 함수:

const obj = {
  name: "John",
  greet: function() {
    console.log(this.name);  // "John"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined (엄격 모드) 또는 window

화살표 함수:

const obj = {
  name: "John",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = 어휘 범위 (둘러싸는 컨텍스트)

주요 차이점:

  • 일반 함수: this는 호출 위치에 따라 결정됩니다.
  • 화살표 함수: this는 둘러싸는 범위에서 어휘적으로 상속됩니다.
  • 화살표 함수에는 자체 this, arguments 또는 super가 없습니다.

사용 사례: 화살표 함수는 외부 this를 유지하려는 콜백에 적합합니다.

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Timer 인스턴스 (어휘)
    }, 1000);
  }
}

희귀도: 일반적 난이도: 중간-어려움

23. 템플릿 리터럴과 그 장점은 무엇인가요?

답변: 템플릿 리터럴은 문자열 보간 및 여러 줄 문자열을 지원하는 백틱 (`)을 사용하는 문자열 리터럴입니다.

기능:

const name = "Alice";
const age = 25;

// 문자열 보간
const message = `Hello, my name is ${name} and I'm ${age} years old.`;

// 여러 줄 문자열
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// 표현식 평가
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

장점:

  • 문자열 연결보다 깔끔한 구문
  • 줄 바꿈에 \n이 필요 없음
  • ${}로 모든 JavaScript 표현식을 포함할 수 있습니다.
  • HTML/CSS 생성에 더 적합

희귀도: 일반적 난이도: 쉬움

24. Promise와 그 세 가지 상태를 설명하세요.

답변: Promise는 비동기 작업의 최종 완료 (또는 실패)와 결과 값을 나타냅니다.

세 가지 상태:

  1. Pending: 초기 상태, 작업이 완료되지 않음
  2. Fulfilled: 작업이 성공적으로 완료됨
  3. Rejected: 작업이 실패함

예:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "User info" });
    } else {
      reject(new Error("Failed to fetch"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Done"));

콜백보다 장점:

  • 콜백 지옥을 피합니다.
  • .then()으로 연결 가능
  • .catch()로 더 나은 오류 처리
  • 병렬 작업에 Promise.all()을 사용할 수 있습니다.

희귀도: 일반적 난이도: 중간

25. async/await란 무엇이며 코드 가독성을 어떻게 향상시키나요?

답변: async/await는 Promise를 기반으로 구축된 구문 설탕으로 비동기 코드를 동기 코드처럼 보이게 하고 동작하게 합니다.

예:

// Promise 사용 (읽기 어려움)
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// async/await 사용 (더 깔끔함)
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

주요 사항:

  • async 함수는 항상 Promise를 반환합니다.
  • await는 Promise가 해결될 때까지 실행을 일시 중지합니다.
  • 오류 처리에 try/catch를 사용하세요.
  • 순차적 작업을 더 명확하게 만듭니다.
  • .catch()보다 자연스러운 오류 처리

희귀도: 일반적 난이도: 중간

26. 이벤트 루프를 설명하고 JavaScript가 비동기 작업을 어떻게 처리하는지 설명하세요.

답변: JavaScript는 단일 스레드이지만 이벤트 루프 메커니즘을 통해 비동기 작업을 처리합니다.

구성 요소:

  1. 콜 스택: 동기 코드 실행 (LIFO)
  2. Web API: 비동기 작업 처리 (setTimeout, fetch, DOM 이벤트)
  3. 콜백 큐 (작업 큐): Web API의 콜백 보유
  4. 마이크로태스크 큐: Promise 콜백 보유 (우선 순위 높음)
  5. 이벤트 루프: 스택이 비어 있을 때 큐에서 콜 스택으로 작업 이동

실행 순서:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 출력: 1, 4, 3, 2
// 설명:
// - 동기 코드 (1, 4)가 먼저 실행됩니다.
// - 마이크로태스크 (Promise)는 매크로태스크보다 먼저 실행됩니다.
// - 매크로태스크 (setTimeout)는 마지막으로 실행됩니다.

실행 순서: 콜 스택 → 마이크로태스크 큐 → 콜백 큐 (매크로태스크)

희귀도: 일반적 난이도: 어려움

27. DOM 요소를 선택하고 조작하는 방법은 무엇인가요?

답변:

선택 방법:

// 최신 (선호)
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// 레거시 (여전히 유효함)
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

조작:

// 콘텐츠
element.textContent = 'New text';
element.innerHTML = '<span>HTML content</span>';

// 스타일 지정
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// 클래스
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// 속성
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// 요소 만들기
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello';
document.body.appendChild(newDiv);

희귀도: 일반적 난이도: 쉬움

28. 이벤트 위임을 설명하고 왜 유용한지 설명하세요.

답변: 이벤트 위임은 이벤트 버블링을 활용하여 자식 요소에 여러 리스너를 연결하는 대신 단일 이벤트 리스너를 부모 요소에 연결하는 것입니다.

위임 없음 (비효율적):

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

위임 사용 (효율적):

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

장점:

  • 더 나은 성능: 많은 리스너 대 단일 리스너
  • 동적 요소와 함께 작동: 나중에 추가된 항목을 자동으로 처리합니다.
  • 더 낮은 메모리 사용량: 더 적은 이벤트 리스너
  • 더 깔끔한 코드: 중앙 집중식 이벤트 처리

사용 사례: 항목을 동적으로 추가/제거할 수 있는 목록 (할 일 목록, 쇼핑 카트, 댓글 섹션)

희귀도: 일반적 난이도: 중간

29. 이벤트 버블링이란 무엇인가요? 전파를 중지하는 방법은 무엇인가요?

답변: 이벤트 버블링은 자식 요소에서 트리거된 이벤트가 해당 조상을 통해 문서 루트까지 "버블링"되는 경우입니다.

세 단계:

  1. 캡처 단계: 이벤트가 창에서 대상으로 이동합니다.
  2. 대상 단계: 이벤트가 대상 요소에 도달합니다.
  3. 버블링 단계: 이벤트가 대상에서 창으로 버블링됩니다 (기본값).

예:

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', (e) => {
  console.log('Child clicked');
  // 이벤트가 부모로 버블링됩니다.
});
// 버튼을 클릭하면 "Child clicked"가 기록된 다음 "Parent clicked"가 기록됩니다.
</script>

전파 중지:

element.addEventListener('click', (e) => {
  e.stopPropagation();  // 버블링 중지
  e.preventDefault();    // 기본 동작 방지 (폼 제출, 링크 탐색)
});

희귀도: 일반적 난이도: 중간

30. 객체 및 배열에 대한 비구조화를 설명하세요.

답변: 비구조화는 배열에서 값을 추출하거나 객체에서 속성을 추출하여 고유한 변수로 만듭니다.

배열 비구조화:

const colors = ['red', 'green', 'blue', 'yellow'];

const [first, second, ...rest] = colors;
// first = 'red'
// second = 'green'
// rest = ['blue', 'yellow']

// 요소 건너뛰기
const [primary, , tertiary] = colors;
// primary = '
Newsletter subscription

실제로 효과가 있는 주간 커리어 팁

최신 인사이트를 받은 편지함으로 직접 받아보세요

관련 게시물

주니어 프론트엔드 면접 질문: React와 도구
12월 21, 2025
37 분 읽기

주니어 프론트엔드 면접 질문: React와 도구

React, Git, 빌드 도구, 웹 성능, 디버깅, 접근성, 테스트를 다루는 21개 질문으로 주니어 프론트엔드 면접을 준비하세요.

Milad BonakdarMilad Bonakdar
주니어 Python 백엔드 개발자 면접 질문
12월 21, 2025
20 분 읽기

주니어 Python 백엔드 개발자 면접 질문

Python 기본, Django/Flask, REST API, 데이터베이스, 테스트, Git, Docker, API 보안을 다루는 30개 질문으로 주니어 백엔드 면접을 준비하세요.

Milad BonakdarMilad Bonakdar
주니어 Node.js 백엔드 개발자 면접 질문
12월 21, 2025
40 분 읽기

주니어 Node.js 백엔드 개발자 면접 질문

JavaScript 기본기, 비동기 코드, 이벤트 루프, Express, REST API, 데이터베이스, 보안, 테스트, 디버깅을 다루는 주니어 Node.js 백엔드 면접 질문 35개를 연습하세요.

Milad BonakdarMilad Bonakdar

채용률을 60% 높이는 이력서 만들기

몇 분 만에 면접을 6배 더 많이 받는 것으로 입증된 맞춤형 ATS 친화적 이력서를 만드세요.

더 나은 이력서 만들기

이 게시물 공유

50% 더 빠르게 채용되세요

전문적이고 AI로 강화된 이력서를 사용하는 구직자는 표준 10주에 비해 평균 5주 만에 일자리를 얻습니다. 기다리지 말고 면접을 시작하세요.

구직 활동 가속화