F-Lab
로그인
🚀
상위 1% 개발자에게 1:1로 멘토링 받아 성장하세요

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

writer_thumbnail

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

 

안녕하세요! F-Lab 프론트엔드 멘토로 활동하고 있는 Kevin입니다.

 

프론트엔드 개발자가 되시기 위해 열심히 노력하시는 멘티분들을 위해 기술면접을 대비하실 수 있는 자료 몇가지를 준비해보았습니다.

 

1편으로는 브라우저 편을 준비해보았는데요,

프론트엔드 엔지니어로서 어플리케이션이 동작하는 환경인 브라우저를 이해하는 것은 굉장히 중요합니다.

 

브라우저 환경을 이해해야 어플리케이션이 동작하는 과정을 정확하게 설명할 수 있고 어플리케이션 동작 과정 중 문제가 발생했을 때 작성된 코드가 문제를 일으키는 지 혹은 브라우저 스펙으로 인해 발생하는 문제인지 알 수 있기 때문입니다.

 

대표적으로 브라우저에서 많이 이야기가 오가는 주제가 있는데요. 바로 네트워크 과정, 렌더링 과정, 이벤트 루프입니다.

 

언뜻 보면 적어보이지만 토글을 펼쳐보면 더 많고 깊이있는 정보를 보실 수 있습니다.

많은 분들께 도움이 되길 바랍니다!

 



 

브라우저의 주소창에 주소를 입력하면 어떤 일들이 일어날까요?
면접관이 프론트엔드 개발자에게 이 질문을 하는 의도는 무엇일까요?
  • 네트워크 환경에서 데이터가 오가는 과정을 이해하는 것이 왜 중요할까요?
  • 네트워크 환경에서 데이터가 오가는 과정을 이해하는 것은 프론트엔드 업무와 어떤 연관이 있을까요?
HTTP란 무엇일까요?
  • HTTP는 브라우저와 어떤 관련이 있을까요?
  • HTTPSHTTP의 차이는 무엇일까요?
HTTP 통신에서 캐싱을 활용하기 위해 어떤 값들을 설정할 수 있을까요?
  • 캐싱의 정의는 무엇일까요?
  • 캐싱을 활용하므로써 어떤 점을 더 좋아지게 만들 수 있을까요?
캐싱을 사용하기 위해 사용되는 header 값은 어떤 게 있을까요?
  • Etag란 무엇일까요?
  • Cache-Control에 사용되는 값들은 어떤 것들이 있을까요?
header란 무엇일까요?
  • header의 구조는 어떻게 될까요?

 

DNS란 무엇이고 어떤 역할을 할까요?
  • <link>태그의 dns-prefetch의 개념은 무엇일까요?
TCP/IP three-way handshake는 무엇일까요
TCP 란 프로토콜을 설명해주세요
  • TCPHTTP와 어떤 관련이 있을까요?
  • 리소스 우선순위를 제어하는 link 태그의 설정값들은 어떤 것들이 있을까요?


 



 

CRP(Critical Rendering Path)에 대해 자세하게 이야기해주세요
Reflow, Repaint는 무엇일까요?
ReflowRepaint 중 어떤 과정이 더 연산을 많이 하게 될까요?
  • Reflow를 일으키는 속성은 어떤 것들이 있을까요?
  • 강제로 Reflow가 발생하는 현상들은 어떤 원인들로 인해 발생되는 걸까요?
Render Blocking Resource란 무엇일까요?
  • 어떤 종류의 리소스가 있을까요?


 



 

script 태그를 <body> 하단에 두는 이유는 무엇일까요?
Script의 defer, async 속성은 무엇이고 어떤 차이가 있을까요?
  • deferasync는 각각 어떤 상황에서 사용해야 효율적으로 사용할 수 있을까요?


 



 

