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

 

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

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

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

 

 

🔗 사이트 링크

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

프론트엔드 면접질문

 

🔗 깃헙 링크

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

GitHub - ma9pie/frontend-interview

 

📲 모바일 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에 대해 설명해 주세요.

 

기타

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