SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략
DEVIEW 2023 네이버 · YouTube
AI 핵심 요약
온사이트 머천다이징 시스템에서는 여러 팀이 단일 코드베이스에 위젯을 기여하면서 온보딩·코드 리뷰·QA·배포 조율 비용이 커졌고, 모노레포만으로는 모듈별 독립 배포와 롤백이 어려웠다. 이를 해결하기 위해 원격 위젯 번들을 런타임에 로드하는 마이크로 프런트엔드 구조와, 버전·배포 이력을 관리하고 변경을 컨테이너 서버에 알리는 모듈 레지스트리를 구현했다. SSR에서는 서버용 번들을 내려받아 렌더링하고 브라우저에서는 클라이언트 번들로 하이드레이션했으며, 위젯 단위 캐시와 모듈·컨테이너 버전을 반영한 캐시 키, stale-while-revalidate 및 메모리·Redis 2단 캐시를 적용했다. 그 결과 모듈별 배포와 롤백이 독립적으로 가능해지고 팀 간 개발 간섭과 캐시 조합 부담을 줄였으며, 복잡성이 커지는 만큼 서비스 요구에 맞춘 설계와 온보딩 자동화가 중요하다는 점을 확인했다.
- 런타임에 원격 모듈을 불러오려면 서버와 브라우저의 모듈 형식·로딩 방식을 각각 설계해야 한다.
- 모듈 레지스트리에 버전과 배포 이력을 두면 컨테이너 재배포 없이 모듈을 배포하고 독립적으로 롤백할 수 있다.
- SSR 캐시 키에는 데이터 식별자뿐 아니라 모듈 버전과 컨테이너 버전도 포함해야 한다.
- 캐시 갱신 중에는 오래된 값을 먼저 응답하고 갱신 작업에 락을 걸면 중복 렌더링을 줄일 수 있다.
- 마이크로 프런트엔드는 운영 복잡도를 높이므로, 독립 배포 등 얻을 이점이 분명한 경우에 도입해야 한다.
소개
[DEVIEW 2023] * 발표자 : 박찬진(쿠팡) * 발표제목 : SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략 * DEVIEW 2023 바로가기: https://deview.kr/2023 #DEVIEW #DEVIEW2023 #데뷰 #데뷰2023
비슷한 학습 자료
컨퍼런스 if kakao
Preview Frontend @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Frontend 관련 기술 발표 트랙을 소개합니다. 01:28 1. MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 by 어호선(sun.kist) 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 01:58 2. 마이크로프론트엔드. 실무에 쓸만할까? by 김수찬(tony.chan) 카카오워크의 관리자 서비스를 개발하고 있습니다. 02:17 3. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 by 박은우(ethan.eunwu) 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 02:35 4. 카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 by 박병현(eric.dev) 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 02:56 5. 광고 웹 ...
프론트엔드
컨퍼런스 DEVIEW 2023
UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기
컨퍼런스 DEVIEW 2023
눈으로 보며 듣는 음성 기록, 클로바노트 서비스의 웹 기술 톺아보기
컨퍼런스 DEVIEW 2023
자바스크립트 화이트박스 암호와 크롬 라인 메신저의 보안 강화
컨퍼런스 DEVIEW 2023