[사람별_Day4] RBC 파헤치기 1 - Webpack의 CSS 처리

리액트 빅 캘린더(RBC)를 프로젝트에 적용하기 전, 파악 겸 연습으로 개인 파일을 생성했다.

초기 세팅부터 난관이 시작되는데...

협업 시 적용하기 위해 기록해본다.

---

 

진행 상황

1. 리액트 빅 캘린더 설치
2. pnpm dev
3. 오류 : You forgot to add 'mini-css-extract-plugin' plugin

•  'please read' 링크로 들어가보니 'CSS 코드가 포함된 JS 파일 별로 CSS 파일을 생성' 무슨 말??
  • Webpack은 모든 코드(JS, CSS 등)를 번들링해서 하나의 JavaScript 파일로 만듬
  • 하지만 이렇게 하면 CSS가 JS 번들에 포함되어 브라우저에서 로딩할 때 최적화되지 않을 수 있음

 

mini-css-extrant-plugin 적용

 

[리액트 환경] 

아래는 리액트 환경에서 mini-css-extrant-plugin을 적용하는 방법이다.

 

📍작동 방식

• CSS 코드 추출: Webpack이 JS 파일을 처리할 때 import "./style.css" 같은 코드가 있으면
  원래는 이 CSS가 JS 내부에 포함되지만, mini-css-extract-plugin을 사용하면 CSS를 별도의 .css 파일로 분리
• CSS 파일 생성: 번들링이 완료되면 JS 번들과 별개로 .css 파일이 생성됨
• CSS 로드 최적화: 이렇게 하면 브라우저가 CSS를 별도로 로드할 수 있어 JS + CSS를 한 번에 로드하는 것보다 더 효율적

 

📍적용 방법 (React 프로젝트에서 적용)

• 설치

npm install mini-css-extract-plugin --save-dev 

• Webpack 설정 변경 (webpack.config.js)

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()], // 플러그인 추가
};

 

📍react-big-calendar에서 왜 필요할까?

react-big-calendar는 내부적으로 CSS를 사용한다.

하지만 Webpack이 CSS를 처리할 때, mini-css-extract-plugin이 없으면 CSS가 JS 번들 내부에 포함되려고 해서 충돌이 발생한다.

 

따라서 해당 플러그인을 추가하면 RBC 내부 CSS를 별도의 .css 파일로 생성하게 되고, JS 번들과 분리되어 캘린더만의 CSS가 적용된다.

 

그로 인한 효과는

1. 번들 크기 최적화

• JS 로딩과 CSS 로딩이 동시에 진행할 수 있어 성능이 좋아진다.
• JS 로드 이후에 CSS 적용이 아닌, 스타일이 먼저 로드될 수 있음.

🤔JS가 로드되기도 전에 스타일이 먼저 로드되면 CSS가 적용 안 되는 거 아니야?

오히려 더 빠르게 보이게 된다!

JS에 CSS가 포함되어 있을 때는 'JS 로드 -> CSS 적용' 순서이기 때문에 

스타일이 적용되지 않은 HTML 요소가 먼저 보이며, 깜빡이는 현상이 발생할 수 있다.

 

반면 스타일이 먼저 적용되면 지연 없이 화면 구성이 이루어진다.

2. 캐싱 최적화

• 스타일이 변경되지 않는 한 CSS는 브라우저에서 캐싱되고, JS 파일만 새로 받도록 할 수 있다.

3. 스타일 충돌 방지

• RBC 내부에서 사용하는 CSS와 프로젝트에서 직접 정의한 CSS가 충돌할 가능성이 있는데,
  RBC의 CSS를 독립적으로 유지 가능하다.

 

 

[Next.js 환경]

반면 나와 같이 Next.js로 프로젝트를 진행하는 경우에는 한 줄만 추가하면 된다.

import "react-big-calendar/lib/css/react-big-calendar.css";

 

 

왜냐하면 Next.js는 Webpack 설정을 자동 관리하고 CSS 로더가 기본으로 포함되어 있기 때문

• Next.js는 next.config.js 내부에서 Webpack을 자동으로 설정하기 때문에, 기본적인 CSS 처리는 추가 설정 없이 동작한다.
• Next.js는 .css 파일을 import하는 것을 지원하므로, mini-css-extract-plugin을 직접 설정할 필요 없다.

 

그렇다면 import를 어디서 하느냐??

보통 여러 페이지에서 캘린더 CSS를 적용해야 하는 경우, RootLayout에 적용하여 전역 스타일로 지정한다.

하지만 이번 프로젝트의 경우 '캘린더 페이지'에서만 리액트 빅 캘린더를 사용한다.

 

🤔만약, 이런 경우에 RootLayout에 import를 하게 된다면?

캘린더를 사용하지 않는 페이지의 CSS와 충돌 가능성이 있다.

따라서 캘린더 컴포넌트가 포함된 해당 페이지에 import를 해주면 된다.

정상 작동 확인!