마이크로 서비스

• 일반적으로 복잡한 문제에 부딪혔을 때 문제를 작게 나누고 작은 문제를 해결하는 방법이 효율적이다
• 데이터 단위로 작게 나누어 작은 문제를 하나씩 해결하는 것, 이것이 마이크로 서비스의 개념이다.

마이크로 프론트엔드

• 독립적으로 제공한 프론트엔드 App으로 더 큰 하나의 전체 App을 구성하는 아키텍쳐 스타일

  • 대규모 서비스를 개발할 때 용이하다
  • 마이크로 프론트엔드란 프론트엔드의 단일 구조를 개별적으로 개발/테스트 및 배포할 수 있는 작고 간단한 단위로 개발하는 패턴
  • 전체화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식
  • 작동단위에 사용된 프레임워크의 종류에 상관하지 않고 조합 가능한 방법을 제공
  • 단일 팀에 의해 유지될 정도의 작은 서비스의 경우에는 오버엔지니어링이 되지 않도록 주의한다

• 장점

  • FE 개발의 점진적인 업그레이드 / 재작성이 수월해진다
    • 메인 프레임워크의 큰 변화에 모든 서비스를 업그레이드 하는 것이 강제 되는 것이 아닌, 각자 업그레이드 할 수 있다
    • 새로운 기술 / 새로운 상호 작용 방식을 실험하기 위해 독립적으로 수행 가능하다.
  • 심플하고, 유지보수가 용이한 코드베이스를 갖는다
    • 서로의 구성 요소 간 특징에 대해 알지 못하여 발생하는 의도하지 않은 문제들을 피할 수 있다
    • 도메인 모델을 공유 하는 것이 어려워짐에 따라 APP의 여러 부분간에 데이터-이벤트가 어떻게 전달 되었는지 명시하고 확인해야 한다.(이는 마이크로프론트에느라서 하는게 아니라 원래 해야만 하는 것임)
    • 분리(독립)배포(일부씩 나누어 업그레이드, 업데이트, 리팩토링)이 쉽다
    • 모든 배포의 범위가 줄어 들어 이슈 확률이 줄어들게 됨

• 단점

  • 팀 자율성의 증가로 팀 작업 방식이 단편화 될 가능성이 존재한다
  • dependency의 중복을 초래해 사용자가 다운로드해야 하는 바이트 수가 증가한다.
  • 배포 번들 사이즈가 커진다
    • 해결책 : 공통 dependency를 외부화 시켜서 번들에서 관리하는 것이 중요하다
    • 이렇게 관리하게 되면 공통 dependency의 버전을 확실하게 통일화 하는 것이 중요하다
    • 만약 버전을 통일화 하지 않으면, 빌드 시점에 충돌을 야기해서 문제가 발생될 것임
    • 이러한 중복처리를 하지 않더라도 모놀리식 보다는 개별페이지가 빨리 로드 된다.
  • 운영 / 관리가 복잡해진다
    • 각각 앱이 나눠짐에 따라 더 많은 것을 고려하고 관리해야 하는 것은 자연스러운 것이다.
  • 위 단점에서 나열한 위험들은 충분히 관리할 수 있으며, 적용하는 데 드는 비용보다 이점이 중요한 경우가 존재한다면 마이크로 프론트엔드를 사용하는 게 적합할 것이다.

  마이크로 앱을 통합하는 접근 방식에 대해

  • Micro Frontend로 개발 후 각 단위 App을 어떻게 통합할지 고려가 필요하다
  • 각 화면을 조합하는 컨테이너 App과 그 내부 에 들어가는 단위 App이 존재
    • 컨테이너 어플리케이션
    • Header / Footer 공통 페이지 엘리먼트 렌더링 → 인증 및 탐색 등 교차적 문제 해결 → 페이지에 다양한 마이크로 앱을 가져와서 각 앱에게 언제 어디서 렌더링 할 지 설정
  • 다양한 통합 방식이 존재하지만, 현재 마이크로 프론트엔드에서 가장 추천되어 지는 것은 JS를 통한 런타임 통합 방식이다
    • JavaScript를 통한 런타임 통합
      • 가장 추천되는 접근 방식
      • 각 micro app은 script 태그를 사용하여 페이지에 삽입 되고, 로드 시 전역 함수를 시작점으로 사용함
      • 컨테이너 앱은 어떤 마이크로앱이 마운트 되어야 하는지를 결정하고 마이크로앱에게 언제 어디에서 렌더링 해야 할지를 알려주는 함수를 호출한다
      • 항상 컨테이너가 메인이 되고, 그 아래 마이크로 앱들이 존재하는 것을 명심한다
      • 컨테이너

        • 마이크로 앱을 선택하고 배치하는 방법은 App.js를 통해 관리된다.

          • react-router를 사용하여 미리 정의된 router 목록과 현재 URL을 일치시켜 해당 컴포넌트를 렌더링 하는 방식

        • Browse 및 Restaurant 컴포넌트

          • 두 경우 모두 MicroFrontend 컴포넌트를 렌더링함
          • 여기서 앱의 고유한 이름과 번들을 다운로드 할 수 있는 host를 지정한다

        • App.js에서 마이크로앱을 선택하면 그것은 MicroFrontend.js에서 렌더링한다

          • 렌더링 할 때 마이크로 앱에 고유한 id를 가진 컨테이너 요소를 페이지에 넣으면 된다.
          • 마이크로 앱을 다운로드하고 마운트 하기 위한 트리거로 리액트의 componentDidMount를 사용한다

          componentDidMount() {
          	const { name, host } = this.props;
          	const scriptId = `micro-frontend-script-${name}`;
          	if (document.getElementById(scriptId)) {
          		this.renderMicroFrontEnd();
          		return;
          	}
          fetch(`${host}/asset-manifest.json`)
          		.then(res => res.json())
          		.then(manifest => {
          			const script = document.createElement('script');
          			script.id = scriptId;
          			script.src = `${host}${manifest['main.js']}`;
          			script.onload = this.renderMicroFrontend