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

실패하지 않는 대규모 애플리케이션을 위한 프런트엔드 아키텍처 설계와 구현

플로리안 라플 지음 | 박성규 , 김정동 , 김창준 옮김

위키북스 2023년 07월 10일 출간 종이책 : 2023년 03월 24일 출간

작품소개

책소개

마이크로 프런트엔드는 소프트웨어 개발의 마이크로서비스 개념에서 차용한 프런트엔드 개발을 위한 웹 아키텍처로, 프런트엔드의 복잡성과 단일 장애 지점을 피하기 위해 프런트엔드의 각 모듈을 독립적으로 개발하고 출시한다.

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

★ 이 책에서 다루는 내용 ★

◎ 올바른 마이크로 프런트엔드 아키텍처를 선택하는 방법
◎ 컴포지션 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
__사전 준비 사항
__실행하기
__단계

작가정보

저자(글) 플로리안 라플

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

번역 박성규

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

번역 김정동

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

번역 김창준

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