프론트엔드 개발의 미래, Module Federation의 적용 #우아콘2023 #우아한형제들
우아콘 2023 우아한형제들 · YouTube
AI 핵심 요약
프론트엔드 애플리케이션이 커지면서 기능 간 의존성과 여러 관리 어드민의 운영 부담이 커진 문제를 해결하기 위해, 발표자는 전시 영역 어드민을 호스트 애플리케이션 하나로 통합하고 Webpack Module Federation으로 도메인별 리모트 모듈을 불러오도록 구성했다. 호스트는 공통 UI와 인증·API 로직을 맡고, 리모트는 도메인별 타입과 기능을 제공하도록 역할을 나눴으며, 상태 공유 방식과 TypeScript 타입 공유, 의존성 로드 순서 문제를 해결해 나갔다. 그 결과 프로덕트 간 UI를 공통화하고 책임 경계를 명확히 해 확장과 문제 범위 파악을 수월하게 했지만, 기본 프로젝트 구성과 운영의 복잡성은 커졌다. Module Federation은 모든 제품에 적용할 해법이 아니라, 충분히 성장한 애플리케이션에서 도입 비용과 얻을 이점을 비교해 선택해야 한다는 점을 강조했다.
- Module Federation은 Webpack의 `exposes`와 `remotes` 설정으로 다른 애플리케이션의 모듈을 런타임에 불러올 수 있다.
- 호스트와 리모트 간 상태 전달에는 props, 브라우저 스토리지, 커스텀 이벤트, 메시지 버스 등 선택지가 있으며 결합도와 확장성을 함께 따져야 한다.
- 리모트 모듈의 타입을 공유하려면 별도 타입 선언이나 타입 공유 플러그인을 검토하고, 양방향 타입 의존성도 확인해야 한다.
- 공유 의존성의 로드 순서가 맞지 않으면 초기 렌더링 오류가 날 수 있으므로 부트스트랩 분리나 `eager` 설정을 고려한다.
- 도입 비용과 운영 복잡도가 크므로, 초기 제품보다 규모와 복잡도가 커진 애플리케이션에 적합한지 먼저 판단한다.
소개
[WOOWACON2023 세션 다시보기] 👉 세션 설명 점차 비대해져가는 프론트엔드 애플리케이션에 지치셨나요? MSA 백엔드에 대응하는 모놀리식 프론트엔드에 싫증이 났을까요? 복잡한 의존성으로 인해 지쳐만 가는 프론트엔드 엔지니어들에게 보다 간단하게 Module Federation을 이용한 Microfrontend 적용에 대해 이야기해 보고자 합니다.ㅤ ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 박세문 15년 정도를 소프트웨어 엔지니어로 지내오고 있습니다. 현재는 배민커머스웹프론트 개발팀에서 프론트엔드 개발 및 아키텍처 설계와 같은 업무들을 진행하고 있습니다. 다양한 필드, 다양한 분야에서의 경험을 바탕으로 프론트엔드 업무를 보다 잘할 수 있는 방법에 대해서 늘 고민하고 또 고민하는 고민이 많은 엔지니어입니다. 👍 추천 대상 마이크로프론트엔드 도입을 고려 중인 프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan....
비슷한 학습 자료
컨퍼런스 우아콘 2023
프론트엔드 모킹 환경에 감칠맛 더하기 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 프론트엔드에서 모킹 환경을 어떻게 더 유연하고, 적극적으로 활용할 수 있을까요? 모킹 환경의 개선부터 MSG(Mock Service GUI) 개발까지의 여정을 소개하며, 개발자 경험을 어떻게 향상시키고 테스트 환경에 자연스럽게 녹여낼 수 있었는지에 대한 방법과 경험들을 공유합니다.ㅤ ㅤ 👉 발표자 소개 코어웹프론트개발팀 류현승 우아한테크코스 4기를 수료하고, 우아한형제들의 주문/회원 도메인을 중심으로 개발하며 열심히 배우고 있는 신입 웹프론트엔드 개발자입니다. 개발을 단순히 완성하는 도구에 그치지 않고, 잘 활용하여 사용자와 함께 일하는 팀원에게 좋은 경험을 주는 것에 큰 의미를 두고 있습니다. 👍 추천 대상 프론트엔드 API 모킹 환경을 어떻게 활용하고 개선할 수 있을지 고민인 분 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
프론트엔드 소프트웨어 테스트
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 네! 배민도 React Native 해요! 라이더의 안전한 배달을 위해 쉼없이 달려온 배민커넥트앱의 과거와 현재, 그리고 더 나은 앱을 위한 고민까지. 전사 유일의 React Native 프로덕트를 가꾸어 나가는 웹개발자들의 이야기를 들려드립니다.ㅤ ㅤ 👉 발표자 소개 라이더서비스팀 박지성 배민커넥트앱과, 이를 지탱하는 백오피스들의 프론트엔드 개발을 담당하고 있습니다. 지금처럼, 앞으로도 나보다 더 나은 사람들과 지금보다 더 나은 프로덕트를 만들어나가고 싶습니다. 👍 추천 대상 React Native 개발에 관심이 있거나, 이제 막 React Native 개발을 시작한 웹프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
모바일 앱 개발
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 우아한공방으로 새롭게 단장한 디자인 시스템의 계층 구조와 이를 컴포넌트로 빚어낸 과정을 소개합니다. 그리고 컴포넌트 구현에 집중하기 위해 어떤 개발 환경을 갖췄는지, 운영 과정에서 정답이 없는 문제들을 어떻게 다뤄왔는지 공유드릴게요. 앞으로 더 확장해 나갈 디자인 시스템의 미래도 엿볼 수 있어요. ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 마광휘 배민커머스웹프론트개발팀에서 23명의 엔지니어가 조화롭게 좋은 프로덕트를 만들 수 있도록 팀 문화 고민과 시스템 아키텍처링을 진행하고 있는 챙김이 입니다. 최근에는 배민 전사의 웹 프론트 미래를 그리고 있어요. 배민커머스웹프론트개발팀 이상현 지속 가능한 디자인 시스템을 만들어나가는 프론트엔드 개발자입니다. 👍 추천 대상 - 사내 디자인 시스템을 운영하는 개발자 - 확장 가능하고 유연한 React UI 컴포넌트 구현에 관심 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 ...
프론트엔드 UI/UX
컨퍼런스 우아콘 2023
웹프론트 개발자들을 위한 '우아한스펙트럼' 서비스 제작기 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 배달의민족 웹프론트엔드 개발자들의 기술 공유 플랫폼 '우아한스펙트럼'을 소개합니다. 기획부터 서버, DB, 프론트 모두 프론트엔드 개발자 6명이서 만든, 눈물 없이 들을 수 없는 스토리ㅤ 👉 발표자 소개 셀러웹프론트개발팀 송지은 사회생활 3개월 차 리더가 된 프론트엔드 개발자 사실 본업은 사장님을 위해서라면 어디든 달려가는 배민셀프서비스 개발자 👍 추천 대상 - 우아한형제들 웹프론트개발자들의 기술 공유 방식이 궁금한 개발자 - 사내 사이드 프로젝트를 잘 운영하고 싶은 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
프론트엔드 백엔드 풀스택
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 비즈니스는 성장하는데 레거시가 계속 쌓여가고 있지는 않나요? 백엔드 개발 조직이 대규모 프로젝트를 어떻게 진행하는지 궁금하신가요? 배민스토어 서비스를 확장하면서 두 마리 토끼(비즈니스와 기술)를 잡기 위해 고군분투하는 배민스토어서비스개발팀의 에피소드와 그 과정에서 만들어간 팀 문화를 소개합니다.ㅤ 👉 발표자 소개 배민스토어서비스개발팀 박제현 10년 동안 백엔드를 개발해왔고 우아한형제들에서 7년간 다양한 서비스를 만들고 없애(?) 왔습니다. 이제는 팀장 2년 차로 18명의 팀을 이끌며 배민스토어 서비스의 백엔드를 만들고 있습니다. 기술을 활용하여 혁신적인 서비스를 만드는 것을 즐기며, 일을 잘하는 것뿐만 아니라 조직을 성장시키는 것에 관심이 많습니다. 👍 추천 대상 - 대규모 프로젝트를 진행하는 신임 팀장 및 개발자 - 팀 문화에 관심 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relatio...
백엔드 애자일 · 협업