Webpack 5로 ReactJS 프로젝트 설정하기: 폰트 파일 에러 해결 경험담

Allini는 Create React App(CRA)을 사용하지 않고, 직접 Webpack과 Babel을 설정해보기로 했습니다.
회사에서 Webpack을 설정해본 경험이 있어, 처음에는 그 기억에 의존해 작업을 시작했어요.

그런데 프로젝트 진행 도중 Pretendard-Black.subset.woff2 및 Pretendard-ExtraBold.subset.woff2 폰트 파일을 찾을 수 없다는 에러가 발생했습니다.

 

이 에러를 해결하기 위해 파일 위치, font.css의 경로, 파일명, 빌드 캐시 삭제 등 다양한 방법을 시도했지만,

문제는 여전히 해결되지 않았고..😢

제가 작성한 Webpack 설정 자체에 문제가 있는 것이 아닌가 의심하게 됐습니다.

 

Webpack 설정 점검: file-loader는 잘 등록했는데...

에러가 발생한 이유를 찾기 위해 webpack.config.js 파일에서 파일 로더 설정을 확인했습니다.

file-loader를 아래와 같이 설정해두었기에, 문제가 없을 것이라고 생각했었죠..! 

{
  test: /\.(png|jpe?g|gif|webp)$/i,
  use: [
    {
      loader: "file-loader",
      options: {
        name: "[path][name].[ext]",
      },
    },
  ],
}

 

그렇기에 이 설정에는 아무런 문제가 없다고 판단했고, 왜 이런 문제가 발생하는지 도저히 이해가 되지 않았습니다.

 

엉뚱한 고민: MSW가 문제인가?

이쯤 되니 MSW(Mocking Service Worker)가 폰트 파일조차 가로채는 것이 아닌가 하는 엉뚱한 생각까지 하게 되었어요..!

MSW는 백엔드가 구축되기 전에 프론트엔드 UI 개발을 위해 사용 중이었습니다.

하지만 공식 문서를 읽어본 결과, MSW는 정적 리소스(예: 폰트 파일)에는 영향을 주지 않는다는 것을 확인했습니다.

MSW가 폰트 파일 요청을 가로채지 않는 한, 이 문제는 MSW와 관련이 없을 가능성이 높았습니다.

 

진짜 문제: Webpack 버전 차이

고민을 거듭하던 중, 혹시 내가 알고 있던 Webpack 설정과 현재 사용하는 버전 간에 차이가 있는 것은 아닐까 하는 생각이 들었습니다.

이 생각이 바로 정답이었죠!!!  ᕦ( ᐛ )ᕡ

 

공식 문서를 잘 봐야해요!!

 

Webpack 5에서는 파일 로더 설정이 간소화되었고, 더 이상 file-loader를 사용할 필요가 없었습니다.

Webpack 5에서는 다음과 같이 설정합니다:

{
  test: /\.(jpg|jpeg|gif|png|svg|eot|woff|ttf)$/i,
  type: "asset/resource",
}

 

Webpack 5에서는 file-loader와 url-loader등을 더 이상 사용하지 않고, asset/resource, asset/inline, 그리고 asset을 통해 파일을 처리합니다.

• asset/resource: 별도의 파일을 내보내고 URL을 반환합니다. (file-loader 대체)
• asset/inline: 데이터 URL로 내보내기 (url-loader 대체)
• asset: 자동으로 데이터 URL과 파일 내보내기 중 선택하며, 기존의 크기 제한 설정도 포함됩니다.

더 자세한 내용은 참고했던 Webpack 공식 문서 링크를 남겨둘게요!!

 

학습 방식에 대한 반성, 그리고 앞으로의 계획

이전에 TOAST Editor가 React 17 버전까지만 지원된다는 이슈를 겪었던 적이 있습니다.

부끄럽지만 그때도 이전 지식에만 의존했던 탓에, 사용된 기술 스택에 대해 충분히 검토하지 않았던 경험이 있었습니다.

이번 Webpack 설정 문제를 겪으면서, 다시 한 번 저의 학습 방식에 대해 돌아보게 되었습니다..!

Webpack 버전을 올린 후에도 다른 작업에 급급해 중요한 변화를 미처 확인하지 않았던 것이 원인이었으니까요.

 

Allini 프로젝트는 팀원들의 회사 업무로 인해 잠시 중단되었었지만, 다시 시작하게 되었습니다!

현재는 디자이너님이 요청한 수정된 UI를 빠르게 적용하는 것이 우선순위가 높다고 판단하여, 이 부분부터 작업을 진행하고 있습니다. 

그렇기에 Webpack 5 버전에 맞춘 전체적인 설정 수정은 프로젝트가 완성된 후에 진행하기로 결정했습니다.

우선은 프로젝트의 완성도를 높이는 데 집중하고, 작업 중 발생하는 문제들은 하나씩 해결해 나갈 계획입니다.

 

프로젝트가 마무리되면, CSS 파일을 개별적으로 추출하기 위한 MiniCssExtractPlugin 등의 리팩토링도 진행할 예정입니다.

이 과정에서 작성된 최종 코드도 나중에 블로그에 공유할 예정이니, 기대해 주세요! 💪

 

📃 참고 문헌

Webpack Asset Modules 공식문서 원문

Webpack Asset Modules 공식문서 번역