[ 프론트엔드 신입 면접 질문 목록 ]

자주 나오는 질문 목록에 대해 답변을 준비 해보도록 합시다.

특히 별표가 들어간 부분은 더 자주 나온다고 함

HTML, CSS

• px, em, rem 의 차이에 대해 설명해주세요.
  • 반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?
• vw, vh에 대해 설명해주세요.
• 반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
• CSS 선택자의 우선순위에 대해 설명해주세요.
• 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
• Flexbox에 대해 설명해주세요.
• float의 동작에 대해 설명해주세요.
• CSS에서 Cascading에 대해 설명해주세요.
• ⭐ SCSS에 대해 설명해주세요.
• ⭐ postition 속성에 대해 설명해주세요.
• margin과 padding에 대해 설명해주세요.
• HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
• Box model에 대해 설명해주세요.
• Attribute와 Property의 차이에 대해 설명해주세요.
• ⭐ display 속성에 어떤 것들이 있는지 설명해 주세요.
• CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
• CSS in JS의 장단점에 대해 설명해주세요.
• ⭐ 시맨틱 마크업에 대해 설명해주세요.
• HTML5의 태그에 대해 설명해주세요.
• script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
• 가상 클래스에 대해 설명해주세요.
• margin 병합에 대해 설명해주세요.

자바스크립트

• 자바스크립트는 무슨 언어인가요?
• 변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.
• 데이터 타입에 대해 설명해주세요.
• 생성자에 대해 설명해주세요.
• ⭐ this에 대해 설명해주세요.
  • call, apply, bind에 대해 설명해주세요.
• ⭐ 콜백 함수에 대해 설명해주세요.
  • ⭐ 콜백 지옥을 해결하는 방법을 설명해주세요.
• ⭐ Promise에 대해 설명해주세요.
  • Promise.all() 에 대해 설명해주세요.
• ⭐ Promise와 Callback를 비교 설명해주세요.
• ⭐ Async, Await이 뭔지 그리고 사용 방법을 설명해주세요.
• ⭐ Promise와 Async, Await의 차이를 설명해주세요.
• AJAX에 대해 설명해주세요.
• ⭐ var, let, const 차이를 설명해주세요.
  • TDZ에 대해 설명해주세요.
• 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.
• ⭐ 이벤트 버블링과 캡처링에 대해 설명해주세요.
  • ⭐ 이벤트 위임에 대해서 설명해주세요.
  • 이벤트 위임의 동작 방식에 대해서 설명해주세요.
• ⭐ 호이스팅과 발생하는 이유에 대해 설명해주세요.
• 스코프 (Scope)에 대해 설명해주세요.
  • 스코프 체인에 대해 설명해주세요.
• ⭐ 클로져(Closure)에 대해 설명해주세요.
• 실행 컨텍스트에 대해 설명해주세요.
  • 렉시컬 환경(Lexical Environment)에 대해 설명해주세요.
• 자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요.
• 자바스크립트가 동적 언어인 이유는 무엇인가요?
• 프로토타입에 대해 설명해주세요.
• 깊은 복사와 얕은 복사에 대해 설명해주세요.
• 불변성을 유지하려면 어떻게 해야하나요?
• Blocking과 Non-Blocking에 대해 설명해주세요.
• ⭐ 동기와 비동기에 대해 설명해주세요.
• ES6에서 새로 생긴 기능을 아는대로 말씀해주세요.
• undefined, null, undeclared를 비교해주세요.
• 자바스크립트를 멀티 쓰레드처럼 사용하는 방법이 뭔가요? / 자바스크립트에서 비동기 로직이 어떻게 동작하는지 설명해주세요. (이벤트 루프)
  • 태스크 큐와 마이크로 태스트 큐에는 어떤 함수가 들어가나요?
  • requestAnimationFrame에 대해 설명해주세요.
• 비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있나요?
• map과 forEach, reduce에 대해 설명해주세요.
• 자바스크립트의 메모리 관리에 대해 아는 대로 설명해주세요
• 클래스에 대해 설명해주세요.
• 즉시 실행 함수 (IIFE)에 대해 설명해주세요.
• 엄격 모드에 대해 설명해주세요.
• 콜 스택 (Call Stack)과 힙 (Heap)에 대해 설명해주세요.
• Rest 연산자와 Spread 연산자에 대해 설명해주세요.
• 제너레이터에 대해 설명해주세요.
• 이터러블과 이터레이터 프로토콜에 대해 설명해주세요.

타입스크립트

