토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
SLASH 토스 · YouTube
AI 핵심 요약
API 호출이 늘고 여러 데이터에 의존하는 화면을 만들면서 로딩·오류·성공 상태가 뒤섞여 프론트엔드 비동기 처리가 복잡해지는 문제를 다뤘다. 발표자는 React Suspense를 이용해 컴포넌트에서는 성공 경로의 로직에 집중하고, 로딩 상태는 Suspense 경계에, 오류는 Error Boundary에 맡기는 구조를 제안했다. 토스의 내부 제품 메시지 상세 화면에는 Recoil 비동기 셀렉터와 Suspense를 적용해 복잡한 데이터 처리를 단순화하고, 데이터가 준비되는 대로 화면에 단계적으로 표시했다. 선언적으로 작업을 표현하고 공통 처리를 바깥 경계에 위임하면 코드의 책임과 사용자 경험을 함께 개선할 수 있다는 점을 강조했다.
- 비동기 작업이 여러 개면 각 작업의 로딩·성공·실패 상태가 조합되어 UI 로직이 빠르게 복잡해진다.
- 성공 경로를 중심으로 컴포넌트를 작성하고, 로딩과 오류 처리는 적절한 경계에서 공통으로 다루면 책임이 분명해진다.
- Recoil 비동기 셀렉터와 React Query의 Suspense 옵션처럼 사용하는 데이터 라이브러리의 Suspense 지원을 활용할 수 있다.
- Suspense를 일으키는 컴포넌트마다 경계를 두기보다 화면의 적절한 단위에 Suspense와 Error Boundary를 배치한다.
- React Concurrent Mode와 useTransition, useDeferredValue는 비동기 작업뿐 아니라 무거운 동기 작업의 사용자 경험을 개선하는 데도 살펴볼 만하다.
소개
API를 호출하거나 네이티브 앱과 통신할 때 프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍. React Suspense를 이용하여 우아하게 처리하는 이론과 실전 적용법을 공유합니다. 박서진 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
이 자료가 담긴 로드맵
커뮤니티에서 더 보기비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 23 - 프로파일러로 시스템 성능 향상시키기
컨퍼런스 SLASH
서비스 운영 과정 속 여러 장애들, 어떻게 그 원인을 빠르고 정확하게 파악할 수 있을까요? 상황에 맞는 다양한 ‘프로파일러’로 문제 원인을 파악하고 또 해결한 과정을 소개합니다. 조유성 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/42ypWpE 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #profiler #서비스성능 #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작...
백엔드 데브옵스 · 인프라 로드맵 2개에 담김
컨퍼런스 SLASH
토스ㅣSLASH 22 - 스크래핑으로 우아한 조회 경험을 만든 방법
컨퍼런스 SLASH
토스 웹페이지의 한 달 방문 횟수는 약 2억 번에 달합니다. 많은 횟수만큼 유저가 기다리는 시간도 상당했을 겁니다. 서버 사이드 렌더링(SSR)을 이용해 유저의 시간을 아낀 경험을 소개합니다. 김도환 / 토스 Frontend DevOps Engineer 발표 자료 👉🏻 https://bit.ly/3NOx8r9 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
웹 개발 프론트엔드
컨퍼런스 SLASH
거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을 적극적으로 도입해나갈 수 있을지 고민한 경험을 공유합니다. 조유성 / 토스 Full Stack Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
웹 개발 프론트엔드
컨퍼런스 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
백엔드 데이터베이스 데브옵스 · 인프라