제가 면접 보면서 질문 받았던 면접 질문들을 총정리 합니다. 여러 IT 대기업들 그리고 여러 스타트업들의 내용들을 정리하였습니다.
HTML
DOCTYPE 이란 무엇인가요?
여러 meta 태그들에 대한 질문
시맨틱 태그란 무엇인가요?
CSS
position에 대해 설명해주세요.
display에 대해 설명해주세요.
flex 에 대해 설명해주세요.
grid는 사용해보셨나요?
box model이란 무엇인가요?
margin, padding의 차이는 무엇인가요?
inline, block, inline-block의 차이점은 무엇인가요
reset.css, nomalize.css는 무엇인가요?
sass, css module, css in js에 대해, 각각 장단점.
CSS를 head 위에 둬야하는 이유는 무엇인가요?
해당 화면을 레이아웃 잡아보세요.
이 화면을 만드려면 어떤식으로 해야할 것 같나요?
JS 관련
JS를 body 맨 밑에 둬야 하는 이유는 무엇인가요?
head에 둬야 하는 경우가 있을까요? 어떨 때인가요?(defer async 제외)
var, let, const의 차이는 무엇인가요?
block scope란 무엇인가요?
이벤트 버블링, 캡처링, 위임
이벤트 위임의 장점은 무엇인가요?
캡처링은 어떨 때에 쓸 수 있을까요?
클로저란 무엇인가요?
클로저는 어떨 때에 쓰이나요?
이벤트 루프란 무엇인가요?
프로토타입이란 무엇인가요?
프로토 타입의 장단점은 무엇인가요?
프로토타입을 실제로 사용해볼 일은 잘 없는데 어디에 사용할 수 있을까요?
호이스팅이 무엇인가요?
호이스팅은 개발자가 이해하기 어려운데 왜 만들었을까요? 일어나는 이유가 뭘까요?
실행 컨텍스트란 무엇인가요?
== 과 === 의 차이가 무엇인가요?
NaN 과 NaN을 비교하면 어떻게 되나요? 어떻게 확인할 수 있나요?
setTimeout(callback, 0) 은 어떻게 동작하나요?
Promise란 무엇인가요? async await 또한,
ES6에 추가된 문법에 대해 말해주세요.
NULL 병합 연산자는 무엇인가요?
optional chaning의 장점은 무엇인가요?
for of 는 어떻게 동작하나요?
iterator에 대해 설명해주세요.
generator에 대해 설명해주세요.
JS의 GC는 무엇인가요?
GC의 순환참조 문제를 어떻게 해결할 수 있나요?
this란 무엇인가요?
apply, call, bind의 차이는 무엇인가요?
bind를 apply, call로 어떻게 구현할 수 있을까요? 구현해보세요.
throttle과 debounce에 대해 설명해주세요.
mutable과 immutable에 대해 설명해주세요.
불변하게 만들 수 있는 방법은 어떤게 있나요? Object.freeze 말고는 없나요?
CSS애니메이션과 JS 애니메이션의 차이는 무엇인가요?
requestAnimationFrame이 무엇인가요?
setTimeout이란 어떤 차이가 있길래 raf는 16fps를 보장할 수 있나요?
nodejs와 그냥 js의 차이점은 무엇인가요?
웹팩이 뭔가요? 왜 사용하나요?
바벨이 뭔가요? 왜 사용하나요?
polyfill이란 무엇인가요?
Promise나 async await를 es5로 트랜스파일하면 어떻게 되나요?
타입스크립트의 장점은 무엇인가요?
type과 interface의 차이는 무엇인가요?
어떨 때에 JS를 쓰고 어떨 때에 TS를 쓰는 것이 좋을까요?
enum은 무엇인가요? object와의 차이점은?
React 관련
여러 프레임워크들이 있는데 왜 React를 쓰셨나요?
React의 라이프사이클에 대해 설명해주세요.
React의 장점은 무엇이있나요?
virtual Dom에 대해 설명해주세요.
virtual dom은 트리가 바뀐지 어떻게 비교하나요?
hook이 뭔가요? 일반 함수랑 어떤차이가 있나요.
state를 왜 쓰나요? 그냥 변수를 쓰는 것과 어떤 차이가 있나요?
React의 key는 무엇인가요?
useEffect에 대해 설명해주세요.
useEffect의 두번째 인자인 dependecny는 어떻게 바뀌었는지 비교 하나요?
useCallback, useMemo 차이는 무엇인가요?
React.memo란?
리액트의 에러바운더리에 대해 아시나요?
함수 컴포넌트의 장점이 무엇인가요?
함수형 컴포넌트라고 안 부르고 함수컴포넌트라고 부르는데 그 이유가 무엇인가요?
SSR과 CSR의 차이는 무엇인가요? 어느 것이 더 속도가 빠른가요?
Next.js 처럼 서버에서 렌더링을 할 경우 부하가 많아지면 어떻게 해결 할 수 있을까요?
왜 Redux를 쓰셨나요?
Redux와 Mobx 중에 Redux를 쓰신 이유? (또는 Mobx를 쓴 이유)
Redux 미들웨어는 뭐 쓰셨나요?
미들웨어를 만들어본 적 있나요?
thunk와 saga의 차이는 무엇인가요?
saga의 장단점은 무엇인가요?
웹 관련
URL을 입력했을 때 어떤식으로 동작하게 되나요?
index.html을 읽어서 그려지는 과정을 설명해주세요.
해당 과정에서 병목현상이 일어나는 구간이 어디인가요?
Reflow, Repaint에 대해 설명해주세요.
최적화를 하는 방법에 어떤 것들이 있을까요?
이미지 스프라이트란 무엇인가요?
크로스 브라우징 어떻게 하나요?
http란 무엇인가요?
http method에 대해 설명해주세요.
REST API란 무엇인가요?
http 1.1 과 http 2.0의 차이는 무엇인가요?
쿠키, 로컬스토리지, 세션스토리지 차이는?
쿠키세션, JWT, OAUTH에 대한 내용
메신저 앱에서 메시지를 보낸 다음 서버에서 어떤 방식으로 모든 방 사람들에게 뿌려줄 수 있는걸까요?
XSS, CSRF는 무엇인가요?
하드웨어 가속이란?
프로젝트 관련
왜 해당 기술을 썼나요?
로그인 처리는 어떻게 하셨나요?
팀원간의 불화는 없었나요? 갈등은 어떻게 해결했나요?
어떤 역할을 하셨나요?
가장 어려웠던 부분은 어디인가요?
어떤 기술적인 고민을 하셨나요?
최적화에 대해 신경써보셨나요?
자신의 기여도가 얼마정도 된다고 생각하는지?
팀원에게 받은 긍정적/부정적 피드백은?
약간의 기술? + 인성 관련
자기소개
롤 모델이 있나요? (개발자든 비개발자든 상관없습니다.)
우리 팀에 들어와서 몇 년뒤 당신의 축하파티가 열렸다면 어떤 일일 것 같나요?
우리 팀에 들어와서 어떤 일을 하고 싶나요?
최근에 가장 관심 있는 기술은 무엇인가요?
팀원 간의 갈등이 있을 때 어떻게 해결할 것인가요?
다른 팀원의 잘못된 코드를 봤을 때 어떻게 할 것인가요?
팀원이 계속해서 자기게 맞다고 우기면 어떻게 할 것인가요?
취미는 무엇인가요?(개발 빼고)
어떤 분야(핀테크, 소셜, 게임, 커머스 등)에 많이 지원하셨나요?
다른 회사에도 지원을 하셨나요?
자신의 장단점에 대해 말해주세요.
살면서 가장 힘들었던 일이 무엇인가요?
자신은 누군가에게 도움을 주는 사람이었나요? 어떤 도움을 주었나요?
반대로 누군가 자신에게 가장 도움이 됐던 일은 무엇인가요?
커리어의 목표가 무엇인가요?
왜 프론트엔드 개발자가 되고 싶으신가요?
프론트엔드 개발자에게 가장 중요한 것은 무엇이라고 생각하시나요?
빠른 코드와 가독성 높은 코드 중에서 어떤 것을 택하실 건가요?
어떤 개발자가 좋은 개발자일까요?
리더형인가요? 팔로우형인가요?
가장 재밌었던 전공 과목은 무엇인가요?
페어프로그래밍, 코드리뷰에 대한 생각
백엔드도 해보셨나요?
도커, 쿠버네티스 사용해보셨나요?
함수형 프로그래밍이란 무엇인가요?
테스트에 대해 어떻게 생각하나요? 꼭 해야 하나요?
왜 당신을 뽑아야하나요?
열심히 일하는 편인가요? 영리하게 일하는 편인가요?
영어 강의를 본적이 있나요? 최근에 본 영어 강의는?
자바스크립트 어떻게 공부했나요?
개발이 재밌어서 하는 건가요?
배포는 해보았나요? 어떤식으로 해봤나요?
자신이 어느정도의 실력이라고 생각하시나요?
개발말고 다른 것에 열정적으로 해본 것이 있나요?
개발자가 사용자의 ux를 향상 시키기 위한 방법은 어떤 것이 있나요?
와! 감사합니다