# Micro Frontend

17개의 포스트
post-thumbnail

Turborepo로 Monorepo 개발 경험해보기

저번 시간에 Module Federation 글에 연장선으로 이번 시간에는 Monorepo에 대해 알아보도록 하겠습니다. 모노레포 또한 대규모 웹 애플리케이션 개발 시 자주 언급되는 방법론인거 같습니다. 그만큼 토스, 라인 등 여러 회사에서 채택되어 사용되고 있습니다.

2023년 6월 8일
·
0개의 댓글
·
post-thumbnail

Vite + Module Federation 으로 Micro Frontends 경험해보기

최근에 우연찮게 Micro Frontends에 대해 알아볼 기회가 생겼습니다다. 사실 그 전까지는 알아볼 필요성을 못느꼈다고 봐야 될 거 같습니다. 이전 회사에서 제가 맡은 서비스가 대규모인것도 아니었고, 개인적인 공부나 실습에서도 사용할 필요가 없었기 때문입니다.

2023년 6월 5일
·
0개의 댓글
·
post-thumbnail

[WEB knowledge] Micro Frontend

Micro Frontend

2022년 12월 2일
·
0개의 댓글
·
post-thumbnail

마이크로프론트엔드 with Frontend Frameworks

Micro Frontend 마이크로 프론트엔드 아키텍쳐를 잘 활용하기 위해서 몇가지 지켜야하는 필수사항들이 있다. 컨테이너 외의 프로젝트들끼리는 공유되는게 없어야한다. 함수/객체/클래스 상태값(ex.redux,context) 라이브러리 컨테이너와 하

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

마이크로 프론트엔드 without Frontend Frameworks 2

지난번에 이어서 마이크로 프론트엔드를 좀 더 파헤쳐 보자. 저번에 구현 부분을 네트워크탭에서 확인해보면 cart와 products에서 동시에 faker 모듈을 분리해서 불러오고 있는것을 볼 수 있다. 하지만 faker은 중첩된 모듈이고 번들 사이즈도 매우 큰편이기에 효

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

마이크로 프론트엔드 without Frontend Frameworks

마이크로 프론트엔드 아키텍쳐를 리액트를 가지고 실제로 적용시켜 보며 개념을 정리해보자.모놀로식 애플리케이션을 여러개의 조금한 애플리케이션으로 나누어 개발하는 것을 말한다. 일반적으로 마이크로 서비스 아키텍쳐 개념을 프론트엔드 애플리케이션에 접목시켰다고 이해하면 쉬울 것

2022년 11월 16일
·
0개의 댓글
·

마이크로 프론트엔드 정복기

글을 시작하며.. 과거에서부터 웹 프론트엔드 기술은 요구되는 기능의 양이 방대해지면서 다양하게 진화를 거듭해왔다. 이를테면 여러 모듈을 번들링하고 ECMAScript를 지원하지 않는 브라우저를 위해 코드 트랜스파일링을 진행해주는 바벨 플러그인을 사용할 수 있는 웹팩의

2022년 11월 14일
·
0개의 댓글
·
post-thumbnail

single-spa 시작하기

single-spa cli를 설치한다.글로벌에 설치로컬에 설치글로벌에 설치했을 경우로컬에 설치했을 경우

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

Module Federation

리액트 프로젝트를 모놀릭스 아키텍처에서 micro-frontend로 바꿔보자

2022년 5월 26일
·
0개의 댓글
·
post-thumbnail

Module-federation에서 webfontloader은 어떻게 적용 해야 할까?

모든 패밀리 사이트의 폰트는 process.env.VUE_APP_COMM_HOSTNAME + "/styles/fonts/\_font.css" 으로 일관성있게 적용blink현상 없이 폰트 적용(폰트 로더가 먼저 로딩)webfontloader.tsremote package

2022년 4월 25일
·
0개의 댓글
·
post-thumbnail

Module-federation에서 host와 remote에 같은 이름에 CSS 가 있으면 어떻게 적용될까?

remote에서 공유된 CSS가 우선순위를 가짐.hostmain.tsremote webpack.config.js

2022년 4월 20일
·
0개의 댓글
·

Module-federation에서 host와 remote에 같은 이름에 SCSS Variable이 있으면 어떻게 적용될까?

각자 독립된 scope에서 서로 다르게 반영되어 동작함.remote \_variables.sasshost\_variables.sasswebpack.config.js(remote, host 양측 동일) webpack에 의해 번들링될때 scss의 variables($p

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

moduleFederation *CSS파일 host공급방법 3가지

types/types.d.tsmain.ts

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

Vue3-WebPack5 Module Federation (With Hot Reload)

webpack5 module Federation 2020년 10월에 릴리즈한 webpack5 스펙에 module Federation이 추가 되었다. 실무에 적용해 보고 그 과정을 공유해 보자.

2022년 4월 4일
·
0개의 댓글
·
post-thumbnail

(번역) Module Federation을 언제, 어떻게 사용해야 하나요?

원문: When should you leverage Module Federation, and how? 모듈 페더레이션(Module Federation)을 언제, 왜, 어디서 활용해야 하는지에 관해 기술의 창안자의 생각과 패턴을 공유합니다.

2022년 3월 26일
·
0개의 댓글
·
post-thumbnail

Micro-Frontend 구축기 (1)

Micro-Frontend를 구축하게 된 이유를 다룹니다.

2021년 12월 8일
·
4개의 댓글
·
post-thumbnail

[Day-2] Micro Frontends in Next.js

요즘 몇년 사이의 Backend 트랜드인 Micro Services의 Frontend 버전을 만든 것에 대한 글

2021년 4월 20일
·
0개의 댓글
·