말랑말랑제리스타일

Webpack의 Module Federation Plugin을 이용한 마이크로 프론트엔드 서비스를 구현해 봤습니다.간단한 컨테이너 앱에 마이크로 앱 두 개를 보여주는 형식으로 만들었기 때문에 Webpack의 Module Federation Plugin을 이용한 마이크로 프론트엔드 구현 방식을 이해하는 목적으로 사용해 주시면 좋을 것 같네요.Webpack과 마이크로 프론트엔드란?자 일단 마이크로 프론트엔드와 Webpack이 뭔지부터 간단히 이해를 해보죠.먼저 마이크로 프론트엔드는 프론트엔드의 소스를 여러 개로 분할해서 서비스하는 방식입니다.여러 사람이 같이 운영하는 프론트엔드 화면의 개발에 상당히 유용하겠죠.Webpack은 자바스크립트 모듈 중 하나로 여러 개의 파일을 하나로 병합해서 컴파일해 주는 모듈입..

리액트 5.0 이상 버전 사용 시 특정 npm 모듈에서 "BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default " 에러가 발생했습니다. 제 경우는 GIFEncoder 모듈에서 webpack 에러가 발생했는데요. 가장 간단한 조치 방법을 알려드리겠습니다. 모듈의 버전을 바꿔서 webpack 에러 조치하는 방법 리액트 버전이 올라감에 따라 해당 노드 모듈도 신버전이 나왔을 수 있습니다. 이런 경우 해당 노드 모듈의 버전을 webpack 5 이상이 적용된 새로운 버전으로 업그레이드해주면 에러가 발생하지 않겠죠. 하지만 GIFEncoder.js를 포함해 대부분의 노드 모듈이 webpack 5 이상에 대한..