분류 전체보기22 [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. [Error]node_modules .pnpm 경로 인식 못 하는 이슈 (임시해결) 에러발생 JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. 이 에러는 TypeScript 프로젝트에서 JSX를 사용할 때 발생한다. TypeScript는 JSX 요소를 해석하기 위해 내부적으로 JSX.IntrinsicElements 인터페이스를 하고, 만약 React와 같은 라이브러리의 타입 정의가 프로젝트에 포함되어 있지 않다면, TypeScript는 JSX 요소의 타입을 결정할 수 없어 이런 에러를 발생시킨다 Cannot find module 'react' or its corresponding type declarations. 이 에러는 'react' 모듈이나 해당 타입 선언 파일(*.d... 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 3 4 5 6 다음
