본문 바로가기

프론트엔드로 가는 길121

렌더 트리 Q1. 브라우저에서 렌더 트리를 구축하는 과정은 어떻게 될까요? A.서버에서 받아온 html,css파일을 브라우저가 알기 쉬운 구조로 변환하고 각각 DOM과 CSSOM을 생성하여 결합한 형태가 렌더트리입니다 답변에 대한 평가 : 90점 평가 이유 : 렌더 트리가 서버에서 받아온 HTML, CSS 파일을 가지고 구축되는 것에 대해 정확하게 설명했습니다. 그러나, 조금 더 자세한 내용을 알면 좋을 것 같습니다. 예를 들어, 렌더 트리에는 어떤 요소들이 포함되나요? 그리고 렌더 트리가 생성되면 무엇을 해야 할까요? 검색 키워드 : Render tree, DOM, CSSOM, rendering process 꼬리질문 : 렌더 트리에는 어떤 요소들이 포함되나요? 그리고 렌더 트리가 생성되면 다음에 어떤 과정이 일.. 2023. 8. 26.
css파싱 Q1. 브라우저의 CSS 파싱 과정은 어떻게 될까요? A.서버에서 받아온 css파일을 문자열로 읽고 문자열을 토큰으로 나누어 토큰화를 시킵니다. 토큰의 순서와 구조를 분석하여 파싱을 합니다. 그리고 스타일을 계산하고 레이아웃과 페인팅 단계로 넘어갑니다 이후 페인팅 단계에서 화면에 요소들을 그려나갑니다. 답변에 대한 평가 : 50점 평가 이유 : CSS 파싱 과정에 대해서는 일부 설명이 포함되어 있지만, 불완전하고 부분적인 설명입니다. 토큰화, 스타일 계산, 레이아웃, 페인팅 단계에 대한 내용이 더 구체적으로 설명되어야 합니다. 검색 키워드 : CSS parsing, CSS tokenization, CSS rendering pipeline 꼬리질문 : CSS 파싱 과정에서 토큰화(Tokenization)는.. 2023. 8. 25.
HTML 파싱 Q1. 브라우저에서 HTML의 파싱 과정은 어떻게 될까요? A.서버에 응답한 html문서를 이진수 바이트 형태로 받는다. meta 태그의 charset 어트리뷰트에 지정된 인코딩 방식으로 문자열로 변환시킨다. 문자열은 다시 토큰으로 분해하고 분해한 토큰을 객체로 변환해 노드를 생성한다. html 요소 간의 중첩 관계를 반영해서 트리 자료 구조를 구성한다. 답변에 대한 평가 : 70점 평가 이유 : 파싱 과정에 대한 기본적인 개념과 일부 과정을 언급했지만, 제대로된 순서와 구체적인 내용이 빠져있습니다. 또한, 트리 자료 구조를 어떻게 구성하는지에 대한 설명이 더 필요합니다. 검색 키워드 : HTML parsing algorithm, HTML parsing tree construction 꼬리질문 : HTM.. 2023. 8. 24.
브라우저의 렌더링 과정 Q1. 브라우저의 렌더링 과정은 어떻게 될까요? A. 우선 html와 css를 각각 파싱한 tree를 만든다. 두개의 tree를 결합해 rendering tree를 만들게 된다. 만들어진 rendering tree에서 각 노드의 크기와 위치를 계산하고 계산한 값을 토대로 각 노드를 화면 상의 픽셀로 변환하고 레이어를 만든다. 만들어진 레이어를 합쳐 화면에 보여주게 된다. 답변에 대한 평가 : 70점 평가 이유 : 대체로 브라우저의 렌더링 과정에 대한 개념을 이해하고 있습니다. 하지만, 렌더링 트리를 만들기 위해 DOM과 CSSOM을 파싱하고 결합하는 과정에 대해서 더 자세히 이해할 필요가 있습니다. 또한, 렌더링 트리의 노드 크기와 위치를 계산하기 위해 사용되는 알고리즘에 대해서도 알아볼 필요가 있습니다.. 2023. 8. 23.

티스토리툴바