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
Bundle 이란? About Bundle and WebPack
Webpack이란 ? Webpack = 모듈 번들링이라고 한다. html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 쉽게 말하면, 필요한 다수의
haneui.tistory.com
3. Module Registry
- 모듈 개발/배포 프로세스는 탈중앙화
- 플랫폼 관리 기능은 중앙에서 컨트롤
- 각 모듈의 현재 버전에 대한 참조
- 버전 변경 이벤트를 컨테이너 서버에 실시간으로 발행
- 위에 파일 버전을 문제점을 해결하기 위한 방안
* 모듈에 대해서 궁금하다면?
2023.02.28 - [기타] - Module 이란?
Module 이란?
개발하는 프로그램의 크기가 커지면 기능들을 분리해야 된다. 이때 분리된 파일 각각을 모듈이라고 한다. 모듈화는 파일을 작은 조각으로 나누어 다루기 쉽도록 하는 과정이다. 프로그램 코드
haneui.tistory.com
4. 캐시전략
- 라이브러리 통합(뷰 기준)
- Key 구성
=> 컴포넌트 별로 캐시 키 설계
=> 기존 캐시 invalidation 하는 부분이 중요
- 스트레스 테스트
=> 한번에 많은수의 캐시가 생성되는 경우를 고려해 테스트 필요
- 트래픽이 많은 경우 동시성문제가 생길수 있음
- 캐시 저장할 공간은 상황을 고려해서 선택
* 캐시/ 캐시전략에 대해서 궁금하다면?
2023.02.28 - [기타] - 캐시(Cache)/캐시전략 이란?
캐시(Cache)/캐시전략 이란?
캐싱 전략은 웹 서비스 환경에서 시스템 성능 향상을 기대할 수 있는 중요한 기술이다. 일반적으로 캐시(cache)는 메모리(RAM)를 사용하기 때문에 데이터베이스 보다 훨씬 빠르게 데이터를 응답할
haneui.tistory.com
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 |