[모의 면접] 메모이제이션, 레이지로딩, 모듈 번들러

• 메모이제이션
• 레이지로딩
• 모듈 번들러

*모듈번들러는 실제로 사용해 보고 다시 정리할 것(아직 이해 못함*)

---

메모이제이션(리액트)

 
데이터 캐싱을 통한 성능 최적화 기법
 

React.memo

컴포넌트를 캐싱해 불필요한 리렌더링을 방지한다
부모컴포넌트가 리렌더링 될 경우, 자식 컴포넌트의 props가 변경되지 않으면 리렌더링을 방지한다
 

useCallback

함수를 캐싱해 의존성 배열이 변경되지 않으면 동일한 함수를 반환한다
리액트 메모로 리렌더링을 방지할 자식 컴포넌트를 캐싱해도 부모 컴포넌트가 리렌더링 될 경우 자식 컴포넌트로 전달되는 함수도 재생성되므로 자식 컴포넌트의 리렌더링 방지를 위해 사용된다
 

useMemo

값의 계산을 메모이제이션해 의존성 배열이 변경되지 않는 한 동일한 값을 반환한다
큰 계산식 등의 함수를 리렌더링마다 재생성하게 될 경우, 성능 저하의 원인이 될 수 있기 때문에 캐싱하여 사용할 수 있다
 
 

자세한 내용은 TIL 메모이제이션에 정리해 둠

---

레이지 로딩 (Lazy Loading)

필요 시점까지 리소스(이미지, 비디오, 컴포넌트 등)를 지연시켜 로드하는 기법,
불필요한 자원 사용을 최소화하고 초기 로딩 속도를 개선할 수 있다
레이지 로딩 속성을 걸어둔 컴포넌트와 이미지는 뷰포트 접근 전에는 로딩되지 않는다.
 

Next.js SSR과 레이지 로딩

SSR은 서버에서 동적으로 페이지를 생성하는 방식으로 초기 로딩속도를 개선하지만
만약 해당 페이지에 용량이 큰 데이터(이미지, 비디오, 비동기 데이터 페칭 등)가 포함될 경우, 속도 저하의 원인이 될 수 있기 때문에 레이지 로딩을 사용하여 동적으로 로드하면  초기 속도 개선에 도움이 된다
 

정리

동적으로 리소스를 로드함으로 초기 로딩 속도를 개선하는 방법

---

 

모듈 번들러(Module bundler)

웹 개발에서 여러 개의 모듈(파일)을 하나의 번들(bundle)로 묶어주는 도구
웹을 구성하는 JavaScript, CSS, 이미지 등의 자원들을 관리하고 최적화된 형태로 묶어서 제공한다

모듈 = 파일
번들 = 묶음(뭉치)
모듈 번들러 = 파일을 하나의 묶음으로 묶어주는 도구

 
 

주요 모듈 번들러

1. Webpack
   • 특징: 가장 널리 사용되는 정적 모듈 번들러
   • 기능: 모듈 간의 의존성 분석을 통해 하나 이상의 번들(bundle)로 묶어서 최적화된 정적 자원(JavaScript 파일, CSS 파일, 이미지 등) 생성
   • 용도: 웹 애플리케이션의 성능을 향상하고 개발과 배포 과정을 간소화하는 데 주로 사용됨
2. Parcel
   • 특징: 간단한 설정으로 빠르게 시작할 수 있는 모듈 번들러
   • 기능: 설정 없이도 다양한 파일을 자동으로 번들링 할 수 있어 초기 설정이나 복잡도를 줄이는 데 유리함
   • 용도: 초보자부터 전문가까지 다양한 사용자에게 적합하고, 빠르고 간편한 사용을 지향함
3. Rollup
   • 특징: 주로 라이브러리나 패키지 개발에 사용되는 모듈 번들러
   • 기능: 트리 쉐이킹(Tree Shaking) 기능을 통해 사용되지 않는 코드를 제거하고 최적화된 번들을 생성
   • 용도:  ES6 모듈을 기반으로 한 프로젝트에 적합하며, 라이브러리나 패키지를 개발할 때 용이한 기능을 제공함

 
주요 기능
 

• 모듈 관리

기능이나 역할에 따라 분리해 관리하는 것(로그인, 회원가입 등)
 

• 의존성 해결 

import나 require 등의 구문으로 참조 파일을 인식해 모듈의 의존관계에 따라 필요 자원을 함께 번들에 포함시켜 한꺼번에 로드할 수 있게 하는 것 (JS파일이 다른 JS 파일을 참조하거나 CSS 파일을 참조할 경우(스타일))
 

• 로더(Loader)

다양한 파일 형식을 원하는 형식으로 변환하고, 모듈화 하기 위한 것 자바스크립트 외에도 CSS, 이미지, 폰트 등을 모듈화 하여 관리할 수 있다.

모듈화
특정 기능, 관련된 기능들을 하나의 독립적인 단위로 만드는 것

 

 
1. CSS 파일을 웹에서 사용할 수 있도록 자바스크립트 모듈로 변환하고 스타일 적용

// 웹팩 설정 예시
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

 
style-loader : CSS 파일을 번들에 삽입하고, JavaScript 코드에서 해당 스타일을 동적으로 추가하여 사용할 수 있다(브라우저에서 동적으로 스타일을 적용하게 만들어줌)
 
css-loader : CSS 파일을 모듈로 변환하고 JavaScript에서 import 하여 사용할 수 있게 한다

 

정리

CSS로더로 CSS파일을 모듈처럼 다루고 스타일로더로 브라우저에 CSS를 적용한다
 

 
2. 이미지 파일을 웹에서 사용할 수 있는 형태로 변환하고, 작은 이미지는 데이터 URI로 번들링 하여 적용

// 웹팩 설정 예시
module: {
  rules: [
    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 8192, // 8KB 이하 이미지는 데이터 URI로 번들링
        name: 'images/[name].[ext]' // 파일 이름 및 경로 설정
      }
    }
  ]
}

 
 

• 플러그인(Plugin)

추가적인 기능을 제공해, 번들링 과정에서 코드 최적화, 번들 사이즈 분석, 환경 변수 주입 등을 할 수 있다
 

HtmlWebpackPlugin 플러그인은 HTML 파일을 번들에 추가하고, TerserPlugin은 JavaScript 코드를 압축하는 작업을 수행한다

const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 웹팩 설정
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      }
    }),
    new TerserPlugin({
      // 추가적인 설정 옵션
    })
  ]
};

 

• 코드 스플리팅(Code Splitting)

큰 규모의 애플리케이션을 여러 개의 작은 번들로 분할하여 초기 로딩 속도를 개선하는 것
웹팩 설정 또는 레이지 로딩등을 사용해 구현할 수 있다
 

정리

모듈 번들러는 주로 웹팩을 사용하며
필요한 모듈(파일)만 번들링(하나로 묶음)으로 초기 로딩 속도를 개선할 수 있고,
의존성관리를 통해 불필요한 자원 사용을 줄인다(사용하지 않는 모듈이나 함수는 번들에서 제외)
코드를 모듈단위로 관리하기 때문에 코드 재사용성과 유지보수에 유리하다
플러그인과 로더로 개발 시 추가 기능을 쉽게 적용할 수 있게 해 준다