# Module Federation

ckstn0777

Overview 저번 시간에 Module Federation 글에 연장선으로 이번 시간에는 Monorepo에 대해 알아보도록 하겠습니다. 모노레포 또한 대규모 웹 애플리케이션 개발 시 자주 언급되는 방법론인거 같습니다. 그만큼 토스, 라인 등 여러 회사에서 채택되어 사용되고 있습니다. 저는 대규모 애플리케이션을 경험할 일이 없었고, 지금 알아보고자 하는건 모노레포로 설계하고 개발하는 것은 어떨지 알아보는 단계에서 작성한 글입니다. 다소 부족한 글이지만 그냥 아는대로 작성해보도록 하겠습니다. Monorepo 란? 모노레포를 설명하기 위해 모놀리식? 멀티레포? 와 같이 비교해서 알아보면 좋을 거 같습니다. ![

ckstn0777

Overview 최근에 우연찮게 Micro Frontends에 대해 알아볼 기회가 생겼습니다다. 사실 그 전까지는 알아볼 필요성을 못느꼈다고 봐야 될 거 같습니다. 이전 회사에서 제가 맡은 서비스가 대규모인것도 아니었고, 개인적인 공부나 실습에서도 사용할 필요가 없었기 때문입니다. Webpack 5 Module Federation 에 대해서도 얼핏 듣긴 했었지만 제대로 알아보게 된 것도 이번이 처음입니다. 그래서 이번 글은 틀리거나 주관적인 내용이 있을 수 있으니 참고해서 봐주셨으면 좋겠습니다. 대규모 웹 애플리케이션 어떤 서비스가 대규모 웹 애플리케이션일까 대규모 웹 애플리케이션이란 어떤 것을 말하는 걸까요? Micro Frontends에 대해 공부하다보니 여러 회사의 사례를 찾을 수 있었습니다. NHN Dooray 서비스 BZNAV 서비스 Flex (플렉스팀) 저는 여기서 한가지 공통점을 찾을 수 있었습니다. 서비스가 정말

clevekim

예제 React Module Federation을 이용한 Lazy Loading 예제를 통해 이를 더욱 자세히 알아보겠습니다. Host 애플리케이션 Host 애플리케이션에서는 다음과 같이 webpack.config.js 파일을 설정합니다. 위의 설정에서 name은 현재 애플리케이션의 이름을, remotes는 현재 애플리케이션이 사용할 원격 애플리케이션의 정보를, shared는 원격 애플리케이션과 공유할 모듈을 설정합니다. Remote 애플리케이션 Remote 애플리케이션에서는 다음과 같이 webpack.config.js 파일을 설정합니다. 위의 설정에서 name은 현재 애플리케이션의 이름을, filename은 현재 애플리케이션이 생성할 파일 이름을, exposes는 현재 애플리케이션이 제공하는 모듈을 설정합니다. Host 애플리케이션에서 Remote 애플리케이션의 모듈 사용하기 Host 애플리케이션에서는 다음과 같이 Lazy Loa

clevekim

이 문서에서는 React Module Federation이 무엇인지와 함께, 이를 이용한 Lazy Loading 예제를 설명합니다. React Module Federation이란? React Module Federation은 웹에서 다양한 JavaScript 모듈들을 독립적으로 개발하고, 이를 하나의 애플리케이션으로 통합하는 기술입니다. 이를 통해 각 모듈은 독립적으로 개발될 수 있고, 이를 하나의 애플리케이션으로 통합할 때 불필요한 중복 코드를 제거하고, 서로 다른 모듈들 간의 통신을 통해 더욱 효율적인 개발이 가능해집니다. Lazy Loading Lazy Loading은 필요한 자원이 필요한 시점에 로드되는 기술입니다. 이를 통해 초기 로딩 시간을 줄이고, 필요한 자원만을 로드하여 네트워크 속도를 향상시킬 수 있습니다. 예제 React Module Federation을 이용한 Lazy Loading 예제를 통해 이를 더욱 자세히 알아보겠습니다.

ksh5324

Module Federation module federation이란 모듈 페더레이션이란 Zack jackson이 개발한 javascript의 아키텍처입니다. 이 아키텍처를 사용하면 두 개의 서로 다른 애플리케이션 코드베이스 간에 코드와 종속성을 공유할 수 있습니다. 다시 말해 모놀리식 아키텍처의 문제점을 해결할 수 있습니다. 모놀리식 아키텍처의 문제점 서로 상당히 의존하고 있기 때문에 feature들 사이에 문제가 발생했을 때, 이를 의존하고 있는 다른 feature 또한 오류를 발생시킵니다. 또 만약 새로운 것을 추가 혹은 수정을 하면 의존성을 가지는 다른 feature에 오류를 불러 일으킬 수 있습니다. 뿐만 아니라 빌드 및 배포에도 어려움이 있습니다. 만약 이미 배포한 프로덕에 조그마한

jonghunbok

원문: When should you leverage Module Federation, and how? 모듈 페더레이션(Module Federation)을 언제, 왜, 어디서 활용해야 하는지에 관해 기술의 창안자의 생각과 패턴을 공유합니다. 웹팩(Webpack)의 페더레이션(Federation)은 적절히 사용될 경우 굉장히 유용합니다. 어려운 점은 기술을 어디에 어떻게 활용하는지에 대한 정보가 많지 않다는 것입니다. 이 기술을 2년 가까이 다루어 오면서, 대규모 애플리케이션을 개발할 때 사용되는 몇 가지 패턴과 고려해야 하는 점을 발견했습니다. 본 글에서는, 프런트엔드에서의 모듈 페더레이션에 집중할 것입니다. 백엔드에 페더레이션을 적용하는 것은 완전히 다른 이야기입니다. 언제 사