Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
토스의 마이크로프론트엔드 아키텍처, 그리고 자동화
Search
Jin
December 04, 2019
Technology
5
8.2k
토스의 마이크로프론트엔드 아키텍처, 그리고 자동화
2019년 12월 4일 수요일, wanted 프론트엔드 개발자 밋업에서.
Jin
December 04, 2019
Tweet
Share
More Decks by Jin
See All by Jin
JavaScript에서의 비동기 반복기
raon0211
1
170
Other Decks in Technology
See All in Technology
20250612_GitHubを使いこなすためにソニーの開発現場が取り組んでいるプラクティス.pdf
osakiy8
1
330
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/03 - 2025/05
oracle4engineer
PRO
1
130
Cursor Meetup Tokyo
iamshunta
5
1.5k
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
450
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
chiroito
1
1.1k
プロジェクトマネージャーに最後まで残るたった一つの仕事は交渉
ichimichi
1
180
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
34
18k
AIエージェントのフレームワークを見るときの個人的注目ポイント
os1ma
1
270
dbt Cloudの新機能を紹介!データエンジニアリングの民主化:GUIで操作、SQLで管理する新時代のdbt Cloud
sagara
0
130
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
230
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
110
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Orchestrator
shlominoach
188
11k
Producing Creativity
orderedlist
PRO
346
40k
Side Projects
sachag
454
42k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
670
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Transcript
토스의 마이크로프론트엔드 아키텍처, 그리고 자동화 박서진 <
[email protected]
>
안녕하세요 2 박서진 • 토스 Frontend Chapter Lead • Client
Platform • 비대면 계좌개설, 환전, 카드 맞춤추천, 내 부동산 시세 조회, 카드값 돌려받기… • GitHub @raon0211
토스 3 • 누적 가입자 1,500만, 월 활성 사용자(MAU) 1,000만
• 대표적인 대한민국 금융 애플리케이션 • 어려운 금융을 쉽고 간편하게 (Make Finance Casual)
토스에서도웹프론트엔드개발이필요한가요? 4
토스에서도웹프론트엔드개발이필요한가요? 5 네. 많이 필요합니다.
애자일 개발 방법론 6 애자일 가설 수립 개발 릴리스 계속
반복
애자일 개발 방법론 7 애자일 가설 수립 개발 릴리스 계속
반복 : 월 금 수 화 목
애자일 개발 방법론 8 : 월 금 수 화 목
1주
애자일 개발을 가로막는 어려움 9 심사가 필요합니다. 또 업데이트해요?
웹 애플리케이션의 장점 • 365일 24시간 자유로운 배포와 롤백 •
모든 사용자가 최신 버전을 사용 • 빠른 버그 픽스 • 빠른 사용자 반응 10
11 “앱 안에서 웹뷰로 빠르게 서비스를 개발해보자!”
Frontend Chapter 12
토스의 웹 프론트엔드 제품들 13
토스의 웹 프론트엔드 제품들 14 30+ 웹 프론트엔드 서비스 수
대표적인 웹 제품 화면들 15
16 많은 수의 서비스를 관리하기 위한 첫 번째 아키텍처 —
모놀리식 (Monolithic)
모놀리식? 17
모놀리식 = 거대한 탑 18
한 패키지 안에 여러 개의 서비스 19
모놀리식 아키텍처가 좋은 점 20 • 공통되는 코드를 자유롭게 공유
• 사용하는 라이브러리의 버전을 손쉽게 통일 • 비용 없이 새로운 서비스 구축 • 서비스 관리 비용 절감
모놀리식 아키텍처가 별로인 점 21 • 천년만년 걸리는 빌드 시간
• 하나의 서비스 변경사항이 다른 서비스까지 영향을 미칠 수 있음 • 서비스별 배포를 할 수 없음 • 서비스별 캐싱 정책을 가져가기 어려움
토스의 목적 조직 — ‘사일로’ 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
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
사일로마다 다른 제품 경험 24 PC 대응 복잡한 상태 관리
모바일 웹앱 대출 맞춤추천 행운퀴즈 카드값 돌려받기
25 많은 수의 서비스를 관리하기 위한 두번째 아키텍처 — 마이크로서비스
(Microservice)
모놀리식 아키텍처 되돌아보기 26
한 패키지에 하나의 서비스 27
쪼개진 패키지, 자유로운 의존성 선택 28 Redux, Redux-Observable, RxJS MobX,
Storybook PC 최적화, 다양한 브라우저에 대응
빌드 시간의 획기적인 감소 29 20+࠙ 모놀리식 아키텍처에서 빌드 시간
빌드 시간의 획기적인 감소 30 2~3࠙ 작은 서비스의 빌드 시간
그 외 좋은 점 31 • 하나의 서비스 변경사항은 다른
서비스에 영향을 미칠 수 없음 • 서비스별 배포를 할 수 있음 • 서비스별 캐싱 정책이 자연스럽게 적용됨
레포지토리가 쪼개진다면 예상되었던 어려움 32 • 공통 코드를 공유하기 어려움
• 사용하는 라이브러리의 버전 파편화 • 새로운 서비스 구축에 큰 비용 • 서비스 관리가 복잡해짐
이렇게 된 이상 모노레포로 간다!
모노레포 (Monorepo) 34 • 하나의 Git 레포지토리, 여러 패키지 •
하나의 레포지토리 안에서 모든 서비스와 라이브러리가 관리됨
모노레포 — 예시 35 toss-frontend (모노레포) libraries services
모노레포 — 예시 36 libraries 컴포넌트 라이브러리 타입 정의 라이브러리
ESLint 등 설정 라이브러리 services
실제 toss-frontend 모노레포 37
만보기 웹앱 카드추천 웹앱 비대면 계좌개설 웹앱 부동산 웹앱
설정의 간편한 공유 39 module.exports = { extends: [' ../
../.eslintrc.service.js'], }; .eslintrc.js tsconfig.json { "extends": " ../ ../tsconfig.service.json", }
코드와 이슈 관리 지점 일원화 • 모든 코드와 이슈가 한
레포지토리에 집결 • 라이브러리와 서비스 배포는 이미 있는 인프라를 기반으로 • 코드나 이슈의 위치를 손쉽게 찾음 40
명령어 한 줄로 끝나는 인프라 셋업 41 yarn new-service my-service
yarn new-library my-library
토스에서 라이브러리 만들기 42
43 토스에서 신규 웹 서비스 만들기
이슈봇 44
사용자의 실수를 줄여주는 ESLint Rule 45
PR 종달새 46
CI۽ زചػ ױ҅ ߓನ 47 자동 테스트 및 타입 체크
스테이징 배포 라이브 단계적 배포 *사내 테스트
աܻ ߓನ ۚ 48 사용자 트래픽 로드 밸런서 다수 사용자
일부 사용자 기존 버전 신규 버전
ী۞ ݽפఠ݂җ ࡅܲ ܀ߔ 49
토스에서 프론트엔드 개발자로 일한다면? 1. 개발에 필요한 대부분의 환경이 갖춰져
있는 상태에서 2. 스타트업보다 애자일하게 일하면서 3. 제품 개발에만 집중할 수 있습니다. 50
51 남은 숙제
ҕా ۄ࠳۞ܻ ߡ ಞച 52 7, 8, 9 3.4, …,
3.7
보다 효율적인 개발환경 53 Netlify “Deploy Preview” Pull Request 제출과
함께 개발 서버 셋업
보다 효율적인 이슈hPR 관리 54
55 감사합니다