[IT 면접대비] 개발자 기술면접 대비 🖥️/ 5️⃣ - 프론트엔드 (1)

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

 

브라우저에서 렌더링을 담당하는 렌더링 엔진이 돌아가면서, HTML 파서가 HTML을 파싱하고, DOM 트리를 만듭니다. 동시에 Style Sheets도 CSS 파서에 의해서 CSSOM 트리를 구성합니다. 그 구성된 트리들로 렌더 트리가 만들어지고, 이 트리를 배치하고, 그리게 됩니다. 자바스크립트는, HTML 파서에서 스크립트 태그를 만났을 때, 자바스크립트 런타임으로 제어 권한을 넘기면서 그 실행 결과값을 받게됩니다.

 

* 렌더링 엔진은 대표적으로 웹킷 과 개코 가 있다.

 

읽어보면 좋은 글 : d2.naver.com/helloworld/59361

* 브라우저 구조

- 사용자 인터페이스

- 브라우저 엔진

- 렌더링 엔진

- JS 런타임

- 기타 (통신담당, 벡엔드, 저장소)

 

DOM 이란 무엇인가요?

Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미합니다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 됩니다.

 

Virtual DOM 이 무엇인가요? React 와 연계해서 말해주십쇼.

추상화된 DOM을 뜻합니다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄일 수 있습니다. DOM 과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 Virtual DOM을 바꾸고, 실제 DOM 에서는 변경 사항만 변경할 수 있게끔 해서 더 반응성이 빠른 웹을 구현할 수 있습니다. 리액트도 이러한 VDOM 을 이용해서 구현되어 있습니다.

 

 

CSR 과 SSR 에 대해 설명해주실 수 있나요?

클라이언트 사이드 렌더링은 서버에서 한번에 HTML 및 자바스크립트를 다운받고, api 데이터도 다 로드가 된 상황에서 렌더링을 하는 것을 뜻합니다. 싱글 페이지 웹을 만들기 위해서 CSR의 중요성이 대두가 됐는데, 초기 로딩 시간이 너무 길고 검색 엔진에 최적화되지 못한다는 단점이 있습니다. SSR은 서버 측에서 필요한 데이터들을 넣은 페이지를 만들어 HTML을 보내서, 클라이언트 단에서는 HTML 렌더링만 하면 되므로 유저 입장에서 화면을 바로 볼 수 있고, 이벤트가 발생하거나 페이지를 옮기는 그런 필요에 따라 추가적으로 요청을 통해 데이터를 전해주게 됩니다. 하지만 결국 이도 깜빡임(Blinking) 이슈가 있고, 서버에 과부하가 올 수 있는 단점이 있기 때문에, 두 가지를 잘 선택하거나 혼합해서 사용하는 추세입니다.

 

 

최적화나 성능개선에 신경써본적이 있나요? 알고계시는 최적화 방법을 말해주세요.

 

굉장히 많은 답변들이 가능하다.

대표적인 것들을 말해보자면

 

요청에 대해 빠르게 응답하자

 

- CDN(Content Delievery Network) 이용하기

- 리다이렉트 피하기

 

요청, 응답수를 줄이자.

 

- 분리된 파일들을 병합

- HTTP request 수를 줄인다.

 

요청, 응답의 크기를 줄이자.

 

- CSS sprite

- Gzip 압축

- 이미지 최적화

 

 

---