webpack5 [React] image 파일 불러오기 들어가며 프로젝트 초기 설정에서 React와 함께 이미지를 불러오는 데 문제가 발생하는 것은 종종 겪게 되는데, 이러한 문제를 해결하기 위해 몇 가지 주요 원인과 해결 방법을 정리해 보려고한다. 이슈 발생 배경 React 프로젝트를 CRA(create-react-app) 없이 npm init으로 시작하고, webpack과 babel 등을 직접 설정하는 과정에서 이미지를 제대로 불러오지 못하는 문제가 발생. 주요 문제 원인 환경 변수 설정: public 폴더가 webpack에 의해 직접 관리되지 않음으로 인해, 이 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수의 사용이 필요. loader 미설치: 이미지와 같은 정적 자원을 처리하기 위해 file-loader 또는 url-loader 같은 webpa.. 2024. 2. 7. [Error]ModuleFederation Shared module is not available for eager consumption(웹팩 모듈 페더레이션과 즉시 로딩: react 모듈 사용 시 발생하는 오류 해결하기) 에러 발생 애플리케이션 개발 중, 웹팩의 모듈 페더레이션 기능을 사용하여 react 모듈을 공유하려 할 때 다음과 같은 오류 메시지가 나타났다. Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react 에러 발생 소스 이 오류는 웹팩의 ModuleFederationPlugin을 사용하여 마이크로프론트엔드 아키텍처에서 공유 모듈(react 및 react-dom 등)을 설정할 때 발생했다. 특히, react 모듈을 애플리케이션의 다른 부분에서 "즉시(eagerly)" 사용하고자 할 때 이 문제가 나타났다. 웹팩 설정 예제: plugins: [ new ModuleFederation.. 2024. 2. 4. [MFA] webpack.config.js 들어가며 채팅 플랫폼 개발을 진행하면서, 직접 webpack.config.js를 설정해보고, 처음엔 Webpack 설정이 그저 여러 설정들의 모임처럼 보였지만, 실제내 손으로 하나하나 설정해보니 예상외로 여러 시행착오를 겪었다. Webpack의 각 옵션들이 실제로 어떤 역할을 하는지, 왜 필요한지를 명확하게 이해 하기위해 이번 글에서는 Webpack의 주요 설정 옵션들을 하나씩 깊이 있게 살펴보려고 한다. Entry(엔트리) 엔트리는 Webpack이 프로젝트를 '빌드'하는 시작이다. 이 설정은 Webpack에게 어떤 파일부터 모듈들을 조합하여 번들을 하기위한 진입점 이다. entry: './src/index.js' 여기서 './src/index.js'라는 경로는 Webpack이 작업을 시작할 첫 파일을 .. 2024. 1. 31. [MFA] 번들러란? 번들러란? 번들러는 웹 애플리케이션을 구성하는 다양한 리소스(JavaScript, CSS, 이미지 파일 등)를 모아서 하나 또는 여러 개의 파일로 합치는 도구입니다. 예를 들어, 웹 애플리케이션에서 수많은 JavaScript 파일을 사용한다고 가정해보겠습니다. 이러한 파일들을 개별적으로 불러오면, 많은 네트워크 요청으로 인해 성능 저하와 네트워크 병목 현상이 발생할 수 있습니다. 번들러는 이러한 파일들을 하나로 합쳐서 네트워크 요청의 수를 줄이고, 빠른 로딩 시간과 효율적인 리소스 관리를 가능하게 합니다. 또한, 개발자는 코드를 모듈 단위로 관리할 수 있어 가독성과 유지보수성이 향상됩니다. 번들러의 장점 성능 향상: 여러 파일을 하나로 합쳐서 네트워크 요청의 수를 줄임. 모듈화: 코드를 모듈 단위로 관리.. 2024. 1. 28. 이전 1 2 다음
