개발/개발과정

[AlgoITNi] 홈 화면 성능 개선하기: 6. 코드 스플리팅 (3)

문제점 많은 코드들을 분리했지만 아직 uuid가 함께 다운로드 되고 있으며 Home에 의해 다운로드 되고 있는 파일 중 가장 큰 크기를 차지하고 있다. 현재 홈에서 uuid가 필요한 경우는 방생성 버튼을 클릭했을 때 밖에 없다. 따라서, 버튼을 눌렀을 때 uuid와 관련된 코드를 받을 수 있도록 분할해본다. // Home.tsx import { v4 as uuidv4 } from 'uuid'; const handleMakeRoomClick = () => { const roomId = uuidv4(); navigate(`/${roomId}`); }; 방생성 현재 코드 상태이며 파일의 최상단에서 uuid 라이브러리를 import 하고 있다. 개선 후 // Home.tsx const handleMakeRoom..

[AlgoITNi] 홈 화면 성능 개선하기: 5. 코드 스플리팅 (2)

문제점 앞에서 결론으로 필요 없은 JS의 양을 더 줄여야 이미지의 렌더링 개선이 이루어 질 수 있을 것이라 판단했다. 따라서, 현재의 Home에서 더 줄일 수 있는 JS 코드가 있는지 확인해봤다. 이전에 코드 스플리팅을 한 번 수행했지만 여전히 Home에서 필요없는 파일들이 다운로드 되고 있었다. 좌측의 사진에서 우측의 사진을 제외한 부분은 Home에서 필요하지 않은 파일들이다. 대표적으로 Home 컴포넌트에 필요없는 모달 관련 코드가 있다. import { lazy, Suspense } from 'react'; import ReactDOM from 'react-dom/client'; import { QueryClientProvider } from '@tanstack/react-query'; import..

[AlgoITNi] 홈 화면 성능 개선하기: 4. 이미지 최적화 (2)

문제점 현재까지의 문제점은 이미지의 크기를 줄이게 되면 렌더링 지연 시간이 감소하지만 그에 따라 로드 지연이 증가하게 되어 전체적인 지연 시간은 변화가 없다는 것이다. 로드 지연이 말 그대로 이미지를 다운로드 받은 뒤 로드 하는데 걸리는 시간이라 생각했으며 이를 개선하기 위해 이미지를 받아오는 시점을 앞당긴다면 더 빠른 로드가 가능할 것으로 생각했다. 개선 컨텐츠 다운로드 시점 설정 최대 콘텐츠 렌더링 시간 최적화 | Articles | web.dev 최대 콘텐츠 렌더링 시간 최적화 | Articles | web.dev LCP 분석 및 개선이 필요한 주요 영역을 파악하는 방법에 관한 단계별 안내 web.dev 위의 사이트의 그림을 확인해보면 LCP 요소를 받아오는 시점을 앞당길 수 있다면 이것이 개선을 ..

[AlgoITNi] 홈 화면 성능 개선하기: 3. 이미지 최적화 (1)

문제점 현재 문제점은 메인 이미지 렌더링 시간이 매우 오래 걸린다는 것이다. 메인 화면에서 사용되는 이미지를 다운로드 받아서 렌더링 하는데 까지 걸리는 시간이 매우 길다. 네트워크 속도에 제한을 두면서 확인해본 결과 빠른 3G에서 유의미하게 속도가 느린 것을 알 수 있었다. 1.7초의 다운로드와 별개로 렌더링에 걸리는 시간까지 함께 고려한다면 사용자의 네트워크 속도가 조금만 느려도 UX에 매우 좋지 않을 것이라 판단했다. 현재 메인 화면의 이미지를 렌더링하는 코드는 아래와 같다. (...) (...) 평소와 같이 img 태그를 사용해서 png 확장자의 이미지를 렌더링 하도록 작성했었다. 개선 이미지 확장자 우리가 자주 사용하는 이미지의 확장자는 크게 세 가지가 있다. 각각 png, jpg, webp이다...