IT 교육지식

프론트엔드 면접 필수 질문 모음 HTML, CSS, JavaScript, React 핵심

KRCK 2024. 12. 11. 21:18
반응형

📌 HTML 관련 질문

  1. HTML5에서 추가된 주요 기능은 무엇인가요?
    • HTML5에는 <canvas>, <audio>, <video> 태그, 웹 스토리지(LocalStorage와 SessionStorage), 그리고 시맨틱 태그(<header>, <footer>, <section>, <article>)가 추가되었습니다.

  1. HTML 시맨틱 태그란 무엇인가요? 왜 중요한가요?
    • 시맨틱 태그는 요소의 의미를 명확히 전달하는 태그입니다. 예를 들어, <article>은 독립적인 콘텐츠를, <header>는 머리말을 나타냅니다. 이는 접근성과 SEO를 향상시킵니다.

  1. DOCTYPE의 역할은 무엇인가요?
    • <!DOCTYPE html>은 브라우저에 문서 형식을 알려주는 선언으로, 최신 HTML5 표준을 사용하도록 지시합니다.

🎨 CSS 관련 질문

  1. CSS Flexbox와 Grid의 차이점은 무엇인가요?
    • Flexbox는 일차원 레이아웃(행 또는 열) 배치에 사용되며, Grid는 이차원 레이아웃(행과 열)을 다룰 수 있습니다.

  1. CSS에서 position 속성의 값 종류와 그 의미를 설명해주세요.
    • static: 기본값, 문서 흐름에 따름
    • relative: 원래 위치를 기준으로 이동
    • absolute: 부모 요소를 기준으로 절대 위치 지정
    • fixed: 뷰포트를 기준으로 고정 위치
    • sticky: 스크롤에 따라 고정됨

  1. 미디어 쿼리란 무엇이며, 사용 예제를 들어주세요.
    • 미디어 쿼리는 화면 크기에 따라 다른 스타일을 적용할 수 있게 합니다. 
      @media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

💻 JavaScript 관련 질문

  1. var, let, const의 차이점은 무엇인가요?
    • var: 함수 스코프, 재선언 가능
    • let: 블록 스코프, 재선언 불가능
    • const: 블록 스코프, 재할당 불가능

  1. JavaScript에서 클로저(Closure)란 무엇인가요?
    • 클로저는 함수와 그 함수가 선언된 렉시컬 환경을 함께 기억하는 기능입니다. 
      function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

  1. 비동기 처리를 위해 Promise와 async/await를 어떻게 사용하나요?

    • Promise 예제: 

      fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

    • async/await 예제: 

      async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

🚀 React 관련 질문

  1. React의 상태(State)와 속성(Props)의 차이점은 무엇인가요?
    • State: 컴포넌트 내부에서 변경할 수 있는 값
    • Props: 부모 컴포넌트로부터 전달받는 변경 불가능한 값

  1. React의 생명주기(Lifecycle) 메서드를 설명해주세요.
    • 마운트: componentDidMount
    • 업데이트: componentDidUpdate
    • 언마운트: componentWillUnmount

  1. Hooks 중에서 자주 사용하는 것은 무엇인가요?
    • useState: 상태 관리를 위해 사용
    • useEffect: 사이드 이펙트를 처리할 때 사용
    • useContext: 전역 상태를 공유할 때 사용

⚙️ 성능 최적화 관련 질문

  1. 프론트엔드에서 성능 최적화를 위해 어떤 기법을 사용하나요?
    • 이미지 최적화
    • 코드 스플리팅
    • 지연 로딩(Lazy Loading)
    • 캐싱과 CDN 활용
    • 불필요한 리렌더링 방지

  1. React에서 리렌더링을 최적화하는 방법은 무엇인가요?
    • React.memo 사용
    • useCallback과 useMemo 사용
    • 키(key) 값을 정확하게 할당

💼 실무 경험 관련 질문

  1. 가장 기억에 남는 프로젝트는 무엇이고, 어떤 기술을 사용했나요?

    • (본인의 경험에 맞게 설명) 프로젝트의 목적, 사용한 프레임워크, 문제 해결 과정 등을 언급하세요.

  2. 팀 프로젝트에서 겪었던 어려움과 해결 방법은 무엇이었나요?

    • 커뮤니케이션 문제, 코드 충돌, 일정 지연 등의 사례를 언급하고 해결 과정을 설명하세요.

❓ Q&A 섹션

  1. Q: CSS의 z-index는 어떻게 작동하나요?
    A: z-index는 요소의 쌓임 순서를 결정합니다. position 속성이 relative, absolute, fixed, 또는 sticky인 경우에만 적용됩니다.

  2. Q: JavaScript에서 this는 무엇을 참조하나요?
    A: this는 호출 문맥에 따라 달라집니다. 함수 내부에서는 글로벌 객체, 객체 메서드 내부에서는 해당 객체를 가리킵니다.

  3. Q: 프론트엔드 보안에서 중요한 점은 무엇인가요?
    A: XSS(크로스 사이트 스크립팅) 방지, CSRF(사이트 간 요청 위조) 방지, HTTPS 사용, 입력값 검증 등이 중요합니다.

반응형