- 23/08/31 스터디 면접 질문 🙋 브라우저 렌더링 과정을 설명해주세요. 📚 브라우저 동작원리 브라우저 렌더링 과정 브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 1. 파싱 (Parsing) 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드한다. 파싱은 다운로드한 HTML와 CSS를 해석하여 DOM 트리, CSSOM 트리를 구성하는 단계. HTML 파서는 문서 구조를 파악하고 DOM(Document Object Model)을 생성함. CSS 파서는 스타일 규칙을 해석하고 CSSOM(CSS Object Model)을 생성함. 2. 스타일 (Style) 스타일 단계에서는 CSSOM과 DOM을 가지고 스타일을 매칭 시킴. 이 과정을 거쳐 렌더..
- 23/08/31 스터디 면접 질문 🙋 웹사이트 성능 최적화에는 어떤 방법이 있나요? 성능 최적화를 하는 이유와 어떻게 개선되는지를 이해하기 위해선 브라우저의 렌더링 과정을 알아야한다. 브라우저 렌더링 과정 https://imnayoung.tistory.com/25 📚 성능 최적화 성능 최적화를 위해서는 웹 사이트의 `로딩 성능(Loading Performance)`과 `렌더링 성능(Rendering Performance)`을 개선해야 한다. 1) 웹 페이지 로딩 최적화 1. 블록 리소스(CSS, 자바스크립트) 최적화 브라우저 로딩 과정에서 파싱이 일어날 때 CSS 또는 자바스크립트로 인해 파싱이 중단될 수 있는데, 이때 원인이 되는 리소스를 블록 리소스(Block resource)라고 한다. 블록 리..
- 23/08/31 스터디 면접 질문! 🙋 리액트에서 JSX 문법이 어떻게 사용되나요? 📚 React 엘리먼트 React 앱의 화면을 표시하는 가장 작은 구성 요소. React 엘리먼트는 React 컴포넌트의 반환 값으로`일반 객체(plain object)`이다. 엘리먼트가 모여 컴포넌트라는 구조를 갖는다. React 엘리먼트는 실제 DOM에 직접 렌더링되지 않음 📚 React.createElement() `React 엘리먼트를 생성`하는 역할. 가상 DOM에 리액트 엘리먼트가 생성되고, 실제 DOM으로 렌더링됨. 📚 JSX JSX는 리액트에서 사용되는 JavaScript 확장문법으로, UI를 구성하는 데 사용된다. JSX를 사용하면 HTML과 유사한 마크업을 사용하여 UI 요소를 정의할 수 있다. JS..
