모던 웹을 위한 마이크로 프런트엔드

플로리안 라플 (Florian Rappl)

플로리안 라플은 디지털 전환(digital transformation) 및 사물인터넷(IoT) 분야의 분산 웹 애플리케이션을 연구하는 솔루션 아키텍트다. 플로리안의 주된 관심사는 마이크로 프런트엔드를 구현하거나 마이크로 프런트엔드가 사업 모델에 미치는 영향을 파악하는 것이다. 그는 이 분야에서 지난 수년간 여러 팀을 이끌며 프로젝트를 성공시켰다. 라플은 수석 아키텍트로서 많은 업계 선두 기업이 뛰어난 웹 애플리케이션을 구축하는 것을 도왔다. 정기적으로 소프트웨어 디자인 패턴과 웹 개발에 대한 강의도 한다. 수년간 세운 업적으로 여러 상을 받았으며, 개발 기술 분야에서 마이크로소프트 MVP로 활동한다. 그는 소프트웨어 공학 분야에서 경력을 시작했으며 물리학을 전공하고 에너지 효율이 높은 슈퍼컴퓨터를 만드는 일에 참여했다. 현재 독일 뮌헨에서 아내와 두 딸과 함께 살고 있다.

박성규

AWS 코리아에서 기술 강사로 일하다가 현재는 디지털 광고 솔루션 스타트업에서 풀스택 개발자로 일하고 있다.

김정동

AWS 코리아에서 솔루션 아키텍트로 일했다. 지금은 웹3.0 관련 스타트업을 운영하는 개발자이자 대표다.

김창준

현재 AWS 코리아에서 솔루션 아키텍트로 일하고 있다.

