마이크로프론트엔드. 실무에 쓸만할까? / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
카카오워크 관리자 서비스는 모놀리식 SPA 구조에서 관리자 화면이 분리되어 생기는 사용자 혼란, 앱 심사에 묶이는 배포 주기, 의존성 업데이트의 어려움을 겪었다. 이를 해결하기 위해 pnpm과 Turborepo 기반의 멀티 패키지 구조로 바꾸고, 서비스 앱을 분리해 빌드 속도를 40% 이상 높였으며 비트도 도입했다. 컨테이너는 웹 컴포넌트로 만들고 서버 사이드 라우팅을 적용해, 서비스 앱이 서로 다른 프레임워크와 배포 주기를 가질 수 있도록 구성했다. 마이크로 프론트엔드는 초기부터 도입하기보다 서비스와 팀이 커졌을 때 고려할 만하며, 로딩 속도와 기능 전달 속도 중 무엇이 중요한지에 따라 적합성을 판단해야 한다.
- 서비스 초기에는 모놀리식 구조가 설계 부담이 적고 개발 속도도 빠르므로, 규모와 팀이 커지는 시점에 분리를 검토할 수 있다.
- pnpm과 Turborepo로 모노레포 빌드 구조를 최적화하고, 서비스별 앱과 공통 코드를 패키지로 나눴다.
- 웹 컴포넌트는 프레임워크에 독립적인 컨테이너로 활용할 수 있으며, 프로퍼티와 슬롯을 통해 앱 간 연동을 구성할 수 있다.
- 마이크로 프론트엔드는 앱별 의존성과 배포가 나뉘어 로딩 비용이 늘 수 있으므로, 사용자 경험과 서비스 특성에 맞춰 선택해야 한다.
소개
요즘 FE 기술 트렌드로 많이 언급되는 '마이크로 프론트엔드'. 말은 많은데, 실무에 어떻게 적용할 수 있을까요? 그리고 내 프로젝트에 적용해도 되는 걸까요? 그리고 적용하면 어떤 이득이 있을까요? 개발자와 사용자 모두 win-win 할 수 있는 마이크로 프론트엔드 아키텍처. 카카오워크 FE 개발팀은 실무에 어떻게 적용하고 있는지를 공유해 드립니다. #MSA #UX 카카오워크의 관리자 서비스를 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-82 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
비슷한 학습 자료
컨퍼런스 if kakao
쿠버네티스 펀하고, 쿨하고, 섹시하게 / if(kakao)2022
컨퍼런스 if kakao
카카오 엔터프라이즈에서는 cluster api와 다양한 plugin을 이용하여, 개발자들에게 용도에 맞는 k8s를 제공하고 있습니다. 그리고 이 환경을 기반으로 모든 클라우드 배포 환경을 k8s를 이용하여 구현할 수 있었습니다. 카카오 엔터프라이즈에서 사용중인 선언적인 kubernetes as a service 개발 방법 공유! 이것이 선언적인 방법이니까! 음! #Kubernetes #ClusterAPI #Kubernetesasaservice 카카오엔터프라이즈에서 퍼블릭 클라우드 서비스를 개발하고 있는 벅과 곤잘레스 입니다. 카카오아이클라우드 최고에요~! 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-58 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #i...
데브옵스 · 인프라 클라우드
컨퍼런스 if kakao
ㄷㄷㄷ: Domain Driven Design과 적용 사례공유 / if(kakao)2022
컨퍼런스 if kakao
Legacy Server의 포팅을 위해 Domain Driven Design을 적용하여 MSA 화 한 사례를 공유합니다. #MSA #DDD 카카오 엔터테인먼트에서 백엔드 개발자로 일하고 있는 셜록입니다. git blame을 열면 혹시나 제가 짠 코드일까 두근두근하면서, 레거시 서버로 고통받았던 나날과 함께 backlog를 열심히 청소하는 중입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-37 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
백엔드
컨퍼런스 if kakao
카카오페이의 프론트엔드 서비스가 제공되는 환경에 대해 이야기 하고, 프론트엔드 서비스가 제공되는 환경의 관점에서 개발자 경험과 사용자 경험을 개선하기 위한 카카오페이 프론트엔드 팀의 작업을 사례를 통해 이야기합니다. #UX 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-83 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드
컨퍼런스 if kakao
카카오페이 앱 리빌딩 스토리 / if(kakao)2022
컨퍼런스 if kakao
카카오페이앱을 리빌딩하면서 겪은 과정들을 소개해 드리려고 합니다. #Android 카카오페이 안드로이드 주식 서비스 업무를 맡고 있는 스카일러입니다. 카카오페이 안드로이드 계정 서비스 업무를 맡고 있는 에디입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-91 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
모바일 앱 개발
컨퍼런스 if kakao
MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 / if(kakao)2022
컨퍼런스 if kakao
조직이 비대해지고 어플리케이션이 커짐에 따라 프론트앤드 중복개발, 팀간 운영/배포의 상호 의존성등의 문제가 발생할 수 있습니다. 이런 경우 프론트앤드 앱 자체를 하나의 Micro App으로 만들어 배포하는 방식을 고려할 수 있습니다. 이때 사용할 수 있는 방법 중 하나로 MFA(Micro Front-end Architecture)이 있습니다. 본 세션에선 아직 생소한 개념인 MFA에 대한 설명과 공통플랫폼개발 파트에서 왜 MFA를 선택했는지, 어떤 과정을 거쳐 구현을 해냈는지에 대한 설명을 진행할 예정입니다. #MFA 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-74 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 ...
프론트엔드
컨퍼런스 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. 광고 웹 ...
프론트엔드