[면접준비] 기술 면접 기초 10일차
Server Side Rendering, Client Side Rendering, Static Site Generation 의 장단점을 설명해주실 수 있을까요?
SSR은 서버에서 페이지 전체 내용을 렌더링하여 클라이언트에게 HTML을 전송하는 렌더링 방법입니다. 이 방법의 첫 번째 장점은 자바스크립트 파일을 해석하지 않아도 되기 때문에 초기 페이지 로딩 속도가 빠르다는 점입니다.
두 번째는 크롤러가 완전히 렌더링 된 페이지의 내용을 쉽게 파악할 수 있기 때문에 SEO에 유리한 점입니다. 단점으로는 첫 번째로 각 요청마다 서버에서 렌더링을 수행해야 하므로 부하가 증가할 수 있다는 점입니다.
CSR은 브라우저에서 자바스크립트를 사용하여 페이지를 렌더링하는 방법입니다. 이 방법의 장점은 첫 번째로 서버에서 정적 파일만 제공하기 때문에 서버 부하가 비교적 적다는 점입니다. 두 번째는 한 번 초기 로딩이 완료되면 페이지 전환 시 추가적인 렌더링만 수행하기 때문에 페이지 전환이 빠르다는 점입니다.
단점으로는 자바스크립트 파일을 다운로드하고 실행하여 페이지를 렌더링해야 하므로 초기 로딩이 느리다는 점입니다. 또한 자바스크립트를 완전히 실행하지 않을 경우, 검색 엔진 크롤러가 페이지 내용을 제대로 인식하지 못하기 때문에 SEO 문제가 발생할 수 있다는 점입니다.
SSG(Static Site Generation)은 빌드 시점에 모든 페이지를 미리 렌더링 하여 정적 파일로 생성하는 방법을 말합니다. 이 방법의 장점은 서버에서 동적으로 콘텐츠를 생성하지 않기 때문에 보안상 이점이 있을 수 있다는 점이며, 추가적으로 SSR과 CSR의 장점을 모두 가지고 있습니다. 단점으로는 사이트의 크기나 복잡도가 증가하면 빌드 시간이 길어질 수 있다는 점입니다.
브라우저 렌더링 과정에 대해 아는 만큼 설명해주실 수 있을까요? 예를 들어 화면에서 DOM이 어떻게 결정되고, CSS는 어떻게 입혀지는지 등을 언급해주시면 좋습니다.
1. HTMl Parsing - 브라우저가 HTML 문서를 받아서 DOM 크리를 만듭니다. DOM 트리는 HTML 태그들을 노드로 표현한 구조입니다.
2. CSS Parsing - CSS 파일이나 태그를 파싱해서 CSSOM(CSS Object Model) 트리를 만듭니다.. 이 트리는 CSS의 규칙을 브라우저가 이해할 수 있는 형태로 표현합니다.
3. Render Tree 생성 - DOM 트리와 CSSOM 트리가 합쳐져서 렌더 트리가 만들어집니다. 렌더 트리는 화면에 실제로 그려질 노드들만 포함합니다.4. Layout(Reflow) - 렌더 트리가 만들어진 후, 각 노드가 화면의 어디에 위치할지 계산하는 단계입니다.
5. Painting - 렌더 트리의 노드에 색, 텍스트, 이미지 등을 입히는 작업이에요. CSS의 스타일이 적용되는 단계입니다.
6. Compositing - 여러 레이어를 합쳐서 실제 페이지를 완성합니다. 투명도 등 복잡한 효과를 적용할 때 이 단계가 중요합니다.
Event bubbling 과 capturing 을 비교하여 설명해주실 수 있을까요?
1. Event Bubbling (버블링) - 이벤트가 발생한 요소부터 시작해서 최상위 요소까지 이벤트가 전파되는 방식이ㅇ - 예를 들어, 버튼을 클릭했다면 그 버튼 → 그 버튼의 부모 요소 → 부모의 부모 요소 ... 이런 식으로 이벤트가 위로 올라가면서 전파됩니다. - 대부분의 이벤트는 버블링을 사용하는 것이 디폴트입니다.
2. Event Capturing (캡쳐링) 또는 Event Capturing Phase - 이벤트가 최상위 요소에서 시작해서 발생한 요소까지 내려오는 방식이죠. - 이 경우에는 이벤트가 루트 요소(예: **`document`**)부터 시작해서 실제 이벤트가 발생한 요소까지 내려오면서 전파됩니다. - 이 방식은 별도로 설정을 해주어야 사용할 수 있어요.JavaScript에서는 이벤트 리스너를 추가할 때 세 번째 인자로 이 두 가지 방식을 선택할 수 있습니다.