모듈페더레이션을 깊게(but 얕게) 알아보자

ref - https://maxkim-j.github.io/posts/module-federation-shared

Module Federation 이모저모

  • apollo GraphQL 의 federation 개념을 js 에 적용한 것이라고 한다.
  • apollo GraphQL 의 federation 이란? 여러 GraphQL 마이크로서비스의 GraphQL schema 를 조합하여 하나의 큰 GraphQL schema 로 만드는 방식
  • 웹팩에서 지원해주기 시작했고, 현재는 vite, rollup 도 플러그인이 개발 되었다.

다른 대안은 없을까?

  • 빌드타임 통합은?
    • 느리고 비효율적이며 확장가능하지 않다. 결국 의존성이 생긴다.
  • iframe 방식은?
    • 하나의 앱처럼 완벽히 합쳐지지는 않는다. 결국 한계점이 있다.
  • 서비스 규모가 커질수록 작은 변경에도 영향 범위가 커질 수 있으며 영향 범위 예측도 점점 복잡하고 어려워진다. Module Federation은 컨테이너 빌드를 따로 하므로 빌드 시간, 영향 범위, 로딩 시간 측면에서 유리하다.

모듈페더레이션은 전방향적 성격(Omnidirectional)을 가진다.

  • 모듈 페더레이션 설정값의 remote 와 expose 속성은 배타적이지 않다.
  • 즉, 하나의 마이크로앱은 리모트 앱이 될 수도 있고 될 수도 있음
  • 순환참조도 가능하다.

Shared Dependency(공유 의존성)으로 앱간 의존성을 공유하자

  • 런타임에서 마이크로앱 간 많이 쓰이는 의존성에 대해 해당 의존성을 런타임에 딱 한번만 로드하면 됨. 따라서 모든 마이크로앱에서 해당 의존성을 가질 필요가 없다.
  • 앱 전역에서 단일 인스턴스 보장가능 (싱글톤 패턴)
    • 런타임에서 앱이 합체되는 마이크로프론트엔드에서는 배포/개발은 결국 따로하지만 브라우저는 하나의 앱임. 백엔드의 마이크로서비스와 다르게 완전히 격리된 환경에서 각 마이크로앱이 구동되는게 아님!
    • 앱 최상위에서 Context Provider를 두고 같이 공유해야하는 경우 사용 가능
  • 다만 공유 의존성을 사용하는 경우 트리쉐이킹은 불가능하며 이를 지원할 계획이 없다고 한다.

정말 트리쉐이킹이 안되나욧..? 🥺

ref - https://medium.com/@marvusm.mmi/webpack-module-federation-think-twice-before-sharing-a-dependency-18b3b0e352cb

되긴됩니다

 // 이렇게하면 트리쉐이킹 X
import { CircleIcon } from '@patternfly/react-icons'

// 이렇게하면 트리쉐이킹 O
import CircleIcon from '@patternfly/react-icons/dist/dynamic/icons/circle-icon'

공유 의존성 설정도 아래와 같이

new ModuleFederationPlugin({
    shared: {
       '@patternfly/react-icons/dist/dynamic/icons/circle-icon': {
            version: '^5.0.0-prerelease.9'
        },
    }})

css 단위 - rem 과 em , %의 정리

왜이리 헷갈릴까 😮‍💨

rem

  • 무조건 root font-size에 영향받음

  • 그래서 root font-size를 62.5%로 픽스해놓은 경우가 많음

    • 이렇게 되면 무조건 1.6rem -> 16px 요런 식으로 편하게 바뀌어서

  • 그런데 사용자가 브라우저의 root fontsize 를 바꿀수도 있고 브라우저마다 root fontsize 가 달라질 수 도 있음

  • 아무튼 루트 글꼴 크기를 변경하는 사람들을 위해서는 px 이 아니라 rem 을 사용해야한다. px 은 루트 글꼴 크기 변경에 대응되지 못하기 때문

em

  • 적용되는 곳의 font-size에 영향받는다.
  • 만약 적용되는 곳의 font-size 가 없으면 부모의 font-size에 영향 받는다.

그럼 언제 쓰나

  • em 은..해당 요소의 폰트사이즈에 따라서 padding 값이나 마진이 달라질수있을 때. 버튼 같은거 만들때 쓰면 좋겠죠?😉

%

  • %` 단위는 상황에 따라 다르게 쓰일 수 있지만, 주로 부모 요소나 상위 컨테이너의 크기에 상대적으로 크기를 조절하는 데 사용

Health Check란 뭐고 왜 하는걸까?

서버의 상태를 주기적으로 확인하여 서버의 정상 작동 여부를 판단하는 과정

  • health check 방식은 아래와 같다.

  1. Passive health check

    • 서버에서 수신한 요청에 대해 응답을 제대로 보낼 수 있는지 검사한다.
    • 로드밸런서와 같은 프록시 서버에서 사용

  2. Active health check

    • 주기적으로 서버에 요청을 보내고 응답을 받아 서버가 정상작동하는지 여부를 판단

  3. Agent-based Health check

    • 서버에 에이전트를 설치하고, 에이전트가 서버 내부의 상태 정보를 수집하여 체크
    • 서버의 리소스 사용량, 디스크 용량 등 세밀한 정보를 수집할 수 있어 정확한 서버 상태 파악이 가능함
    • 대규모 서버 환경에서 사용됨