💻IT

프론트엔드 기술 면접 질문 리스트 모음

ma9pie 2023. 1. 30. 11:00
반응형

 

구글, 티스토리, 깃헙 등등 프론트엔드 면접에서 자주 물어보는 질문 자료들을 직접 정리하여 만든 사이트입니다.
PWA(Progressive Web App)를 적용하여 반응형 모바일 웹앱으로 개발을 하였고, 
모바일에서 앱을 설치하여 사용할 수 있습니다.

저도 출퇴근할 때 지하철에서 폰으로 보면서 유용하게 사용 중입니다😄

프레임워크는 Next.js, React 최신버전 18.2.0, 스타일링은 Styled component 라이브러리인 Emotion을 사용하여 프로젝트를 개발하였고, Vercel로 배포하고 있습니다.

 

 

🔗 사이트 링크

https://frontend-interview-question.vercel.app/

 

프론트엔드 면접질문

기존 클래스형 컴포넌트의 Lifecycle method(componentDidMount, componentDidUpdate, componentWillUnmount)을 대체하는 hook으로, 컴포넌트가 마운트, 업데이트, 언마운트될 때 특정 작업을 실행할 수 있습니다. useEffec

frontend-interview-question.vercel.app

 

🔗 깃헙 링크

https://github.com/ma9pie/frontend-interview

 

GitHub - ma9pie/frontend-interview

Contribute to ma9pie/frontend-interview development by creating an account on GitHub.

github.com

 

📲 모바일 Install (Android)

우측 상단 설정(점 3개) 클릭 후 홈 화면에 추가 터치

 

홈 화면에 추가 후 서비스 이용

  • 안드로이드의 경우 크롬에서 우측 상단 점 3개 표시를 클릭하여 "홈 화면에 추가" 클릭
  • 사파리의 경우 사파리 앱 중앙 하단에 공유 버튼을 탭 하여 "홈 화면에 추가" 클릭

 

✨업데이트 내역

  • 2023-02-18
    • 코드 리팩토링 및 검색 기능 추가
      

 

📝 목록 리스트

CS

  • 객체 지향 프로그래밍에 대해 설명해주세요.
  • 프로세스와 스레드의 차이에 대해 설명해주세요.
  • 멀티 프로세스와 멀티 스레드의 차이에 대해 설명해주세요.
  • Stack과 Queue의 차이에 대해 설명해주세요.
  • List, Map, Set의 차이점을 설명해주세요.
  • 라이브러리와 프레임워크의 차이점을 설명해주세요.

 

JavaScript

  • Sync와 Async의 차이점을 설명해주세요.
  • Blocking과 Non-Blocking의 차이를 설명해주세요.
  • 콜백함수에 대해 설명해주세요.
  • 콜백지옥의 의미와 콜백지옥을 해결하는 방법을 설명해주세요.
  • Promise와 Async, Await의 차이를 설명해주세요.
  • map과 forEach의 차이를 설명해주세요.
  • var, let, const의 차이를 설명해주세요.
  • 메서드 체이닝에 대해 설명해주세요.
  • 일반 함수와 화살표 함수의 차이
  • this의 의미를 설명해주세요.
  • 함수 선언형과 함수 표현식의 차이를 설명해주세요.
  • 호이스팅에 대해 설명해주세요.
  • 이벤트 버블링과 이벤트 캡처링에 대해 설명해주세요.
  • 이벤트 전파와 이벤트 위임에 대해 설명해주세요.
  • 클로져에 대해 설명해주세요.
  • 렉시컬 스코프에 대해 설명해주세요.
  • 스코프와 스코프 체인에 대해 설명해주세요.
  • 실행 컨텍스트에 대해 설명해주세요.
  • 프로토타입과 프로토타입 체인에 대해 설명해주세요.
  • 깊은복사와 얕은복사의 차이점을 설명해주세요.
  • 구조 분해 할당(destructuring) 대해 설명해주세요.
  • spread 문법과 rest 문법의 차이에 대해 설명해주세요.
  • ES6에서 생긴 큰 변화들에 대해 설명해주세요.
  • Ajax에 대해 설명해주세요.
  • import와 require의 차이점에 대해 설명해주세요.
  • npm에 대해 설명해주세요.
  • package.json과 package-lock.json의 역할에 대해 설명해주세요.
  • typescript를 쓰는 이유에 대해 설명해주세요.
  • null, undefined, undeclared, NaN에 대해 설명해주세요.
  • 자바스크립트 데이터 타입에 대해 설명해주세요.
  • mutable과 immutable에 대해 설명해주세요.
  • throttle과 debounce에 대해 설명해주세요.
  • iterable, iterator, generator에 대해 설명해주세요.
  • 자바스크립트 동작 원리에 대해 설명해주세요.

 

