컨플릭트를두려워하지말자

마이크로프론트엔드란

각각의 독립적인 팀이 FE모듈을 개발하고, 이를 조합해서 하나의 사용자경험을 제공하는 방식. 

Webpack이 필수적임 ~.~ 

Webpack5 부터 포함되는 Module Federation 플러그인을 사용해서 리모트 모듈을 정의하고, 이를 호스트모듈에서 찾아 쓰도록 한다! 

장점: 

각 팀이 독립적으로 개발하고 배포할 수 있다 (각자의 깃 레포지토리에 업로드 하는 것이 가능함!)

이로인해 다른 모듈과의 의존성 충돌을 줄일 수 있다! 

각 팀이 선호하는 라이브러리나 프레임워크를 사용하는 것이 가능하다 (호스트에서는 리액트,리모트A에선 Angular,B에선 Vue를 사용하는것이 가능)

단점: 

중복  로드가 발생할 수 있음

라이브러리 중복-> 공유 라이브러리(module federation)도구를 사용하여 문제 해결 

네임 스페이스 중복->모듈 번들러(Webpack, Rollup)를 사용해 각 모듈을 독립적으로 번들링 or Web Component사용 or 자바스크림트 IIFE 즉시 호출 함수 표현식을 사용하여 전역변수의 범위를 제한. 

스타일 중복 -> CSS-IN-JS 라이브러리(styled등)를 사용

개발시에는 

리모트 모듈들이 모두 실행된 상태에서 호스트 모듈을 실행해야 정상적으로 작동하고 , 

실제 서버 배포시에는 

각각의 url에 리모트와 호스트가 모두 배포된 상태여야 정상적으로 동작한다. 

공부하면서 알게 된 내용을 조금씩 더 추가할 예정..

https://emotion.sh/docs/typescript

이모션 공식 문서대로 

tsconfig.json 파일 안에 

{
.
.
.
.

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
}

이 부분을 추가하자!

css-in-js 스타일 라이브러리중에 emotion이 코드도 깔끔하고 수정이 쉬워서 자주 사용중인데

프로젝트에 typescript를 도입하니 여기저기 에러가 튀어나온다 ...

번들러랑 바벨 다루는게 더 익숙해져야겠지 ~.~