min

1. webpack optimistic에 정의 : webpack이란 웹 어플리케이션을 구성하는 자원들을(html , css , js , jsx , img , svg)을 각각의 모듈로 보고 "이 모듈들을 조합하고 병합해서 하나의 결과물로 나타내는 것을 도와주는 도구"라고 생각하면 된다. webpack을 통해 병합된 결과물의 번들 사이즈를 줄이면 줄일 수록 코드를 가동하는 가상 컴퓨터의 부담이 줄어들고 사용자들에게 좀 더 나은 퍼포먼스를 보여줄 수 있다. 그렇다면 어떻게 해야지 webpack을 통한 번들 사이즈 최적화를 할 수 있을까? 오늘은 그 방법 중에서 tree shaking에 대해서 알아볼려고 한다. 2. tree shaking의 정의 : tree shaking이란 사용되지 않는 코드를 제거하기 위해..

1. Optimistic Updates의 정의 : Optimistic Updates는 "요청을 보내기 전에 요청에 대한 결과를 예상 및 적용하고 요청을 보낸 후에 예상된 결과를 UI에 반영하는 것"을 의미한다. 이 문장을 보고 바로 이해되기에는 추상적으로 다가올 것이다. 그래서 이 과정을 크게 request 전 / 후로 나눠서 설명하고자 한다. request 전 : request 후에 결과를 예측해서 request 요청을 받기 전에 해당 요청 값을 미리 변화시키는 것이다. (새로고침시 없어짐) request 후 : request 후에는 request전에 적용한 값을 요청 받은 값으로 바꾼다. (새로고침시 유지됨) 여기까지 살펴본다면 Optimistic Updates의 대략적인 흐름은 이해가 될 것이다. ..

1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서. 사용하지 않는 자바스크립트라는 항목이 나옴. 실제로 자바스크립트 전송크기가 918.3KIB라는 수치가 나옴 2. 가설 (H1) : 네트워크 탭에서 자세한 정보를 확인해보니 메인 페이지로 들어왔을 때 해당 메인 페이지와 관련이 없는 Detail , Write페이지가 렌더링되고 있음을 확인 . 따라서 지연로딩을 시켜야 겠다는 생각을 함. 3. 해결(S1) : 라우터에서 지연 로딩을 구현함. 구현한 코드는 다음과 같음 import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Suspense, lazy } from "..

1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서 렌더링 차단 리소스 제거하기라는 항목이 나옴. 이 항목을 분석해보니 렌더링 이전에 CSS와 JS를 동기적으로 다운로드 받기 때문임. 2. 가설 1 (H1) : 내 프로젝트에서는 구글 폰트를 사용하는 데 이 구글 폰트 서비스가 CDN 서비스라서 외부로 부터 CSS , JS파일을 동기적으로 다운로드 받아야 함. 이 과정에서 렌더링 차단이 발생하는 것으로 보임 3. 해결 (S1) : 구글 폰트를 미리 prefetch 받기 위해서 다음과 같은 항목을 추가함 여기서 프리로드를 통해서 브라우저가 폰트를 로드하기 전에 폰트 리소스를 사전에 가져오도록 지시함. 이를 통해서 가능한 절감 효과인 370m..

나는 오늘 컴포넌트 성능 최적화를 배우면서 이걸 어떻게 구현하는지 , 성능이 비효율적이다 라는 것을 어떻게 아는 지가 궁금했다. 그래서 나는 오늘 그것에 대해서 말해볼까 한다. 성능을 최적화 시킬 수 있는 방법으로는 크게 3가지가 있다. 첫번째는 React.memo다. React.memo를 사용하는 경우는 props가 바뀌지 않았을때 강제 리렌더링을 막는 경우이다. 그럼 여기서 props가 바뀌지 않았는데 렌더링이 일어나는 경우는 어떤 것이 있을까? 지금 생각나는 예시로는 부모 state가 변경되었을 때 자동적으로 자식 props가 업데이트가 되고 결국에는 리렌더링이 발생한다. 정리하면 React.memo는 어떤 컴포넌트가 강제로 리렌더링이 일어나는 것을 막을 때 사용한다. 두번째는 useCallback..