프론트엔드 기술 면접 대비하기 -1편

F-Lab : 상위 1% 개발자들의 멘토링

2023-02-21

안녕하세요! 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의 고유 자산으로 상업적인 목적의 복사 및 배포를 금합니다.

지금 진행중인 멘토링 코스