프론트엔드 기술 면접 대비하기 -1편
F-Lab : 상위 1% 개발자들의 멘토링
안녕하세요! F-Lab 프론트엔드 멘토로 활동하고 있는 Kevin입니다.
프론트엔드 개발자가 되시기 위해 열심히 노력하시는 멘티분들을 위해 기술면접을 대비하실 수 있는 자료 몇가지를 준비해보았습니다.
1편으로는 브라우저 편을 준비해보았는데요,
프론트엔드 엔지니어로서 어플리케이션이 동작하는 환경인 브라우저를 이해하는 것은 굉장히 중요합니다.
브라우저 환경을 이해해야 어플리케이션이 동작하는 과정을 정확하게 설명할 수 있고 어플리케이션 동작 과정 중 문제가 발생했을 때 작성된 코드가 문제를 일으키는 지 혹은 브라우저 스펙으로 인해 발생하는 문제인지 알 수 있기 때문입니다.
대표적으로 브라우저에서 많이 이야기가 오가는 주제가 있는데요. 바로 네트워크 과정, 렌더링 과정, 이벤트 루프입니다.
언뜻 보면 적어보이지만 토글을 펼쳐보면 더 많고 깊이있는 정보를 보실 수 있습니다.
많은 분들께 도움이 되길 바랍니다!
브라우저의 주소창에 주소를 입력하면 어떤 일들이 일어날까요?
면접관이 프론트엔드 개발자에게 이 질문을 하는 의도
는 무엇일까요?네트워크 환경에서 데이터가 오가는 과정을 이해하는 것
이 왜 중요할까요?네트워크 환경에서 데이터가 오가는 과정을 이해하는 것
은 프론트엔드 업무와 어떤 연관이 있을까요?
HTTP
란 무엇일까요?HTTP
는 브라우저와 어떤 관련이 있을까요?HTTPS
와HTTP
의 차이는 무엇일까요?
HTTP
통신에서 캐싱
을 활용하기 위해 어떤 값들을 설정할 수 있을까요?캐싱
의 정의는 무엇일까요?캐싱
을 활용하므로써 어떤 점을 더 좋아지게 만들 수 있을까요?
캐싱
을 사용하기 위해 사용되는 header
값은 어떤 게 있을까요?Etag
란 무엇일까요?Cache-Control
에 사용되는 값들은 어떤 것들이 있을까요?
header
란 무엇일까요?header
의 구조는 어떻게 될까요?
DNS
란 무엇이고 어떤 역할을 할까요?<link>
태그의dns-prefetch
의 개념은 무엇일까요?
TCP/IP three-way handshake
는 무엇일까요TCP
란 프로토콜을 설명해주세요TCP
는HTTP
와 어떤 관련이 있을까요?
리소스 우선순위
를 제어하는link
태그의 설정값들은 어떤 것들이 있을까요?
CRP(Critical Rendering Path)
에 대해 자세하게 이야기해주세요Reflow
, Repaint
는 무엇일까요?Reflow
와 Repaint
중 어떤 과정이 더 연산을 많이 하게 될까요?Reflow
를 일으키는 속성은 어떤 것들이 있을까요?
- 강제로
Reflow
가 발생하는 현상들은 어떤 원인들로 인해 발생되는 걸까요?
Render Blocking Resource
란 무엇일까요?- 어떤 종류의 리소스가 있을까요?
script
태그를 <body>
하단에 두는 이유는 무엇일까요?Script의 defer
, async
속성은 무엇이고 어떤 차이가 있을까요?defer
와async
는 각각 어떤 상황에서 사용해야 효율적으로 사용할 수 있을까요?
Event Loop
란 무엇일까요?Event Loop의
구조는 어떻게 이루어져 있을까요?Micro Task Queue
,Macro Task Queue
에 대해 설명해주세요setTimeout(fn, 0)
코드가 실행되는 과정을 이벤트 루프 구조를 통해 설명해주세요
Event Loop
와 callback
함수는 어떤 관계가 있을까요?Callback
함수의 개념은 무엇일까요?
rAF(RequestAnimationFrame)
은 무엇일까요?어떤 상황에서 사용하는 Web API일까요?rAF(RequestAnimationFrame)
이Event Loop
구조내에서 실행되는 과정을 설명해주세요setInterval
과rAF(RequestAnimationFrame)
은 어떤 차이가 있을까요?
여기까지 준비해봤습니다. 긴 질문 보느라 고생 많으셨습니다.
감사합니다!
이 컨텐츠는 F-Lab의 고유 자산으로 상업적인 목적의 복사 및 배포를 금합니다.