프론트엔드 면접질문 (기술)

HTML 관련 질문

1. HTML5에서 새롭게 추가된 주요 태그는 무엇이며, 각 태그의 용도는 무엇인가요?
   • 답: 주요 태그는 <section>, <article>, <header>, <footer>, <nav>, <aside> 등이 있습니다.
     • <section>: 관련 콘텐츠를 묶는 데 사용.
     • <article>: 독립적인 콘텐츠(예: 블로그 글, 기사).
     • <header>: 페이지나 섹션의 머리글.
     • <footer>: 페이지나 섹션의 바닥글.
     • <nav>: 내비게이션 링크 그룹.
     • <aside>: 본문과 간접적으로 관련된 콘텐츠.
2. <div>와 <section>의 차이는 무엇인가요? 언제 각각을 사용하나요?
   • 답:
     • <div>는 의미 없는 컨테이너로 스타일링 및 레이아웃을 위한 그룹화에 사용됩니다.
     • <section>은 의미 있는 컨테이너로, 문서의 특정 주제나 섹션을 나타냅니다.
     • 의미를 명확히 전달하려면 <section>을 사용하고, 단순한 레이아웃 목적이면 <div>를 사용합니다.
3. ARIA 속성이란 무엇이며, 웹 접근성을 위해 어떻게 사용하나요?
   • 답: ARIA(Accessible Rich Internet Applications)는 스크린 리더와 같은 보조 기술이 웹 애플리케이션을 더 잘 이해할 수 있도록 돕는 속성입니다.
     예:
     • role="button": 버튼 역할을 지정.
     • aria-label="Close menu": 요소의 레이블 지정.
     • aria-hidden="true": 스크린 리더에서 요소를 숨김.
       ARIA는 요소가 본래 제공하지 않는 의미를 부여할 때 주로 사용됩니다.
4. HTML에서 <meta> 태그의 역할은 무엇인가요?
   • 답: <meta> 태그는 문서의 메타데이터를 정의합니다.
     • charset="UTF-8": 문자의 인코딩 방식 설정.
     • viewport: 반응형 디자인을 위한 뷰포트 설정.
     • description: 페이지 설명 (검색 엔진 최적화).
     • author: 문서 작성자 정보.
5. <script> 태그의 async와 defer 속성의 차이점은 무엇인가요?
   • 답:
     • async: 스크립트를 병렬로 다운로드하며, 다운로드가 완료되면 즉시 실행.
     • defer: 스크립트를 병렬로 다운로드하지만, HTML 파싱이 끝난 후 실행.
     • defer는 HTML 구조와의 충돌이 적어 더 권장됩니다.

---

CSS 관련 질문

1. CSS의 position 속성에서 relative, absolute, fixed, sticky의 차이를 설명하세요.
   • 답:
     • relative: 원래 위치를 기준으로 이동.
     • absolute: 가장 가까운 위치 지정 조상(relative, absolute, fixed)을 기준으로 이동.
     • fixed: 뷰포트를 기준으로 고정. 스크롤해도 위치 유지.
     • sticky: 스크롤 위치에 따라 relative에서 fixed로 변경.
2. CSS Flexbox와 Grid의 차이점은 무엇이며, 각각을 사용하는 적절한 상황은?
   • 답:
     • Flexbox: 1차원 레이아웃(행 또는 열).
       사용: 정렬 및 간격 제어, 단일 행/열의 요소 배치.
     • Grid: 2차원 레이아웃(행과 열).
       사용: 복잡한 레이아웃을 정의할 때.
       예: Flexbox는 버튼 정렬, Grid는 대시보드 UI 설계.
3. CSS에서 z-index란 무엇이며, 어떻게 작동하나요?
   • 답: z-index는 요소의 쌓임 순서를 제어합니다. 숫자가 클수록 앞으로 나옵니다.
     position 속성이 relative, absolute, fixed 등일 때만 적용됩니다.
4. 반응형 디자인을 구현하는 방법은 무엇인가요?
   • 답:
     • 미디어 쿼리: @media (max-width: 768px) { ... }.
     • 유연한 단위: %, em, rem, vw, vh.
     • 유동적 이미지와 콘텐츠: max-width: 100%;.
5. CSS에서 Pseudo-class와 Pseudo-element의 차이점은?
   • 답:
     • Pseudo-class: 요소의 상태를 선택. 예: :hover, :nth-child.
     • Pseudo-element: 요소의 특정 부분을 선택. 예: ::before, ::after.

---

JavaScript 관련 질문

1. var, let, const의 차이점은?
   • 답:
     • var: 함수 스코프, 중복 선언 가능.
     • let: 블록 스코프, 중복 선언 불가능.
     • const: 블록 스코프, 재할당 불가능.
2. JavaScript의 이벤트 위임이란 무엇인가요?
   • 답: 상위 요소에서 이벤트를 처리하여 하위 요소로 전달하는 방식입니다.
     DOM 동적 생성 시에도 효율적.
     예: document.addEventListener('click', (e) => { ... });.
3. 클로저(Closure)란 무엇인가요?
   • 답: 함수가 자신이 생성될 때의 렉시컬 스코프를 기억하는 기능입니다.
     예:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

4.Debounce와 Throttle의 차이점은?

• 답:
  • Debounce: 특정 시간 동안 이벤트가 재발하지 않을 때 실행.
  • Throttle: 특정 시간 간격마다 실행.
  •  
  • 5.프로미스(Promise)의 상태는 무엇인가요?
    • 답:
      • pending: 대기 상태.
      • fulfilled: 성공 상태.
      • rejected: 실패 상태.

---

React 관련 질문

1. React의 Virtual DOM이란 무엇인가요?
   • 답: 실제 DOM의 가벼운 복사본으로, 변경 사항을 추적하고 최소한의 DOM 업데이트를 수행하여 성능을 향상시킵니다.
2. React의 상태(state)와 props의 차이는?
   • 답:
     • state: 컴포넌트 내부에서 관리. 변경 가능.
     • props: 부모 컴포넌트에서 전달. 읽기 전용.
3. React Hook 중 useEffect의 주요 사용 사례는?
   • 답:
     • 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행.
     • API 호출, DOM 조작, 이벤트 등록 등.
4. React에서 키(key) 속성은 왜 필요한가요?
   • 답: 리스트 렌더링 시 각 요소를 고유하게 식별하여 효율적인 업데이트를 가능하게 합니다.
5. React에서 Context API는 무엇인가요?
   • 답: 컴포넌트 트리를 통해 데이터를 전달하기 위한 방법으로, prop drilling을 방지합니다.