마이크로 프론트엔드 실무에 쓸만할까?

#MSA #UX

요즘 FE 기술 트렌드로 많이 언급되는 '마이크로 프론트엔드'. 말은 많은데, 실무에 어떻게 적용할 수 있을까요? 그리고 내 프로젝트에 적용해도 되는 걸까요? 그리고 적용하면 어떤 이득이 있을까요? 개발자와 사용자 모두 win-win 할 수 있는 마이크로 프론트엔드 아키텍처. 카카오워크 FE 개발팀은 실무에 어떻게 적용하고 있는지를 공유해 드립니다.

발표자 : tony.chan
카카오워크의 관리자 서비스를 개발하고 있습니다.

Transcript

1. Copyright 2022. Kakao Corp. All rights reserved. Redistribution or public display is not permitted without written permission from Kakao.
   김수찬 tony.chan
   
   
   카카오엔터프라이즈
   if(kakao)2022
   마이크로 프론트엔드
   
   
   실무에 쓸만할까?
   

   View Slide

2. 언제 마이크로 프론트엔드 구조를 적용해야 할까?
   
   
   카카오워크 FE 개발팀은 어떻게 하고 있을까?
   
   
   정말로 중요한 것들
   

   View Slide

3. MSA가 UX관점에서 올바른 것일까?
   개발자가 만든 서비스 사용자가 가입한 서비스
   

   View Slide

4. 배포 주기의 문제
   워크보드
   
   
   어드민
   카카오워크
   
   
   어드민
   জझషয ৢ݀פ׮
   ঺.. ই૒ উغחؘ…
   ೐۽؋࣌ ߓನ ೧ب غաਃ?
   카카오워크
   
   
   iOS 앱
   ֎ OKੑפ׮
   জझషয ৢ݀פ׮
   ೐۽؋࣌ ߓನ ೧ب غաਃ?
   

   View Slide

5. 서비스 코드
   신규 기능의 개발 리팩토링 & 최신화
   디펜던시의 업데이트 대응
   

   View Slide

6. 언제 마이크로 프론트엔드 구조를 적용해야 할까?
   
   
   카카오워크 FE 개발팀은 어떻게 하고 있을까?
   
   
   정말로 중요한 것들
   

   View Slide

7. 프로젝트 분리하기
   스페이스 설정
   멤버 관리
   공지 게시판
   워크보드 관리
   바로가기 관리
   봇 관리
   보안
   감사
   결제
   통계
   

   View Slide

8. 스페이스 설정
   멤버 관리
   공지 게시판
   워크보드 관리
   바로가기 관리
   봇 관리
   보안 감사 결제
   통계
   

   View Slide

9. 스페이스 설정
   멤버 관리
   공지 게시판
   워크보드 관리
   바로가기 관리
   봇 관리
   보안 감사 결제
   통계
   

   View Slide

10. 구조 분리
    카카오워크 관리자
    Npm + webpack
    …
    스페이스 환경
    멤버 관리
    워크보드
    보안 설정
    워크서비스 관리
    바로가기
    UI Library
    Components
    Utils
    Styles
    Settings
    그 외
    이것저것
    

    View Slide

11. 구조 분리
    Service App
    
    
    스페이스 환경
    
    
    멤버관리
    
    
    워크보드
    
    
    보안설정
    
    
    워크 서비스관리
    
    
    바로가기
    pnpm + turborepo + vite
    Shared Packages
    
    
    UI Library
    
    
    Components
    
    
    Utils
    
    
    Styles
    
    
    Settings
    …
    …
    

    View Slide

12. 서버 사이드 라우팅
    스페이스 설정
    /setting
    멤버 설정
    /member
    워크보드 관리
    /workboard
    스페이스 설정
    
    
    프로필 정보
    setting.js
    …
    멤버 관리
    
    
    조직도 관리
    member.js
    …
    Backend Routes
    워크보드 관리
    workboard.js
    Frontend App
    

    View Slide

13. 컨테이너
    웹 컴포넌트 + 워크스페이스 환경 앱
    

    View Slide

14. 컨테이너
    웹 컴포넌트 + 워크스페이스 환경 앱
    

    View Slide

15. 컨테이너
    웹 컴포넌트 + 워크스페이스 환경 앱
    

    View Slide

16. 컨테이너
    워크스페이스 환경 설정 앱
    컨테이너 웹 컴포넌트
    워크스페이스 환경 앱 컨텐츠
    웹 컴포넌트 + 워크스페이스 환경 앱
    

    View Slide

17. 웹 컴포넌트
    - 프레임워크로부터 독립적
    
    
    - prop을 설정할 수 있다
    
    
    - 이미 빌드 된 상태. 런타임에 바로 사용 가능
    
    
    - 앱과 관계 없이 업데이트 가능
    
    
    - children을 가질 수 있다
    
    
    
    // app.tsx / app.vue / app.svelte
    

    View Slide

18. 언제 마이크로 프론트엔드 구조를 적용해야 할까?
    
    
    카카오워크 FE 개발팀은 어떻게 하고 있을까?
    
    
    정말로 중요한 것들
    

    View Slide

19. 속도
    개발 속도. 로딩 속도.
    

    View Slide

20. 늙지 않는 코드
    

    View Slide

21. 행복코딩 즐기세요
    

    View Slide