비동기 프로그래밍

• 순서가 보장되지 않는 경우
• 좋은 사용자 경험을 위해 필수
• callback, Promise, RxJS

좋은 코드에 대한 생각으로 돌아가자

• 코드의 좋은점 / 나쁜점
• 하는일은 단순하지만 코드가 너무 복잡, 각 프로퍼티에 접근하는 핵심 기능이 코드로 잘 드러나지 않는다

1
2
3
4
5
6
7
function getBazFromX(x){
   if(x === undefined) {
    return undefined;
   }
   if() {}
   if() {}
}

• if 문들이 너무 많음 es6로 단순화 시킬 수 있음

좋은코드특징

• 성공하는 경우만 다루고 실패하는 경우는 catch 절에서 분리해 처리

나쁜코드특징

• 실패, 성공의 경우가 섞여서 처리되는경우

프론트엔드 웹서비스 비동기 처리 어떻게 했나?

• SWR, React Query 사용
• 여러개의 비동기 작업이 동시에 실행된다면?
• 로딩중, 에러, 완료 보통 3개지 상태인데
• 비동기 처리가 3,4개면 더욱 복잡해짐
• 성공하는 경우에만 집중해 컴포넌트를 구성하기 어렵다.
• 2개 이상의 비동기 로직이 개입할 때, 비즈니스 로직을 파악하기 점점 어려워진다. -> React Suspense for Data Fetching으로 해결할 수 있다.

React Suspense for Data Fetching

• 성공한 경우에만 집중
• 로딩상태와 에러상태 분리
• 동기와 거의 같게 사용
• low-level api 제공
• 함수의 에러상태를 catching 하는 것처럼 에러상태는 ErrorBoundary
• 비동기를 동기적으로 바꿔주는 suspense를 사용

토스팀에서 적용한 제품

• TUBA (A/B 테스트 설정, 전환율 분석, 알림 등)
  • Recoil 비동기 리소스 selector, selectorFamily로 정의할수 있다.
  • 데이터가 준비되는대로 하나씩 자연스럽게 보여줌
  • 에러 처리의 복잡도를 낮춘방법 : try-catch

대수적 효과

• 실제 관련된 처리는 컴포넌트를 감싸는 부모함수에 위임

React Concurrent Mode, useTransition, useDeferredValue