번들링과 코드스플리팅

1.번들링이란?

번들링은 웹 애플리케이션의 자바스크립트 파일, CSS, 이미지 등을 하나의 파일로 묶어주는 과정입니다. 일반적으로 Webpack, Rollup, Parcel과 같은 번들러를 사용하여 코드와 리소스를 결합합니다. 번들링은 애플리케이션의 다양한 모듈을 하나의 파일 또는 몇 개의 파일로 병합하여 네트워크 요청을 줄이고, 로딩 시간을 개선합니다.

번들링의 주요 특징

• 네트워크 요청 감소: 모든 코드를 하나의 파일로 합치면 브라우저가 여러 번 요청할 필요가 없어 로딩 시간이 빨라집니다.
• 의존성 관리: 번들러는 코드의 의존성을 분석하여 필요한 모듈만 포함시킵니다.
• 최적화 및 압축: 번들링 과정에서 코드를 최적화하고 압축하여 파일 크기를 줄일 수 있습니다.

예시

• Webpack: 가장 많이 사용되는 번들러로, 모듈의 의존성을 분석하고 최적화하여 하나의 번들 파일을 생성합니다.
• Parcel: 설정이 거의 필요 없는 번들러로, 빠르게 번들링할 수 있어 초기 프로젝트 설정에 유용합니다.

 

2. 코드 스플리팅이란?

코드 스플리팅(Code Splitting)

코드 스플리팅은 애플리케이션의 코드베이스를 작게 나누어 필요한 시점에 로드되도록 하는 기술입니다. 번들링이 모든 코드를 하나로 합치는 반면, 코드 스플리팅은 필요한 부분만 로드하도록 나눕니다. 이를 통해 초기 로딩 시간을 줄이고, 사용자가 애플리케이션을 사용할 때 필요한 리소스만 로드할 수 있습니다.

코드 스플리팅의 주요 장점

• 초기 로딩 시간 감소: 애플리케이션이 처음 로드될 때 필요한 코드만 불러와서 사용자 경험을 향상시킵니다.
• 리소스 최적화: 사용자가 접근하지 않은 기능의 코드가 처음부터 로드되지 않아 네트워크 자원을 효율적으로 사용합니다.
• 유연한 로드: 사용자가 특정 기능을 요청할 때 필요한 코드를 비동기로 로드할 수 있어, 메모리 사용을 줄이고 성능을 개선할 수 있습니다.

코드 스플리팅의 방법

• 동적 import: 자바스크립트의 import() 문법을 사용하여 필요한 시점에 모듈을 불러옵니다.
• React.lazy: React 컴포넌트 레벨에서 동적으로 컴포넌트를 로드하여 코드 스플리팅을 구현할 수 있습니다.

 

 

• React.lazy와 Suspense를 이용한 코드 스플리팅

 

React는 React.lazy와 Suspense를 사용하여 컴포넌트 수준에서 쉽게 코드 스플리팅을 구현할 수 있도록 지원합니다. React.lazy를 사용하면 컴포넌트를 필요할 때만 로드할 수 있으며, Suspense는 로딩 중 상태를 관리해 줍니다.

 

React.lazy는 컴포넌트를 지연 로딩하는 데 사용됩니다. 해당 컴포넌트가 필요할 때만 로드하여 초기 번들의 크기를 줄입니다.

import React, { Suspense } from 'react';

// Lazy load the component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      {/* Suspense를 사용하여 로딩 상태를 관리 */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

 

• React.lazy(() => import('./LazyComponent')): LazyComponent를 지연 로딩하여 필요할 때만 불러옵니다.
• Suspense: 로딩 중일 때 보여줄 대체 UI를 설정합니다. fallback 속성으로 로딩 상태의 UI를 지정할 수 있습니다.  로딩 중인 컴포넌트를 대체할 콘텐츠를 지정하여, 사용자가 로딩 중임을 알 수 있게 합니다.  로딩 상태를 UI에서 쉽게 관리할 수 있어, 사용자 경험을 개선할 수 있습니다.

과제 코드:

import React from 'react';
import './App.css';
import TestComponent from './TestComponent';

/*
- **기본 요구 사항**:
    1. **동적 로딩 적용**:
        1. 주어진 기본 코드를 `React.lazy`와 `React.Suspense`를 활용하여 컴포넌트를 비동기적으로 로드하도록 변경합니다.
        2. `TestComponent`를 `React.lazy`를 사용하여 동적으로 로드합니다.
        3. `App` 컴포넌트에서 `TestComponent`를 로드할 때 `React.Suspense`로 감싸고, 로딩 상태를 나타내는 `fallback` UI를 제공합니다.
    2. **로딩 상태 확인**:
        1. 최적화 적용 후, 브라우저에서 애플리케이션을 실행하고 `TestComponent`가 로드되기 전 `fallback` UI가 정상적으로 표시되는지 확인합니다.
        2. `TestComponent`가 로드된 후, 해당 컴포넌트의 내용이 정상적으로 렌더링되는지 확인합니다.
*/

function App() {
  return (
    <div className="App">
      <h1>
        lazy와 Suspense
        <br /> 사용해보기
      </h1>
      <TestComponent />
    </div>
  );
}

export default App;

import React, { lazy, Suspense } from 'react';
import './App.css';
//import TestComponent from './TestComponent';

const TestComponent = lazy(() => import('./TestComponent'));
/*
- **기본 요구 사항**:
    1. **동적 로딩 적용**:
        1. 주어진 기본 코드를 `React.lazy`와 `React.Suspense`를 활용하여 컴포넌트를 비동기적으로 로드하도록 변경합니다.
        2. `TestComponent`를 `React.lazy`를 사용하여 동적으로 로드합니다.
        3. `App` 컴포넌트에서 `TestComponent`를 로드할 때 `React.Suspense`로 감싸고, 로딩 상태를 나타내는 `fallback` UI를 제공합니다.
    2. **로딩 상태 확인**:
        1. 최적화 적용 후, 브라우저에서 애플리케이션을 실행하고 `TestComponent`가 로드되기 전 `fallback` UI가 정상적으로 표시되는지 확인합니다.
        2. `TestComponent`가 로드된 후, 해당 컴포넌트의 내용이 정상적으로 렌더링되는지 확인합니다.
*/
function App() {
  return (
    <div className="App">
      <h1>
        lazy와 Suspense
        <br /> 사용해보기
      </h1>
      <Suspense fallback={<h1>로딩중...</h1>}>
        <TestComponent />
      </Suspense>
    </div>
  );
}

export default App;