개발 기록기록📝

먼저 브라우저 렌더링 개념을 알아보겠습니다. Critical Rendering 또는 Path Pixel Pipeline이라는 과정을 통해 브라우저는 렌더링을 하게 되는데 DOM 트리 + CSSOM -> Render Tree -> Layout -> Paint -> Composite 단계로 이루어집니다. DOM 트리 + CSSOM 먼저 서버로부터 화면을 그릴 때 필요한 HTML, HTML, JS를 다운로드 받습니다. HTML과 CSS 로 DOM트리, CSS object model 2가지 데이터 형태를 만들고 DOM 트리와 CSSOM(css object model)을 조합하여 Render Tree를 만듭니다. Layout 요소의 위치나 크기를 계산합니다. 화면의 레이아웃을 잡는 과정입니다. Paint 색을 채..

bundle 파일 분석 JS 코드를 다운 받는데 용량이 너무 크다면 (990KB 사이즈를 크다고 보셨음) bundle analyzer 툴을 활용하여 JS 번들을 분석할 수 있습니다. 'cra bundle analyzer'를 검색하여 cra-bundle-analyzer를 설치해줍니다. 설치를 완료한 후, npx cra-bundle-analyzer 명렁어를 이용해서 analyzer를 실행합니다. 잠시 후 다음과 같이 창이 뜨면서 번들 파일에 어떤 파일들이 들어 있는지 보여줍니다. node_modules에 refractor가 약 485KB로 번들에서 꽤 큰 것을 알 수 있네요. refractor를 package-lock.json에서 살펴보니 react-syntax-highlighter에서 디펜덴시로 refra..

다음은 인프런에서 유동균님의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat.React)- Part. 1을 완강하며 공부한 내용입니다. 웹 성능 최적화(=로딩 성능 최적화 & 렌더링 성능 최적화) 웹 성능 최적화는 크게 로딩 성능 최적화와 렌더링 성능 최적화로 구분할 수 있습니다. 로딩 성능 최적화는 클라이언트가 서버로부터 웹 페이지를 그리는데 필요한 리소스들을 다운 받는 로딩 시점에서의 성능을 최적화 하는 것입니다. 로딩 성능 최적화에는 이미지 사이즈 최적화, Code Splitting, 텍스트 압축 등이 있습니다. 렌더링 성능 최적화는 클라이언트 단의 브라우저에서 화면을 그릴 때의 성능을 최적화 하는 것을 말합니다. 렌더링 성능 최적화에는 BottleNeck 코드 최적화 등이 있습니다. 로딩..