React

  • DOM에 대해 설명해주세요.
  • Virtual DOM에 대해 설명해주세요.
  • 클래스형 컴포넌트와 함수형 컴포넌트의 차이를 설명해주세요.
  • React의 장점과 단점을 설명해주세요.
  • JSX에 대해 설명해주세요.
  • 브라우저는 JSX 파일을 읽을 수 있나요?
  • 재조정(Reconciliation) 개념에 대해서 설명해주세요.
  • state와 props의 차이를 설명해주세요.
  • 자식 컴포넌트에서 props를 변경할 수 있나요?
  • React Hooks에 대해 설명해주세요.
  • React Lifecycle에 대해 설명해주세요.
  • useState에 대해 설명해주세요.
  • useEffect에 대해 설명해주세요.
  • useEffect와 useLayoutEffect의 차이 대해 설명해주세요.
  • state를 직접변경하지 않고 setState를 사용하는 이유를 설명해주세요.
  • React rendering 성능을 향상시키기 위한 방법들을 설명해주세요.
  • Props drilling의 개념과 Props drilling을 피하는 방법에 대해 설명해주세요.
  • 전역 상태 관리 방법에 대해 설명해주세요.
 

Frontend

  • 브라우저 주소창에 google을 입력하면 발생하는 일을 설명해주세요.
  • 브라우저 렌더링 과정을 설명해주세요.
  • DNS에 대해 설명해주세요.
  • REST API에 대해 설명해주세요.
  • Webpack, Babel, Polyfill에 대해 설명해주세요.
  • SPA, CSR, SSR의 차이를 설명해주세요.
  • CORS가 무엇인지, 해결해 본 경험이 있으신지 말씀해주세요.
  • Sementic Markup에 대해 설명해주세요.
  • HTML에서의 attributes와 properties의 차이점을 설명해주세요.
  • 로컬 스토리지, 세션 스토리지, 쿠키에 대해 설명해주세요.
  • Event loop와 Task queue에 대해 설명해주세요.
  • MVC, MVVM 패턴에 대해 설명해주세요.
  • HTTP와 HTTPS의 차이점을 설명해주세요.
  • 페이지 로드 시간을 줄이는 방법들에 대해서 설명해주세요.
  • 테스트 코드를 작성하신 경험이 있으신가요?
  • 웹 서비스 배포 시스템 구축 경험이 있으신가요?
  • CI/CD에 대해 설명해 주세요.

 

기타

  • 자기소개 부탁드립니다.
  • 회사 지원 동기가 어떻게 되시나요.
  • 프론트엔드 포지션을 선택한 이유가 어떻게 되시나요?
  • 최근에 경험했던 기억에 남는 에러에 대해 말씀해주세요.
  • 요즘 공부중이시는 것에대해 설명해주세요.
  • 새로운 기술을 습득하기 위해 어떠한 방식으로 연구하시나요?
  • 협업을 하면서 갈등이 생겼던 경험이 있으신가요?
  • 개발 도중에 발생하는 에러에 대해 보통 어떻게 대처하시나요?
반응형
저작자표시 비영리 (새창열림)