토스ㅣSLASH 21 - Micro-frontend React, 점진적으로 도입하기
SLASH 토스 · YouTube
AI 핵심 요약
Django 템플릿과 jQuery 중심의 모놀리식 프로젝트에서 복잡한 인터랙션을 구현하기 어려워, 기존 서버사이드 렌더링을 유지하면서 필요한 페이지부터 React를 점진적으로 도입했다. 여러 서비스가 하나의 Webpack 빌드와 의존성을 공유하면서 변경 영향이 커지고 빌드가 느려지자, Yarn 워크스페이스로 빌드 도구·공통 라이브러리·독립 서비스 패키지를 분리하는 마이크로 프론트엔드 구조로 바꿨다. Git 해시로 변경된 패키지를 판별하고 빌드 결과물을 저장소에 압축해 함께 관리하는 ‘제로 빌드’를 적용해, 변경되지 않은 패키지의 빌드를 생략하고 빌드 속도를 최대 15배 높였다. 이 구조는 의존성과 변경 범위를 줄이고 팀별 기술 선택의 자율성을 높였지만, 적합한 아키텍처는 기존 코드와 조직 문화에 따라 달라진다는 점도 강조했다.
- 서버사이드 렌더링을 유지한 채 React를 일부 페이지에 먼저 적용하면 기존 Django 템플릿을 한 번에 교체하지 않고도 전환을 시작할 수 있다.
- Create React App의 기본 설정이 Django 템플릿과 함께 쓰는 구조에 맞지 않을 수 있으므로, 도구의 설정을 이해하고 필요한 빌드 구성을 직접 관리해야 한다.
- 패키지는 빌드 도구, 공통 코드, 독립 서비스처럼 유지보수 단위를 기준으로 나누면 의존성과 변경 영향 범위를 관리하기 쉽다.
- Git 커밋 해시를 활용해 변경되지 않은 패키지의 빌드 결과를 재사용하면 불필요한 빌드를 줄일 수 있다.
- 마이크로 프론트엔드의 적합성은 기술만으로 결정되지 않으며, 팀의 조직 구조와 기존 코드·역량을 함께 고려해야 한다.
소개
거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을 적극적으로 도입해나갈 수 있을지 고민한 경험을 공유합니다. 조유성 / 토스 Full Stack Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 23 - 달리는 토스 앱에 React Native 엔진 더하기
컨퍼런스 SLASH
토스의 사용자와 개발자 경험을 모두 개선해준 ‘React Native’, 도입 과정은 어땠을까요? React Native를 도입하는 과정에서 토스가 마주한 기술적인 도전과 그 해결 과정을 소개합니다. 박서진 / 토스 Frontend Chapter Lead 발표 자료 👉🏻 https://bit.ly/3CePOfI 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #reactnative #사용자경험 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에...
모바일 앱 개발
컨퍼런스 SLASH
토스ㅣSLASH 21 - JavaScript Bundle Diet
컨퍼런스 SLASH
웹사이트 기능이 많아짐에 따라 점점 커지는 JavaScript Bundle Size. 웹사이트 속도는 느려지고, 잠재 고객을 잃을 수도 있습니다. 라이브러리를 사용하는 그리고 제공하는 관점에서 Bundle Size가 커질 수 있는 상황과 해결 방법을 공유합니다. 이한 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
웹 개발 프론트엔드
컨퍼런스 SLASH
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
컨퍼런스 SLASH
실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집도 2. 단일 책임 3. 추상화 총 세 가지 관점으로 클린코드 방법론을 공유합니다. 진유림 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드
컨퍼런스 SLASH
토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
컨퍼런스 SLASH
API를 호출하거나 네이티브 앱과 통신할 때 프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍. React Suspense를 이용하여 우아하게 처리하는 이론과 실전 적용법을 공유합니다. 박서진 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드 로드맵 2개에 담김
컨퍼런스 SLASH
토스ㅣSLASH 21 - 토스 서비스를 구성하는 서버 기술
컨퍼런스 SLASH
Active-Active 데이터센터 운영, Kubernetes와 Istio Service Mesh 운영, API-Gateway, Kafka, Redis, Monitoring Stack 등 토스에서 사용하는 전반적인 기술과 시스템 구성을 공유합니다. 이항령 / 토스 Server Platform Team Leader 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
백엔드 데이터베이스 데브옵스 · 인프라