• 타입스크립트를 사용하는 이유에 대해 설명해주세요.
• Type과 Interface의 차이점에 대해 설명해주세요.
• 제네릭에 대해 설명해주세요.
  • 제네릭 유틸리티 타입에 대해 설명해주세요.
• 클래스의 Public, Private, Protected에 대해 설명해주세요.
• 클래스의 Static에 대해 설명해주세요.

리액트

• React에 대해 설명해주세요.
• React의 원리, 특징, 장단점이 무엇인가요?
• Virtual DOM 이 무엇인지 설명해주세요.
• Virtual DOM 작동 원리에 대해 설명해주세요.
• JSX에 대해 설명해주세요.
• 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
• 리액트에서 컴포넌트를 어떻게 생성하나요?
• 클래스형 컴포넌트를 사용해보셨나요?
• 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
• ⭐ 라이프사이클에 대해 설명해주세요.
• ⭐ 라이프 사이클 메소드에 대해 설명해주세요.
• 함수형 컴포넌트의 장점에 대해 설명해주세요.
• ⭐ React Hooks에 대해 설명해주세요.
• ⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)
• useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
• Pure Component에 대해 설명해주세요.
• shouldComponentUpdate에 대해 설명해주세요.
• State에 대해 설명해주세요.
• React에서 State를 어떻게 관리하나요?
• Props에 대해 설명해주세요.
  • ⭐ Props Drilling에 대해 설명해주세요.
  • ⭐ Props Drilling을 어떻게 해결할 수 있나요?
• 데이터를 자식에서 부모로도 전달할 수 있나요?
• Props와 State의 차이에 대해 설명해주세요.
• 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요?
• React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해 설명해주세요.
• React에서 State의 불변성은 어떻게 유지할 수 있나요?
• setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요?
  • 왜 비동기적으로 동작하나요?
• HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요.
• ⭐ Key Props를 사용하는 이유에 대해 설명해주세요.
• Ref의 용도에 대해 설명해주세요.
• 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.
• HOC (Higher-Order Components)에 대해 설명해주세요.
• Context API에 대해 설명해주세요.
• React.Fragment에 대해 설명해주세요.
• Portal에 대해 설명해주세요.
• 에러 바운더리에 대해 설명해주세요.
• 메모이제이션에 대해 설명해주세요.
• ⭐ 리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?
  • ⭐ useMemo와 useCallback에 대해 설명해주세요.
  • React.memo와 useMemo의 차이에 대해 설명해주세요.
• 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?
• 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
• CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.
• React 18 버전 업데이트 내용에 대해 말씀해주세요.
• Client Side Routing에 대해 설명해주세요.
• Next.js 를 사용해보셨나요?
• React에서 Form 이벤트는 어떻게 제어하셨나요?
  • React Hook Form 를 사용해보셨나요?
  • 기억나는 Hook에 대해 전부 설명해주세요.
• React에서 컴포넌트 A가 사용하는 CSS파일과 컴포넌트 B가 사용하는 CSS파일의 선택자가 겹치는 이유가 뭘까요?
• ⭐ Redux에 대해 설명해주세요.
  • ⭐ Redux를 사용하는 이유에 대해 설명해주세요.
  • ⭐ Redux의 장단점에 대해 설명해주세요.
  • Flux 패턴에 대해 설명해주세요.
  • Context API와 Redux를 비교해주세요.
  • Redux의 3대 원칙에 대해 설명해주세요.
• React-Query를 사용해보셨나요?
  • React-Query에 대해 설명해주세요.
  • React-Query의 등장 배경과 장점에 대해 설명해주세요.
• Recoil을 사용해보셨나요?
  • Recoil에 대해 설명해주세요.
  • Recoil에서 Loadable의 개념에 대해 설명해주세요.
  • Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?
  • Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?
  • ⭐ Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)

프론트엔드 전반

• ⭐ 브라우저 렌더링 과정을 설명해주세요.
• 브라우저는 어떻게 동작 하나요?
• Webpack, Babel, Polyfill에 대해 설명해주세요.
• ESLint와 Prettier에 대해 설명해주세요.
• SPA와 MPA에 대해 설명해주세요.
• ⭐ CSR과 SSR의 차이는 무엇인가요?
• ⭐ CORS와 해결 경험을 말씀해주세요.
• bundle의 사이즈를 줄이려면 어떻게 해야 하나요?
• ⭐ 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.
  • 브라우저에서 탭 이동 혹은 탭 종료 시에는 세션 스토리지에 어떤 영향을 끼치나요?
• ⭐ 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?
• ⭐ 토큰 기반 인증 방식에 대해 설명해주세요.
  • ⭐ JWT 토큰을 쿠키에 저장했을 때 취약점에 대해 설명해주세요.
