• 티스토리 홈
  • 프로필사진
    KIMJAVAN
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
KIMJAVAN
  • 프로필사진
    KIMJAVAN
    • 개발 (160)
      • 마크업 언어 (19)
        • HTML (7)
        • CSS (12)
      • 자바스크립트 (85)
        • JavaScript (34)
        • JS Library (6)
        • React (13)
        • threeJS (6)
        • TypeScript (2)
        • Next js (5)
        • Node JS (18)
        • webGL (1)
      • AI (4)
        • chat-gpt (4)
      • flutter (17)
        • dart (11)
        • flutter (6)
      • Sql (3)
      • PHP (4)
      • Python (2)
      • Git (4)
      • vscode (1)
      • 개발 도움 사이트 (7)
      • 작업기록 (1)
      • 오류 모음 (3)
      • 메모장 (7)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • 프론트엔드 면접질문
        2024년 12월 20일
        • KIMJAVAN
        • 작성자
        • 2024.12.20.: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. 한 번도 사용해본 적이 없는 프론트엔드 라이브러리나 기술이 있다면, 어떻게 학습하고 적용할 것인가요?

        '메모장' 카테고리의 다른 글

        프론트엔드 면접질문(기술2)  (0) 2025.01.11
        프론트엔드 면접질문 (기술)  (1) 2025.01.11
        비티진 끝내기 계획  (0) 2024.01.23
        [nodejs] 댓글 작성 로직 메모  (0) 2024.01.19
        [flutter] 푸시알림보내기  (0) 2023.09.11
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바