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

#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 마이크로 프론트엔드 실무에 쓸만할까?
2. 언제 마이크로 프론트엔드 구조를 적용해야 할까? 카카오워크 FE 개발팀은 어떻게 하고 있을까? 정말로 중요한 것들
3. MSA가 UX관점에서 올바른 것일까? 개발자가 만든 서비스 사용자가 가입한 서비스
4. 배포 주기의 문제 워크보드 어드민 카카오워크 어드민 জझషয ৢ݀פ׮ ঺.. ই૒ উغחؘ… ೐۽؋࣌ ߓನ ೧ب غաਃ? 카카오워크 iOS 앱 ֎ OKੑפ׮ জझషয ৢ݀פ׮ ೐۽؋࣌ ߓನ ೧ب غաਃ?
5. 서비스 코드 신규 기능의 개발 리팩토링 & 최신화 디펜던시의 업데이트 대응
6. 언제 마이크로 프론트엔드 구조를 적용해야 할까? 카카오워크 FE 개발팀은 어떻게 하고 있을까? 정말로 중요한 것들
7. 프로젝트 분리하기 스페이스 설정 멤버 관리 공지 게시판 워크보드 관리 바로가기 관리 봇 관리 보안 감사 결제 통계
8. 스페이스 설정 멤버 관리 공지 게시판 워크보드 관리 바로가기 관리 봇 관리 보안 감사 결제 통계
9. 스페이스 설정 멤버 관리 공지 게시판 워크보드 관리 바로가기 관리 봇 관리 보안 감사 결제 통계
10. 구조 분리 카카오워크 관리자 Npm + webpack … 스페이스 환경 멤버 관리 워크보드 보안 설정 워크서비스 관리 바로가기 UI Library Components Utils Styles Settings 그 외 이것저것
11. 구조 분리 Service App 스페이스 환경 멤버관리 워크보드 보안설정 워크 서비스관리 바로가기 pnpm + turborepo + vite Shared Packages UI Library Components Utils Styles Settings … …
12. 서버 사이드 라우팅 스페이스 설정 /setting 멤버 설정 /member 워크보드 관리 /workboard 스페이스 설정 프로필 정보 setting.js … 멤버 관리 조직도 관리 member.js … Backend Routes 워크보드 관리 workboard.js Frontend App
13. 컨테이너 웹 컴포넌트 + 워크스페이스 환경 앱
14. 컨테이너 웹 컴포넌트 + 워크스페이스 환경 앱
15. 컨테이너 웹 컴포넌트 + 워크스페이스 환경 앱
16. 컨테이너 워크스페이스 환경 설정 앱 컨테이너 웹 컴포넌트 워크스페이스 환경 앱 컨텐츠 웹 컴포넌트 + 워크스페이스 환경 앱
17. 웹 컴포넌트 - 프레임워크로부터 독립적 - prop을 설정할 수 있다 - 이미 빌드 된 상태. 런타임에 바로 사용 가능 - 앱과 관계 없이 업데이트 가능 - children을 가질 수 있다 <work-container routes={devRoutes}> <WorkSpace /> </work-container> // app.tsx / app.vue / app.svelte
18. 언제 마이크로 프론트엔드 구조를 적용해야 할까? 카카오워크 FE 개발팀은 어떻게 하고 있을까? 정말로 중요한 것들
19. 속도 개발 속도. 로딩 속도.
20. 늙지 않는 코드
21. 행복코딩 즐기세요