• ⭐ 크로스 브라우징에 대해 설명해주세요.
  • 크로스 브라우징 이슈를 해결했던 경험을 말씀해주세요.
• 웹사이트 성능 최적화에는 어떤 방법이 있나요?
• 객체 지향 프로그래밍이란 무엇인가요?
  • 객체 지향 프로그래밍의 특징에 대해 말씀해주세요.
  • 객체 지향 프로그래밍의 장단점에 대해 말씀해주세요.
• ⭐ REST API에 대해 설명해주세요.
• Git Flow에 대해 설명해주세요.
• ⭐ SEO에 대해 설명해주세요.
• BOM과 DOM에 대해 설명해주세요.
• ⭐ 리플로우와 리페인트에 대해 설명해주세요.
  • 리플로우와 리페인트의 발생 조건에 대해 설명해주세요.
  • visibility 속성은 리플로우를 발생시킬까요?
• Agile에 대해 설명해주세요.
• dependencies 와 devDependencies 차이에 대해 설명해주세요.
• XSS와 CSRF에 대해 설명해주세요.
• 인증과 인가에 대해 설명해주세요.
• package.json에서 private에 대해 설명해주세요.
• 프로젝트를 npm에 배포하려면 어떤 설정이 필요할까나요?
• ⭐ SEO는 어떤 식으로 신경쓰셨나요?
• ⭐ 어플리케이션의 성능은 어떤식으로 측정하셨나요?
• LightHouse 결과가 좋지 않을 때, 프로젝트에서 병목 현상은 어떻게 해결할 수 있을까요?
• ⭐ 주소창에 주소를 입력했을 때의 흐름을 설명해주세요.

네트워크

• 웹 프로토콜에 대해 설명해주세요.
• ⭐ HTTP에 대해 설명해주세요.
  • ⭐ HTTP의 GET, POST를 비교 설명해주세요.
  • HTTP의 PUT, PATCH를 비교 설명해주세요.
  • ⭐ HTTP의 Status Code에 대해 설명해주세요.
  • ⭐ HTTP와 HTTPS의 차이점에 대해 설명해주세요.
  • HTTPS의 동작 방식에 대해 설명해주세요.
• TCP와 UDP를 비교 설명해주세요.
• TCP가 신뢰성을 보장하는 방법에 대해 설명해주세요.
• TCP의 3-Way-Handshake와 4-Way-Handshake에 대해 설명해주세요.

운영체제

• 운영체제의 정의에 대해 설명해주세요.
• 운영체제의 메모리 영역에 대해 설명해주세요.
• ⭐ 프로세스와 스레드를 비교 설명해주세요.
  • 스레드에서 독립적인 Stack 메모리 영역이 필요한 이유에 대해 설명해주세요.
• 멀티 프로세스와 멀티 스레드를 비교 설명해주세요.
• 문맥 전환 (Context Switch)에 대해 설명해주세요
• 교착상태 (Deadlock)에 대해 설명해주세요.
  • 교착상태의 발생 조건에 대해 설명해주세요.
• 페이징과 세그멘테이션에 대해 설명해주세요.
• 메모리 단편화에 대해 설명해주세요.
• 기아 상태에 대해 설명해주세요.
• 경쟁 상태에 대해 설명해주세요.
• 뮤텍스와 세마포어에 대해 설명해주세요.
• 가상 메모리에 대해 설명해주세요.
• 페이지 교체 알고리즘을 아는대로 설명해주세요.
• 요구 페이징에 대해 설명해주세요.

알고리즘 및 자료구조

• ⭐ 스택과 큐의 차이점에 대해 설명해주세요.
• 좋은 코드의 조건이 뭘까요?
• 좋은 알고리즘의 조건이 뭘까요?
• 정확도가 동일하다면 그 다음으로 고려해야 될 조건이 뭘까요?
• 시간 복잡도는 매우 낮지만 메모리를 매우 많이 사용한다면 어떻게 대처할 수 있을까요?
• 완벽한 보안을 갖출 수 있는 알고리즘이 있을까요?
• ⭐ 알고리즘은 어떻게 공부하셨나요?
• ⭐ 알고리즘 문제는 몇 개 정도 풀어보셨나요?
• 풀었던 알고리즘 문제 중에서 어려웠던 개념은 어떤게 있나요? 
  • DFS와 BFS 개념에서 어떤 부분이 특히 어려우신가요? 
  • 재귀를 사용하지 않고 DFS와 BFS를 구현한다면 어떻게 할 수 있을까요?
  • 자바스크립트의 flat 메소드를 손코딩으로 구현해보세요.
