Develop:

우당탕탕 최적화 도전기

oni(오니)

intro 프로젝트 제작 중에 페이지 간 로딩이 너무 길다는 문제에 봉착하였다. 아이콘, 컴포넌트 라이브러리를 만드는 거다 보니 한 페이지당 불러들이는 데이터가 너무 많다는 것이 문제였다. 이에 '줄일 수 있는 건 최대한 줄여보자!'라는 마음으로 첫 최적화를 도전하게 되었다.

이미지 최적화하기

우선 가장 먼저 떠오른 건 이미지 최적화였다. 사용자가 직접 시현할 수 있도록 컴포넌트를 모두 불러왔던 로직이 화근이었다... 결국 페이지에 들어가는 모든 컴포넌트들을 총 3개의 이미지 스프라이트로 만들어서 backgroud-position으로 위치만 맞춰주는 식으로 사용하였다. 3개로 나눈 이유는 하나의 이미지 스프라이트에 들어가는 요소가 너무 많아서 나눠주었다.

 

그 결과 아래와 같은 결과가 나왔다.

 

 

 

총 로드 시간이 9.14초를 기록하였다. 그러나...

여기서 만족할 수 없다. 왜냐면 난 한국인이니깐*^^*

 

 

 

그래서 이미지 최적화 사이트에 접속하여 한번 더! 최적화를 진행하였다. 그 결과 아래 이미지를 보듯 무려 1초나 감축하는 효과를 얻을 수 있었다.

 

컴포넌트 최적화하기(ft. React.lazy & Suspense)

11초... 빠른 3G 환경에서도 거북이 같은 나의 렌더링 속도... 차근차근 줄여나가 보겠다. (놀랍게도 이미지 최적화가 적용되어 있는 상태입니다.)

 

우선 아래는 기존 데이터 로직이다.

만들고 있는 서비스는 UI 컴포넌트(버튼, 인풋, 체크박스 등)를 제공해 주는 데 이때 사이트에서 미리 테스트해 볼 수 있다. 때문에 수많은 컴포넌트들을 불러올 수밖에 없는 상황이 벌어졌다... 이에 사용자가 클릭한 컴포넌트만 데이터를 받아올 수 있는 방향으로 최적화를 시도하였다.

 

React.lazy & Suspense

저번 프로젝트를 하면서 멘토님께서 자신의 작업물을 공유해 주신 적이 있으셨는데, 그때 lazy의 활용법에 대해 알게 되었다. 이에 이번 문제에 적합하다는 생각이 들어 활용해 보게 되었다.

 

우선 React.lazy를 사용하게 되면 동적으로 import를 실행할 수 있게 해 준다. 때문에 코드 분할에 용이하다.

React를 사용하는 프로젝트에서 많은 컴포넌트들이 구성되어 있고, 그것들이 첫 페이지 로드 때 사용자에게 모두 전송하게 된다면 지금의 나의 경우처럼 페이지 성능에 엄청나게 영향을 주게 된다.

때문에 lazy 함수를 통해 컴포넌트를 개별 자바스크립트 청크로 분리하는 방법으로 이를 방지해 주는 것이다.

 

React.lazy와 같이 많이 사용되는 Suspense에 대해서도 작성해 보겠다. Suspense는 렌더링이 지연되는 경우, 로딩 화면으로 대체하는 등의 로딩 방식을 설정할 수 있다.  

 

코드를 적용한 모습은 아래와 같다.

import React, { Suspense } from 'react';

const InputDefault = React.lazy(() => import('../library/input/InputDefault'));
// ...

const codeData = [
	{
        id: 34,
        name: 'toggle_ios',
        code: ['', ''],
        component: (
        	<Suspense fallback={renderLoader()}>
            	<IosToggle />
            </Suspense>
        ),
    },
];

export default codeData;
// Before
const datas = codeDatas.filter((item) => {
	return item.name === currentItem;
});

// After
const datas = codeDatas[+currentItem];

기존에 filter로 하던 방식은 모든 데이터를 불러와야 한다는 특징이 있었다. 이 방법은 위에서 언급한 방향성과 맞지 않기 때문에 선택한 컴포넌트의 인덱스 값으로 접근하는 방식으로  변경하였다. 

 

성공적으로 최적화가 완료되었다! 여전히 다른 페이지의 데이터까지 함께 불러와지고 있어 느리지만, 클릭한 컴포넌트만 데이터를 받아오는 것을 확인하였다.

 

나머지 페이지에도 같은 방법으로 최적화를 진행한 결과

아슬아슬하게 2초대로 세이프! 이렇게 총 9초가량을 줄였다.

 

이제껏 프론트 단에서 다량의 데이터를 다루는 프로젝트를 해본 적도 없고, 무엇보다 최적화를 진행해야 한다는 체감을 하지 못했었다. 그러나 이번 프로젝트를 하면서 심각하게 느려지는 로드 시간을 보고 이제껏 머리로만 이해하던 걸 실제로 응용해 보게 되어서 최적화의 필요성과 이를 해결할 수 있는 방안에 대해 심층 깊게 고민해 볼 수 있는 시간이라서 굉장히 뜻깊었다고 생각한다. 

 

사실 이번 블로깅을 하면서 '배움의 자세를 잃지 말아야 한다'는 것을 다시 한번 더 깊게 깨닫게 되었다. 9월에 원티드 프리온보딩을 들으며 현업에서 이미지 최적화 방법에 대해 알게 되어 이번 프로젝트에 바로 적용해 볼 수 있는 기회가 되었고, 컴포넌트 최적화의 경우 똑똑한 나의 팀원이 있었기에 무사히 헤쳐나갈 수 있었다. 항상 많은 지식을 공유해 주시는 멋진 사람들을 본받으며 오늘도 성장한다.

 

📜 출처

 

 

티스토리툴바