기술면접 준비

Frontend 면접 질문 (1)

개발쉐발 2023. 2. 2. 12:27
728x90
반응형

1. 브라우저 렌더링 과정을 설명해주세요.

브라우저

브라우저 렌더링 과정을 알아보기전에 브라우저가 무엇인지 먼저 알아보자. 우선 브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다.

MDN에서는 브라우저에 대해 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 설명하고 있다. 여기서 중요하다고 생각하는 부분은 찾아서 보여준다는 것이다.

브라우저는 유저가 선택한 자원을 서버로 부터 받아와서 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들을 렌더링 과정을 통해 유저에게 보여주게 된다.

브라우저 렌더링 동작 과정

렌더링의 기본적인 동작 과정은 다음과 같다.

  1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
  2. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
  3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
  4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
  5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

각 단계를 좀 더 자세하게 알아보자.

Parsing

브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.

파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

Style

Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이다.

예를 들면 Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외된다.

Layout

Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다. 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

Paint

Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

당연한 말이지만 스타일이 복잡할수록 Paint 시간도 늘어난다. 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.

 

 

2. 브라우저는 어떻게 동작 하나요?

 

https://d2.naver.com/helloworld/59361

 

 

3. Webpack, Babel, Polyfill에 대해 설명해주세요.

📖 폴리필(Polyfill) 

 폴리필을 사전에서 찾아보면  충전솜이라는 의미를 가지고 있습니다. 베개나 이불의 솜이 부족하면 우리는 충전 솜을 이용하여 부족한 부분을 채우는 역할을 합니다. 폴리필의 역할은 사전 의미처럼 부족한 부분을 채워주는 역할을 합니다. 그러면 부족한 것은 무엇이며 무엇을 채워주는가?라는 의문이 들 수 있습니다. 

폴리필이 무엇인지 이해하기 위해선 폴리필(pollyfill.io) 공식 레퍼런스 사이트를 접속하면 가장 자세히 설명되어 있습니다. 아래의 설명의 공식 사이트에서 폴리필이 무엇인지 설명한 내용입니다.

세계적으로 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다릅니다. 이것은 브라우저용 개발을 어려운 작업으로 만들 수 있습니다. 인기 있는 브라우저의 최신 버전은 이전 브라우저에서 할 수 없는 많은 작업을 수행할 수 있지만 여전히 이전 브라우저를 지원해야 할 수도 있습니다. Polyfill.io를 사용하면 누락된 기능을 polyfill로 다시 생성하여 다양한 브라우저를 더 쉽게 지원할 수 있습니다. 지원하는 브라우저와 지원하지 않는 브라우저에서 최신 기능을 사용할 수 있습니다.

 

위의 말을 정리해보면 브라우저에서 지원하지 않는 최신 자바스크립트 코드를 브라우저가 이해할 수 있게(랜더링이 가능하게) 지원하는 코드입니다. 이처럼 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 합니다.(쉽게 정의하면 크로스 브라우징을 뜻합니다.)

 

유명한 폴리필 두 가지는 아래와 같습니다.

  • core js – 다양한 폴리필을 제공합니다. 특정 기능의 폴리필만 사용하는 것도 가능합니다.
  • polyfill.io – 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스입니다.

 

👉 폴리필(Polyfill)이 필요한 이유는 무엇인가요?

브라우저마다 지원할 수 있는(랜더링 하는) 스펙이 다른 이유가 가장 큽니다.

브라우저에서 지원하는 CSS를 확인하는 사이트로 유명한 can i use 사이트를 확인해보면 속성값에 따라서 브라우저가 지원 하는 범위가 다르다는 것을 알 수 있습니다.  ES6에서 새롭게 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우엔 에러가 발생하기 때문에 이 경우엔 Pollyfill이 사용됩니다.

 

📖 Babel

바벨 사이트 이미지

바벨(Babel) 사이트에 들어가면 보이는 화면으로 왼쪽에 코드가 작성되면 오른쪽에 코드가 변환되는것을 보여줍니다. 

바벨은 코드를 재작성해주는 트랜스파일러(transpiler) 프로그램으로, ES6 이상에서 사용되는 최신 문법을 브라우저가 인식할 수 없기 때문에 구 표준을 준수하는 코드로 변경됩니다. 변경된 코드는 웹사이트 형태로 사용자에게 전달됩니다.(이 부분이 폴리필과 가장 큰 차이점 입니다.)

 

 

- 바벨이 트랜스 파일러 한 예제 

// ES6
const test = () => {  
  target.classList.add('is-active');
};

// ES5
var test = function () {  
  target.classList.add('is-active');
};

 

 

📖 Webpack

웹팩(Webpack)은 '빌드'라는 과정을 통해서 프로젝트에서 코드가 수정될 때마다 자동으로 트랜스 파일러를 동작시켜줍니다.

자바스크립트 코드 뿐 아니라 이미지, CSS등도 같이 빌드합니다.

빌드란 소스코드 파일을 실행 가능한 소프트웨어 산출물로 만드는 과정으로 컴파일, 배포 등의 과정이 뜻하며 이러한 과정이 있기 때문에 개발과정이 끝난 코드를 한 곳으로 통합할 수 있습니다. 

728x90
반응형