Deview 는 미래에 향한 개발자들의 시선이 담긴 국내 최대 규모의 개발자 컨퍼런스이다.
국내외 개발자들이 모여 최고의 기술과 경험, 노하우를 나누며 함께 성장을 이어간다.
그 중 쿠팡 '박찬진' 님의 'SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략' 대해서 살펴보겠다.
1. Monolithic Frontend 의 한계
- Monolithic은 하나로 짜여져 있는 스타일, 따라서 덩치가 커감에 따라 배포시간이 길어짐
=> 트러블 슈팅 매우빈번, 모든 배포 대응, 전체 시스템 이해 필요
2. MFE
- 왜 도입이 필요했을까?
=> 서비스 랜딩 페이지, 여러개의 위젯으로 구성, 외부팀으로 부터 신규 개발 요청,
- 컨테이너 중심으로 각파트를 통합
=> Mono-repo, 격리된 코드, 각팀의 별도의 백엔드 운영
=> 트러블 슈팅 감소, 유닛 테스트
- 각 마이크로 프론트엔드의 번들을 독립적으로 배포
=> 여러 팀간의 배포 톡립성 확보
- 핵심은 코드를 통합하는 방법 (런타임/원격/동적으로)
- 원하는 방식
=> 각각 따로 컴포넌트 번들을 SSR할때 런타임에 불러온다, 단일 서버에서 통합
=> 문제점: 번들러에 import가 되나?, 리모트 번들 파일 버전이 계속 바뀔텐데?
=> 해결방안: remote import는 다운받아서 로컬로 만듬, dynamic import는 미리 트랜스 파일링/Eval로 import 문의 직접처리
* 번들에 대해서 궁금하다면?
2023.02.28 - [기타] - Bundle 이란? About Bundle and WebPack
3. Module Registry
- 모듈 개발/배포 프로세스는 탈중앙화
- 플랫폼 관리 기능은 중앙에서 컨트롤
- 각 모듈의 현재 버전에 대한 참조
- 버전 변경 이벤트를 컨테이너 서버에 실시간으로 발행
- 위에 파일 버전을 문제점을 해결하기 위한 방안
* 모듈에 대해서 궁금하다면?
2023.02.28 - [기타] - Module 이란?
4. 캐시전략
- 라이브러리 통합(뷰 기준)
- Key 구성
=> 컴포넌트 별로 캐시 키 설계
=> 기존 캐시 invalidation 하는 부분이 중요
- 스트레스 테스트
=> 한번에 많은수의 캐시가 생성되는 경우를 고려해 테스트 필요
- 트래픽이 많은 경우 동시성문제가 생길수 있음
- 캐시 저장할 공간은 상황을 고려해서 선택
* 캐시/ 캐시전략에 대해서 궁금하다면?
2023.02.28 - [기타] - 캐시(Cache)/캐시전략 이란?
3. 결론
- MFE는 시스템 복잡성을 높인다. 이득이 있는지 잘 따져볼 필요가 있다.
- 서비스의 특수성에 따라서 신중하게 도입한다면 확실한 이점을 얻을 수 있다.
- 캐시 키로직을 신중하게 결정 필요, 동시성 문제를 조심스럽게 다뤄야 한다.
이것 외로 다른 재밌는 이야기들이 많으니깐 더 궁금한분들은 아래 참조
'기타' 카테고리의 다른 글
구글 계정 로그인 구현 (OAuth) (0) | 2023.06.22 |
---|---|
웹팩(WebPack)이란? (0) | 2023.05.22 |
캐시(Cache)/캐시전략 이란? (0) | 2023.02.28 |
Module 이란? (0) | 2023.02.28 |
Bundle 이란? About Bundle and WebPack (0) | 2023.02.28 |