• [01부] 프런트엔드 모듈화 도입
•  
• ▣ 01장: 왜 마이크로 프런트엔드인가?
• 웹 애플리케이션의 발전
• __웹 프로그래밍
• __소셜 웹
• __프런트엔드와 백엔드의 분리
• 마이크로서비스
• __SOA와 마이크로서비스
• __마이크로서비스의 장점
• __마이크로서비스의 단점
• __‘마이크로’와 ‘프런트엔드’
• 웹 표준의 부상
• __웹 컴포넌트를 통한 격리
• __프레임 통신
• __웹 워커와 프락시
• 출시 기간 단축
• __조직 적응 시간 단축
• __여러 개의 팀
• __피처 격리
• __A/B 테스팅
• 요약
•  
• ▣ 02장: 일반적인 도전과 함정
• 성능
• __리소스 캐싱
• __번들 크기
• __요청 최적화
• 보안
• __중앙 사용자 관리
• __개별 사용자 관리
• __스크립트 실행
• 지식 공유
• 신뢰성
• 사용자 경험
• __워딩
• __패턴 라이브러리
• 요약
•  
• ▣ 03장: 배포 시나리오
• 중앙 집중식 배포
• __모노리포를 사용
• __여러 저장소를 결합
• 분산 배포
• __모노리포 사용하기
• __전용 파이프라인 사용하기
• 하이브리드 솔루션
• __예약된 릴리스
• __변경사항에 대한 트리거
• 요약
•  
• ▣ 04장: 도메인 분해
• 도메인 주도 설계의 원칙
• __모듈
• __바운디드 콘텍스트
• __콘텍스트 맵
• __전략적 도메인 설계 대 전술적 설계
• 관심사 분리(SoC)
• __기술적 분할
• __기능적 분할
• __분할 예제
• 아키텍처 경계
• __공유된 기능
• __적절한 자유도 선택하기
• __DOM 접근하기
• __마이크로 프런트엔드의 범용성
• 요약
•  
• [02부] 마이크로 프런트엔드 아키텍처 구현
•  
• ▣ 05장: 마이크로 프런트엔드 아키텍처의 종류
• 기술적인 요구 사항
• 마이크로 프런트엔드의 환경
• 정적 vs. 동적
• 수평적 구성 vs. 수직적 구성
• 백엔드 중심 vs. 프런트엔드 중심
• 요약
•  
• ▣ 06장: 웹 접근 방식
• 기술적인 요구 사항
• 웹 접근 방식의 기본
• __아키텍처
• __예제 구현
• __개선점
• 장단점
• 링크
• __중앙 연결 디렉터리
• __로컬 연결 디렉터리
• iframe 태그
• __보안
• __접근성
• __레이아웃
• 요약
•  
• ▣ 07장: 서버 측 구성
• 기술적인 요구 사항
• 서버 측 구성의 기본
• __아키텍처
• __예제 구현
• __개선점
• 장단점
• __Mosaic 9 소개
• __포디움(Podium) 소개
• __유명한 사용 사례
• 구성 레이아웃 만들기
• __레이아웃의 이해
• __SSI 사용
• __ESI 사용하기
• __JS 템플릿 문자열 사용하기
• 마이크로 프런트엔드 프로젝트 설정하기
• __포들릿(Podlet)
• __수명 주기 검토하기
• 요약
•  
• ▣ 08장: 에지 측 구성
• 기술적인 요구 사항
• 에지 측 구성의 기초
• __아키텍처
• __예제 구현
• __개선점
• 장단점
• SSI와 ESI
• __SSI
• __ESI
• BFF 결합하기
• 요약
•  
• ▣ 09장: 클라이언트 측 구성
• 기술적인 요구 사항
• 클라이언트 측 구성의 기본
• __아키텍처
• __예제 구현
• __개선점
• 장단점
• 웹 컴포넌트 살펴보기
• __웹 컴포넌트의 이해
• __섀도 DOM으로 스타일 격리하기
• 동적으로 마이크로 프런트엔드 구성
• __마이크로 프런트엔드 레지스트리를 사용
• __런타임에 마이크로 프런트엔드 업데이트하기
• 요약
•  
• ▣ 10장: SPA 구성
• 기술적인 요구 사항
• SPA 구성의 기본 사항
• __아키텍처
• __예제 구현
• __개선점
• 장단점
• 핵심 SPA 셸 구축하기
• __페이지 활성화
• __의존성 공유
• SPA 마이크로 프런트엔드 통합하기
• __수명 주기 선언
• __프레임워크 간 컴포넌트 사용
• 통신 패턴
• __이벤트 교환
• __데이터 공유하기
• __컴포넌트 확장하기
• 요약
•  
• ▣ 11장: 사이트리스 UI
• 기술적인 요구 사항
• 사이트리스 UI의 기본
• __아키텍처
• __예제 구현
• __개선점
• 장단점
• 서버리스와의 비교
• __로컬에서 개발
• __모듈 배포
• 파이럴(Piral)로 런타임 만들기
• __파이럴로 런타임 빌드
• __파이럴로 런타임 배포
• 모듈 작성
• __파일렛의 수명 주기
• __프레임워크에 국한되지 않는 컴포넌트 구현
• 요약
•  
• [03부] 조직 키워가기
•  
• ▣ 12장: 팀과 이해 관계자
• 고위급 이해관계자와의 소통
• __기대치 관리
• __요약 보고서 작성
• 프로덕트 오너 및 운영 위원회 다루기
• 팀 구성
• __가능한 팀 구성 이해하기
• __팀 조직 변경하기
• 요약
•  
• ▣ 13장: 의존성 관리, 거버넌스, 보안
• 전부 공유하거나 아예 공유하지 않기
• 변경 관리를 어떻게 하는가?
• 거버넌스 모델 수립하기
• 마이크로 프런트엔드 샌드박싱하기
• 일반적인 보안 문제와 개선 사항
• 요약
•  
• ▣ 14장: UX와 화면 디자인에 미치는 영향
• 확장성
• 폴백
• 디자인을 효율적으로 공유하기
• 디자이너 없이 디자인하기
• 요약
•  
• ▣ 15장: 개발자 경험
• 최소한의 개발자 경험 제공
• __표준 IDE 지원
• __스캐폴딩 경험 개선
• 멋진 개발자 경험 구축
• __코드 문서 중앙 집중화
• __동영상으로 문서화
• __코드 분석 지원
• __테스트 가능성 높이기
• 최고의 개발자 경험 달성
• __오류 코드 통합
• __오프라인 우선 개발 환경 제공
• __브라우저 확장 프로그램을 통한 커스터마이징
• __개발자 포털 구현하기
• 요약
•  
• ▣ 16장: 사례 연구
• 대고객 포털 솔루션
• __문제 설명
• __팀 구성
• __솔루션
• __효과
• 관리 포털 솔루션
• __문제 설명
• __팀 구성
• __솔루션
• __효과
• 의료 정보 관리 솔루션
• __문제 설명
• __팀 구성
• __솔루션
• __효과
• 요약
• 맺음말
•  
• ▣ [부록] 예제 실습 안내
• 05-pipeline
• __사전 준비 사항
• __실행하기
• __단계
• 05-server-discover
• __사전 준비 사항
• __실행하기
• __단계
• 06-web-approach
• __사전 준비 사항
• __실행하기
• __단계
• 07-gateway
• __사전 준비 사항
• __실행
• __단계
• 07-red
• __사전 준비 사항
• __실행
• __단계
• 07-blue
• __사전 준비 사항
• __실행
• __단계
• 07-green
• __사전 준비 사항
• __실행
• __단계
• 08-edge-side-composition
• __사전 준비 사항
• __실행
• __단계
• 09-client-side-composition
• __사전 준비 사항
• __실행하기
• __단계
• 10-spa-composition
• __사전 준비 사항
• __실행하기
• __단계
• 11-service-feed
• __사전 준비 사항
• __실행하기
• __단계
• 11-app-shell
• __사전 준비 사항
• __실행하기
• __단계
• 11-frontend-balance
• __사전 준비 사항
• __실행하기
• __단계
• 11-frontend-settings
• __사전 준비 사항
• __실행하기
• __단계
• 11-frontend-tax
• __사전 준비 사항
• __실행하기
• __단계

• GitHub 저장소: https://github.com/wikibook/micro-frontend
• ZIP 형식으로 다운로드: https://github.com/wikibook/micro-frontend/archive/refs/heads/main.zip

• 83쪽, 장 제목

  05 웹 접근 방식

  ==>

  06 웹 접근 방식

• 85쪽, 87쪽, 89쪽, 91쪽, 93쪽, 95쪽 페이지 상단 헤더

  5. 마이크로 프런트엔드 아키텍처의 종류

  ==>

  6. 웹 접근 방식