Upgrade to Pro — share decks privately, control downloads, hide ads and more …

토스의 마이크로프론트엔드 아키텍처, 그리고 자동화

Jin
December 04, 2019

토스의 마이크로프론트엔드 아키텍처, 그리고 자동화

2019년 12월 4일 수요일, wanted 프론트엔드 개발자 밋업에서.

Jin

December 04, 2019
Tweet

More Decks by Jin

Other Decks in Technology

Transcript

  1. 안녕하세요 2 박서진 • 토스 Frontend Chapter Lead • Client

    Platform • 비대면 계좌개설, 환전, 카드 맞춤추천,
 내 부동산 시세 조회, 카드값 돌려받기… • GitHub @raon0211
  2. 토스 3 • 누적 가입자 1,500만, 월 활성 사용자(MAU) 1,000만

    • 대표적인 대한민국 금융 애플리케이션 • 어려운 금융을 쉽고 간편하게 (Make Finance Casual)
  3. 웹 애플리케이션의 장점 • 365일 24시간 자유로운 배포와 롤백 •

    모든 사용자가 최신 버전을 사용 • 빠른 버그 픽스 • 빠른 사용자 반응 10
  4. 모놀리식 아키텍처가 좋은 점 20 • 공통되는 코드를 자유롭게 공유

    • 사용하는 라이브러리의 버전을 손쉽게 통일 • 비용 없이 새로운 서비스 구축 • 서비스 관리 비용 절감
  5. 모놀리식 아키텍처가 별로인 점 21 • 천년만년 걸리는 빌드 시간

    • 하나의 서비스 변경사항이 다른 서비스까지 영향을 미칠 수 있음 • 서비스별 배포를 할 수 없음 • 서비스별 캐싱 정책을 가져가기 어려움
  6. 토스의 목적 조직 — ‘사일로’ 22 S lo Frontend
 Backend

    Des gner Product Owner S lo Frontend
 Backend Des gner Product Owner S lo Frontend
 Backend Des gner Product Owner o end
 end ner Owner Chapter
  7. S lo Frontend
 Backend Des gner Product Owner S lo

    Frontend
 Backend Des gner Product Owner S lo Frontend
 Backend Des gner Product Owner o end
 end ner Owner Chapter 토스의 목적 조직 — ‘사일로’ 23
  8. 사일로마다 다른 제품 경험 24 PC 대응 복잡한 상태 관리

    모바일 웹앱 대출 맞춤추천 행운퀴즈 카드값 돌려받기
  9. 그 외 좋은 점 31 • 하나의 서비스 변경사항은 다른

    서비스에 영향을 미칠 수 없음 • 서비스별 배포를 할 수 있음 • 서비스별 캐싱 정책이 자연스럽게 적용됨
  10. 레포지토리가 쪼개진다면 예상되었던 어려움 32 • 공통 코드를 공유하기 어려움

    • 사용하는 라이브러리의 버전 파편화 • 새로운 서비스 구축에 큰 비용 • 서비스 관리가 복잡해짐
  11. 모노레포 (Monorepo) 34 • 하나의 Git 레포지토리, 여러 패키지 •

    하나의 레포지토리 안에서
 모든 서비스와 라이브러리가 관리됨
  12. 설정의 간편한 공유 39 module.exports = { extends: [' ../

    ../.eslintrc.service.js'], }; .eslintrc.js tsconfig.json { "extends": " ../ ../tsconfig.service.json", }
  13. 코드와 이슈 관리 지점 일원화 • 모든 코드와 이슈가 한

    레포지토리에 집결 • 라이브러리와 서비스 배포는 이미 있는 인프라를 기반으로 • 코드나 이슈의 위치를 손쉽게 찾음 40
  14. CI۽ ੗زചػ ױ҅੸ ߓನ 47 자동 테스트 및
 타입 체크

    스테이징
 배포 라이브
 단계적 배포 *사내 테스트
  15. 토스에서 프론트엔드 개발자로
 일한다면? 1. 개발에 필요한 대부분의 환경이 갖춰져

    있는 상태에서 2. 스타트업보다 애자일하게 일하면서 3. 제품 개발에만 집중할 수 있습니다. 50