Event Loop란 무엇일까요?
Event Loop의 구조는 어떻게 이루어져 있을까요?
  • Micro Task Queue, Macro Task Queue에 대해 설명해주세요
  • setTimeout(fn, 0) 코드가 실행되는 과정을 이벤트 루프 구조를 통해 설명해주세요
Event Loopcallback 함수는 어떤 관계가 있을까요?
  • Callback 함수의 개념은 무엇일까요?


 



 

rAF(RequestAnimationFrame)은 무엇일까요?
어떤 상황에서 사용하는 Web API일까요?
  • rAF(RequestAnimationFrame)Event Loop 구조내에서 실행되는 과정을 설명해주세요
  • setIntervalrAF(RequestAnimationFrame)은 어떤 차이가 있을까요?


 



 

여기까지 준비해봤습니다. 긴 질문 보느라 고생 많으셨습니다.

감사합니다!

ⓒ F-Lab & Company

이 컨텐츠는 F-Lab의 고유 자산으로 상업적인 목적의 복사 및 배포를 금합니다.

조회수

멘토링 코스 선택하기

  • 코스 이미지
    Java Backend

    아키텍처 설계와 대용량 트래픽 처리 능력을 깊이 있게 기르는 백앤드 개발자 성장 과정

  • 코스 이미지
    Frontend

    언어와 프레임워크, 브라우저에 대한 탄탄한 이해도를 갖추는 프론트엔드 개발자 성장 과정

  • 코스 이미지
    Android

    아키텍처 설계 능력과 성능에 대한 경험을 바탕으로 딥다이브하는 안드로이드 개발자 성장 과정

  • 코스 이미지
    Python

    대규모 서비스를 지탱할 수 있는 대체 불가능한 백엔드, 데이터 엔지니어, ML엔지니어의 길을 탐구하는 성장 과정

  • 코스 이미지
    iOS

    언어와 프레임워크, 모바일 환경에 대한 탄탄한 이해도를 갖추는 iOS 개발자 성장 과정

  • 코스 이미지
    Node.js Backend

    아키텍처 설계와 대용량 트래픽 처리 능력을 깊이 있게 기르는 백앤드 개발자 성장 과정

  • 코스 이미지
    ML Engineering

    머신러닝과 엔지니어링 자체에 대한 탄탄한 이해도를 갖추는 머신러닝 엔지니어 성장 과정

  • 코스 이미지
    Data Engineering

    확장성 있는 데이터 처리 및 수급이 가능하도록 시스템을 설계 하고 운영할 수 있는 능력을 갖추는 데이터 엔지니어 성장 과정

  • 코스 이미지
    Game Server

    대규모 라이브 게임을 운영할 수 있는 처리 능력과 아키텍처 설계 능력을 갖추는 게임 서버 개발자 성장 과정

  • 코스 이미지
    Game Client

    대규모 라이브 게임 그래픽 처리 성능과 게임 자체 성능을 높힐 수 있는 능력을 갖추는 게임 클라이언트 개발자 성장 과정

  • 코스 이미지
    Flutter

    크로스 플랫폼에서 빠른 성능과 뛰어난 UI를 구현할 수 있는 능력을 갖추는 플러터 개발자 성장 과정

  • 코스 이미지
    시니어 코스

    대규모 아키텍처를 설계할 수 있고, 빠르게 성장하는 조직을 이끌 수 있는 시니어 개발자로 성장하는 과정

  • 코스 이미지
    Devops 코스

    대규모 아키텍처를 설계할 수 있고, 그 인프라를 구성할 수 있는 엔지니어로 성장하는 과정

F-Lab
소개채용멘토 지원
facebook
linkedIn
youtube
instagram
logo
(주)에프랩앤컴퍼니 | 사업자등록번호 : 534-85-01979 | 대표자명 : 박중수 | 전화번호 : 0507-1315-4710 | 제휴 문의 : info@f-lab.kr | 주소 : 서울특별시 강남구 테헤란로63길 12, 438호 | copyright © F-Lab & Company 2024