홈앤서비스 SK BROADBAND

마이크로 프런트엔드 아키텍처로 복잡성을 해결하고 단일 장애 지점을 제거하자!

마이크로 프런트엔드는 소프트웨어 개발의 마이크로서비스 개념에서 차용한 프런트엔드 개발을 위한 웹 아키텍처로, 프런트엔드의 복잡성과 단일 장애 지점을 피하기 위해 프런트엔드의 각 모듈을 독립적으로 개발하고 출시한다. 이 책은 따라 하기 쉬운 가이드 형식으로 실습 튜토리얼, 프로젝트 및 자가 평가 질문으로 구성돼 있으며, 마이크로 프런트엔드 솔루션을 구현하는 데 사용할 수 있는 패턴을 안내한다. 마이크로 프런트엔드 일반, 다양한 아키텍처 스타일과 사용 영역, 마이크로 프런트엔드로의 변경에 대비하여 팀을 준비하는 방법, 확장성을 위해 UI 디자인을 조정하는 방법 등을 배울 수 있으며, 마이크로 프런트엔드 아키텍처의 가장 단순한 변형부터 시작하여 정적 접근 방식에서 더 빠른 릴리스 주기로 확장성을 극대화할 수 있는 완전 동적 솔루션까지 다룬다. 마지막 장에서는 마이크로 프런트엔드와 관련된 다양한 사례 연구를 통해 얻은 지식을 강화할 수 있다.

[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
__사전 준비 사항
__실행하기
__단계