메모장

프론트엔드 면접질문

KIMJAVAN 2024. 12. 20. 18:01
728x90

기본적인 프론트엔드 지식

  1. HTML/CSS
    • HTML5에서 새로 추가된 요소나 속성에 대해 설명해 주세요.
    • Flexbox와 Grid의 차이점은 무엇인가요?
    • CSS 박스 모델에 대해 설명하고, border-box와 content-box의 차이를 설명해 주세요.
    • 반응형 웹 디자인을 위한 미디어 쿼리 사용법을 설명해 주세요.
  2. JavaScript
    • var, let, const의 차이점은 무엇인가요?
    • this 키워드에 대해 설명하고, 화살표 함수와의 차이를 말해주세요.
    • 클로저란 무엇인가요? 사용 예를 들어 주세요.
    • 비동기 처리에 대해 설명하고, Promise와 async/await의 차이를 설명해주세요.
    • 이벤트 버블링과 캡처링의 차이점은 무엇인가요?
  3. DOM과 브라우저 동작
    • DOM과 BOM의 차이점은 무엇인가요?
    • 이벤트 위임(Event Delegation)이란 무엇이고, 언제 사용하나요?
    • 브라우저의 렌더링 과정을 설명해 주세요.
    • 가상 DOM이 무엇이고, React에서 왜 사용되는지 설명해주세요.

프레임워크/라이브러리 관련

  1. React.js
    • React의 컴포넌트 라이프사이클에 대해 설명해 주세요.
    • 상태 관리(State Management) 방법에 대해 설명해주세요. (예: Context API, Redux, MobX)
    • useEffect와 useCallback의 차이는 무엇인가요?
    • React Hooks가 무엇이고, 왜 도입되었나요?
    • JSX가 무엇이고, 어떻게 동작하는지 설명해주세요.
  2. Vue.js/Angular
    • Vue.js에서 컴포넌트 통신 방법에 대해 설명해 주세요.
    • Vue의 반응성 시스템에 대해 설명해 주세요.
    • Angular의 데이터 바인딩과 **DI(Dependency Injection)**에 대해 설명해 주세요.

웹 성능 최적화

  1. 웹 페이지 성능을 개선하기 위해 어떤 방법들을 사용하나요?
  2. Lazy Loading과 Code Splitting에 대해 설명해 주세요.
  3. 웹폰트 사용 시 성능 최적화 방법에 대해 설명해 주세요.
  4. 이미지 최적화 방법에 대해 설명해 주세요.
  5. Critical CSS란 무엇이고, 어떻게 최적화할 수 있나요?

웹 보안

  1. CORS란 무엇이고, 왜 발생하나요? 해결 방법에 대해 설명해 주세요.
  2. XSS(Cross-Site Scripting) 공격이 무엇이고, 이를 방지하는 방법은 무엇인가요?
  3. CSRF(Cross-Site Request Forgery) 공격에 대해 설명하고, 이를 방지하는 방법을 설명해 주세요.
  4. HTTPS와 HTTP의 차이점은 무엇인가요? 왜 HTTPS가 중요한가요?

도구 및 빌드 시스템

  1. Webpack에 대해 설명해 주세요. 왜 사용하고, 기본적으로 어떤 역할을 하나요?
  2. Babel이 무엇이고, 왜 사용하는지 설명해 주세요.
  3. ESLint와 Prettier의 차이는 무엇인가요?
  4. NPM과 Yarn의 차이를 설명해주세요.
  5. Git을 사용하여 협업할 때 발생할 수 있는 충돌 해결 방법에 대해 설명해 주세요.

코딩 테스트/실습

  1. 배열에서 중복된 값을 제거하는 함수를 작성해 주세요.
  2. 퀵 정렬(Quick Sort) 알고리즘을 구현해 주세요.
  3. 이진 트리에서 특정 값을 찾는 알고리즘을 구현해 주세요.
  4. 이벤트 리스너를 이용하여 버튼 클릭 시 화면에 특정 텍스트를 출력하는 기능을 구현해 주세요.

문제 해결 능력 및 설계

  1. 여러 페이지로 이루어진 웹 애플리케이션을 설계한다고 할 때, 라우팅은 어떻게 처리할 것인가요?
  2. 사용자 인증과 권한 관리 시스템을 어떻게 설계하실 건가요?
  3. 상태 관리를 어떻게 효율적으로 구현할 것인가요?
  4. 상호작용이 많은 UI(예: 드래그 앤 드롭 기능, 실시간 검색)를 구현하려면 어떤 접근을 취할 건가요?

협업 및 커뮤니케이션

  1. 프론트엔드 개발자가 백엔드와 협업할 때 중요한 점은 무엇인가요?
  2. Git에서 브랜치 관리 방식을 어떻게 설정하나요?
  3. 개발한 코드나 기능을 리뷰할 때 중요하게 생각하는 점은 무엇인가요?

추가적인 질문들

  1. 최신 웹 기술이나 트렌드 중 가장 흥미로운 것은 무엇이고, 그 이유는 무엇인가요?
  2. 테스트에 대해 어떻게 생각하며, 어떤 테스트 기법을 사용해본 경험이 있나요?
  3. CSS 프레임워크(예: Bootstrap, Tailwind CSS)에 대해 경험이 있나요? 장단점은 무엇인가요?
  4. 한 번도 사용해본 적이 없는 프론트엔드 라이브러리나 기술이 있다면, 어떻게 학습하고 적용할 것인가요?