[함수형 코딩] 비동기 타임 라인 컨트롤

쏙쏙 들어오는 함수형 코딩

 

앞에서 반복적으로 나오던 내용이 암묵적 인자를 줄여야 한다는 것이었다. 앞선 내용을 읽으면서 유지 보수를 위해, 그리고 예측 가능한 코드를 만들기 위해 암묵적 인자를 줄여야 한다고 생각했다. 이번 챕터를 읽으면서는 유지 보수나 DX적인 부분을 넘어서, 안정적인 코드를 유지하기 위해 암묵적 코드들을 최소화 해야한다는 생각이 들었다.

비동기는 타임라인을 예측하기가 어렵다. 그나마 자바스크립트는 싱글 스레드이기 때문에 덜 할 수 있지만 멀티 스레드를 가지고 있는 언어일수록 더욱 타임라인을 예측하기가 어렵고 순서를 의도대로 유지하는 것에도 한계가 있다. 때문에 최대한 순서를 예측 가능하게 짜는 것도 중요하지만, 순서가 예측한대로 흘러가지 않더라도 버그가 발생하지 않도록 구조를 만드는 것이 중요하다.

이번 책에서 가장 핵심적이라고 생각하는 부분은 아래 두 가지이다.

전역 변수를 지역 변수로 바꾸기, 전역 변수를 인자로 바꾸기

전역으로 변수를 관리하게 된다면 하나의 함수를 실행함에 있어서도 전체 코드에 영향을 바로 미치기 때문에 순서를 100% 컨트롤 하지 못하는 상황에서는 의도한 결과값을 얻기 어렵다. 하지만 이를 지역 변수로 컨트롤하고, 이 지역 변수를 return 하여 관리한다면 결국 ‘액션’ 형태로 동작하던 것이, input에 의해 output을 반환하는 ‘계산’ 함수로 바뀌기 때문에 버그를 방지할 수 있다.

예시를 들어서 어떻게 버그를 해결할 수 있는지 비교해보겠다.

🔴 Before: 암묵적 입력으로 인한 버그

// 수량은 전역 상태 또는 외부 상태로 관리됨
**let quantity = 1;**

async function updateTotalPrice() {
  const res = await fetch(`/api/price?quantity=${quantity}`);
  const { total } = await res.json();
  displayTotalPrice(total);
}

// 사용자 수량 변경 시 호출됨
// 버튼을 빠르게 클릭할 경우, quantity가 3 기준이 되어야 할 때도 2를 기준으로 결과값이 반환될 수 있음
incrementBtn.addEventListener('click', () => {
  **quantity += 1;**
  updateTotalPrice();
});

❗ 문제 상황 예시

1. quantity = 1
2. 사용자 빠르게 2번 클릭 → quantity가 2 → 3으로 변경
3. 첫 번째 요청이 느리게 응답되면 /price?quantity=2 응답이 나중에 도착해 총액을 덮어씀
4. 총액이 3개가 아닌 2개 기준으로 표시됨 → 사용자 혼란

🟢 After: 암묵적 입력 제거 + 최신 상태만 반영

// 수량은 전역 상태 또는 외부 상태로 관리됨
**let quantity = 1;**

async function updateTotalPrice(updatedQuantity) {
  const res = await fetch(`/api/price?quantity=${updatedQuantity}`);
  const { total } = await res.json();
  
  // 응답 시점에 여전히 같은 수량이면 적용 -> 최종 수량 기준으로 반영됨
  if (updatedQuantity === quantity) {
	  displayTotalPrice(total);
  }
}

// 사용자 수량 변경 시 호출됨
incrementBtn.addEventListener('click', () => {
  **quantity += 1;**
  updateTotalPrice(quantity);
});

✅ 개선 포인트

• updateTotalPrice가 더 이상 외부 quantity에 의존하지 않음
• 수량을 명시적으로 전달하고, 응답이 도착했을 때 최신 수량인지 확인
• 과거 요청 응답은 무시되어 잘못된 총액 표시 방지