프론트엔드 기술면접 대비를 위한 레퍼지토리입니다.
- 질문에 대한 참고래퍼런스는 Front-end Developer Interview Questions, React Interview Questions & Answers 레퍼런스등을 기반으로 작성하고 있습니다.
- 중요도(⭐)는 전적으로 제 주관적으로 분류했습니다.
- 질문에 대한 답변은 해당 질문에 대해 깊게 공부한 후 직접작성하는 것을 원칙으로 하고있습니다.
카테고리는 총 8개로 구성되었으며, 질문에 대한 답을 마크다운 문서로 작성합니다.
🌏 Web 및 프론트엔드 전반적인 지식 관련 예상 면접질문
⚛ React 관련 예상 면접질문 👨💻 Nextjs 관련 예상 면접질문
- 브라우저 렌더링 원리
- AJAX
- API란?
- REST API
- Restful API
- 주소창에 google.com을 입력하면 일어나는 일
- OAuth
- 쿠키, sessionStorage, localStorage의 차이점
- CSR과SSR의 차이점
- CORS란?
- URI와 URL의 차이점
- CI/CD란?
- Git-flow에 대한 설명
- SEO란 무엇인가?
- SEO 최적화를 구성하는 방법
- 클라이언트 사이드 렌더링 시 검색엔진 최적화 이슈가 발생하는 이유
- Nginx
- SSL이란?
- XSS(Cross-Site Scripting) 공격이란 무엇이며, 방어 방법은?
- CSRF(Cross-Site Request Forgery) 공격이란 무엇이며, 방어 방법은?
- 클로저의 정의와 사용방식
- 이벤트 위임과 동작방식
- 프로토타입 상속
- 호이스팅
- 이벤트 버블링
- 이벤트 캡처링
- JavaScript에서 동일 출처 정책
- 동기 및 비동기 함수의 차이
- 이벤트 루프
- 콜 스택과 태스크 큐의 정의 및 차이점
- 실행컨텍스트란?
- this란?
- typescript를 사용한 이유와 사용했을때 장점
- 가비지 콜렉터와 동작방식
- Promise의 정의와 사용 예시
- async/awiat란?
- 자바스크립트는 어떤 언어이고, 어떠한 특징을 가지는가?
- 자바스크립트 엔진이 코드를 실행하는 과정
- 원시값과 참조값의 차이점을 메모리 관점에서 설명하라
- e.target와 e.currentTarget의 차이점
- null, undefined, undeclared 변수의 차이점과 각 상태를 확인하는 방법
- let, var, const로 생성된 변수의 차이점
- Array.forEach() 루프와 Array.map() 메서드의 주요한 차이점 및 선택 시점
- Function.call과 Function.apply의 차이점
- Function.prototype.bind
- JavaScript 코드를 JavaScript로 컴파일하는 언어에서 쓰는 장단점
- IIFE
- Spread Syntax의 이점과 주의해야할 점은?
- ES6 문법에 추가된 것들은?
- 자바스크립트에서 이벤트 바인딩의 정의와 이벤트 바인딩 방법들
- 오브젝트 프로퍼티와 배열 항목을 반복할 때
- 익명 함수의 사용 사례
- 호스트 객체와 네이티브 객체의 차이점
- var person = Person(), var person = new Person()의 차이점
- 타입강제 변환의 정의와 타입강제 변환 시 주의할 점
- "속성"과 "프로퍼티"의 차이점
- 가변 및 불변 객체의 차이점
- JavaScript에서 불변 객체의 예시
- 불변성의 장단점
- 코드에서 불변성 달성 방법
- 고차함수란?
- require과 import의 차이점
- function foo() {}와 var foo = function() {}의 foo 사용 차이점
- ==와 ===의 차이점
- 삼항 연산자를 '삼항'이라고 부르는 이유
- 엄격 모드의 정의 및 사용의 장단점
- JavaScript 코드를 디버깅하는 데 사용하는 도구 및 기술
- ES6 클래스와 ES5 함수 생성자의 차이점
- Arrow function 문법의 사용 사례 및 다른 함수와의 차이점
- 생성자 내의 메소드에 Arrow syntax를 사용하는 이점
- while과 do-while 루프의 차이
- React의 특징은?
- React는 라이브러리인가 프레임워크인가?
- React에서 가상돔의 정의와 동작방식
- React에서 컴포넌트란?
- 클래스형 컴포넌트 VS 함수형 컴포넌트
- 컴포넌트 라이프 사이클
- 상태관리와 상태관리가 필요한 이유
- React Hook이란?
- props와 state의 정의
- React에서 State의 불변성을 유지해야하는 이유
- React에서의 성능최적화 방법
- 바닐라 자바스크립트 대신 React를 사용하는 이유
- useState 훅의 정의
- useEffect 훅의 정의
- useRef 훅의 정의
- useRef와 useState의 차이점
- useMemo와 useCallback이란?
- React Hydration이란?
- 컴포넌트 리스트 구현 시 각 컴포넌트에 대한 id 값을 설정해야하는 이유
- Props Drilling의 정의와 이를 해결하는 방법은?
- HTML5를 오픈 웹 플랫폼으로 볼 때, HTML5의 구성 요소
- 여러 언어로 된 콘텐츠가 포함된 페이지의 제공
- 다국어 사이트를 설계하거나 개발할 때 주의해야 할 사항
- 이미지 태그에서 'srcset' 속성을 사용하는 이유와 속성의 내용을 평가하는 브라우저의 프로세스
- 캔버스(canvas)와 SVG의 차이점
- CSS Margin & Padding
- CSS 선택자의 우선순위와 동작방식
- z-index와 스택 문맥이 형성되는 방식
- BFC(Block Formatting Context)와 동작원리
- 브라우저 별 스타일링 문제를 해결하는 방식
- CSS 전처리기를 사용하는 장단점
- 브라우저가 CSS 선택자와 일치하는 요소를 어떻게 결정하는가?
- "리셋(resetting)"과 "정규화(normalizing)" CSS의 차이점
- 기능이 제한된 브라우저에 페이지를 제공하는 방식
- 시각적으로 컨텐츠를 숨기는 다양한 방법과 이를 스크린 리더기에서만 사용 가능하게 하는 방법
- React-Router에 대한 설명과 동작방식에 대해서 설명해주세요
- nextjs의 useTheme을 통해 다크모드를 구현하셨다고하는데, 어떤방식으로 구현하셨나요?
- Google Analytics에 대해서 설명해주세요
- Intersection Observer에 대해서 설명해주세요
- Tanstack-Query란 무엇이며 이를 사용하는 이유는 무엇일까요?
- Recoil에 대해서 설명해주세요
- Zustand에 대해서 설명해주세요
- Zustand가 제공하는 미들웨어들은 뭐가 있을까요?
- Firebase의 특징에 대해서 설명해주세요
- nextjs의 app-router에 대해서 설명해주세요
- framer-motion에 대해서 설명해주세요
- 프로젝트 시 반응형 레이아웃은 어떤 방식으로 구현하셨나요?
- SEO 최적화는 어떤 방식으로 하셨었나요?
- 프로젝트 시 성능최적화를 하셨다고하는데 어떤 최적화들을 진행했었나요?
- 소셜 미디어 공유 기능 구현은 어떤 방식으로 구현하셨나요?
- 재사용 가능한 컴포넌트 구축을 위해 어떤 고민을 하셨나요?
- debounce에 대해서 설명해주세요
- AWS EC2로 서버를 배포하셨는데 그 이유는 뭔가요?
- AWS EC2 인스턴스에 대해서 설명해주세요
- AWS에서 웹 빌드 파일을 배포하는 과정을 설명해주세요
- AWS S3 버킷에 대해서 설명해주세요
- certbot은 어떤 역할을 하나요?
- Github Actions의 파이프라인은 어떤식으로 구성하셨나요?
- Github Actions와 AWS CodeDeploy를 어떤 식으로 조합하셨나요?