• Array와 연결 리스트를 비교 설명해주세요.
  • 단일 연결 리스트와 이중 연결 리스트를 비교 설명해주세요.
• 힙에 대해 설명해주세요.
• 이진 트리와 완전 이진 트리에 대해 설명해주세요.
• 해시 테이블에 대해 설명해주세요.
  • 좋은 해시 함수의 조건은 뭘까요?

프로젝트 관련

• ⭐ 포트폴리오의 프로젝트와 담당하신 파트를 소개해주세요.
• 팀 프로젝트에서 본인의 기여도는 얼마 정도라고 생각하시나요?
• ⭐ 프로젝트에서 기술적으로 어려웠던 점과 해결 방법에 대해 설명해주세요.
• ⭐ 프로젝트에서 협업은 어떤 식으로 진행하셨나요?
• 프로젝트에서 아쉬웠던 부분에 대해 설명해주세요.
• ⭐ 프로젝트에서 OAuth에 기반한 로그인을 구현하셨는데 OAuth와 동작 방식에 대해 설명해주세요.
  • 소셜 로그인 플로우에 대해 설명해주세요.
  • ⭐ 프로젝트에서 JWT 토큰을 쿠키에 저장한 이유를 설명해주세요.

HR 및 컬쳐핏

• ⭐ 자기소개 부탁드립니다.
• ⭐ 이전 회사를 1달 만에 퇴사하신 이유가 뭔가요?
• ⭐ 본인의 장단점을 말씀해주세요.
• ⭐ 저희 회사에 지원하신 이유 또는 동기가 뭔가요?
  • 그런 이유 또는 동기를 갖게 된 경험이 있나요?
• ⭐ 항해 99의 커리큘럼은 어떻게 진행되나요?
• 개발과 관련해서 기존의 생각을 뒤엎을만큼 강한 인상을 받았던 글이나 영상이 있으면 소개해주세요.
• ⭐ 요즘은 어떤 공부를 하고 계신가요?
• 개발 공부는 어떤 자료를 많이 참고하시나요?
• ⭐ 향후 커리어 적으로 목표가 있나요?
  • 그런 목표를 갖게 된 계기가 있나요?
• 경영정보학과에서 기억에 남는 프로젝트나 협업 경험이 있으면 소개해주세요.
• ⭐ 경영정보학과에서 다른 분야를 선택한 이유가 뭔가요?
• ⭐ 개발자가 되고 싶은 계기가 뭔가요?
• ⭐ 프론트엔드를 선택한 이유는 뭔가요?
• ⭐ 개발자가 되기 위해 편입이나 전과는 시도해보지 않았나요?
• 기존의 전공을 완전히 포기하는게 어렵지 않았나요?
• ⭐ 협업에서 기억에 가장 남는 상황에 대해 설명해주세요.
• ⭐ 협업에서 어려웠던 경험이 있었나요?
  • 어려웠던 이유가 뭐라고 생각하시나요?
  • 그 때로 다시 돌아간다면 어떻게 행동하실 건가요?
• 자기 주장이 매우 강한 사람과 소통할 경우 어떻게 대응했었나요?
• 좋은 팀장의 기준은 뭘까요?
• 좋은 팀원의 기준은 뭘까요?
• 팀장 역할을 맡았을 때, 지원자님에게 비협조적이고 적대적인 팀원이 있다면 어떻게 대처하실건가요?
• “팀에서 1인분을 한다”고 할 때, 1인분은 어떤걸 의미하는걸까요?
• 코드 리뷰로 인해 본인의 코드를 전부 고쳐야한다면 어떻게 할 것인가요?
• 훗날 현업에서 일하면서 기술적인 어려움 등으로 개발자가 된 것을 후회할 상황이 생긴다면 어떻게 할 것인가요?
• ⭐ 최신 기술 트렌드는 어떻게 추적하시나요?
  • 그렇게 찾은 최신 기술을 사용해보신 적이 있나요?
• 개발 기간을 촉박하게 요구하는 경우 어떻게 하시나요?
• 슬럼프가 올때 어떻게 대처 하시나요?
• 본인만의 스트레스 해소 방법이 있으신가요?
• 수행해야 하는 주제가 굉장히 어려운 주제라서, 나혼자서 해결 못할 일이 주어졌다고 가정해 볼게요. 어떻게 하실 건가요?
• ⭐ 저희 회사에서 지원자를 뽑아야하는 이유가 있나요?
• ⭐ 희망 연봉은 얼마나 되시나요?
• ⭐ 저희 회사에 대해 궁금하신 점 질문해주세요.