[TIL] Toss SLASH23_230608

Toss slash23

TrackA: Frontend, DevOps, CoreBanking 14:00 ~ 

 

✔️ Frontend

주제 1: Admin

Paas(Platform as a Service)

DSL(Domain Specific Language)

Server-driven UI 장단점

 

주제 2: 쏟아지는 페이지들 우아하게 관리하기

Funnel 코드 개선 - 리팩토링, 설계 관점

응집도, 추상화, 시각화

페이지 흐름과 상태를 모으기 = 응집도 개선

한 흐름으로 관리하는 UI를 컴포넌트 하나에 넣고 상태에 따라 조건부 렌더링

퍼널 흐름 관련 코드를 재사용가능한 라이브러리로 추상화

반복되는 조건문, 상태 관리 커스텀 훅 useFunnel 등

디테일한 기능 구현과 비지니스 로직 분리

DX 개선? 개발자 도구 시각화

데이터 흐름을 다이어그램으로 표현, 각 step으로 이동 가능

Funnel Debugger

Mermaid 라이브러리 - 시각화 라이브러리

 

주제3: React Native

ㄱ. 왜 React Native를 선택했나?

UX 사용자 경험 DX 개발자 경험 중시

Web 개발 시 영상과 같이 로딩 시간이 느린 경우 단점

React Native 이미 파일 시스템에 내장된 JS 바로 실행, 하나의 JS 파일을 빌드함

ㄴ. 기술적 도전?

1) 서비스별 배포

Toss 독자적인 사일로 문화 -> 빌드와 배포 파이프라인 따로 가져야 함.

React Native의 JavaScript 파일 3MB 크기

Shared 와 Service로 파일나누기

2) 빌드속도 감축

Bundler 설정 esbuild

3) 다양한 언어와 플랫폼

React Native Test Page

4) 의존성 관리

Phantom Dependency

-> Yarn Plug'n'Play

향후 > Web, React Native, Server 모두 Isomorphic Package