javascript에서 비동기를 모른다? 다시 공부하십쇼 feat : callback hell

hojun lee · 10/25/2024

자바스크립트를 공부하는데 async / await 가 짱이다 라고 생각한다면 당신은 공부를 더 하셔야 합니다. 근데 저도 잘 몰랐으니까 같이 공부합시다.

async / await가 왜 좋은지를 알려면 역사를 알아야하지. sveltekit에서 비동기

비동기의 역사

Callback 지옥과 비동기 처리의 발전: SvelteKit에서의 변화

Callback 지옥의 문제 과거의 JavaScript에서는 비동기 처리를 위해 주로 콜백(callback) 함수를 사용했습니다. 이 방식은 여러 비동기 작업이 중첩될 경우, 코드가 복잡해지고 가독성이 떨어지는 "콜백 지옥(callback hell)"이라는 문제를 초래했습니다. 예를 들어, 여러 개의 비동기 요청을 처리하기 위해 중첩된 콜백을 사용하면 다음과 같은 형태가 됩니다:

getData1((result1) => {
  getData2((result2) => {
    getData3((result3) => {
      // 결과를 처리하는 코드
    });
  });
});

이런 구조는 코드의 가독성을 떨어뜨리고, 오류 처리가 복잡해지며, 유지보수가 어려워진다는 단점이 있습니다.

비동기 함수와 Promise의 등장 이후, JavaScript는 Promise를 도입하여 비동기 처리를 보다 쉽게 할 수 있도록 개선했습니다. Promise를 사용하면 비동기 작업의 결과를 얻기 위해 콜백을 중첩할 필요가 없어지며, 코드가 훨씬 깔끔해집니다:

getData1()
  .then(result1 => getData2())
  .then(result2 => getData3())
  .then(result3 => {
    // 결과를 처리하는 코드
  })
  .catch(error => {
    // 오류 처리
  });

하지만 여전히 여러 개의 비동기 작업을 병렬로 처리하기에는 한계가 있었습니다.

async/await의 도입 JavaScript ES2017에서는 async/await가 도입되어 비동기 코드를 더욱 직관적으로 작성할 수 있게 되었습니다. async/await를 사용하면 비동기 함수의 호출을 동기 코드처럼 읽기 쉽게 만들 수 있습니다:

async function fetchData() {
  try {
    const result1 = await getData1();
    const result2 = await getData2();
    const result3 = await getData3();
    // 결과를 처리하는 코드
  } catch (error) {
    // 오류 처리
  }
}

SvelteKit에서의 비동기 처리 SvelteKit에서는 이러한 async/await 패턴을 활용하여 비동기 요청을 더욱 효율적으로 처리할 수 있습니다. 특히, 여러 비동기 요청을 병렬로 처리할 수 있는 Promise.all 기능을 통해 초기 렌더링 성능을 크게 개선할 수 있습니다. 예를 들어:

async function loadData() {
  try {
    const [
      monthlyVisitorCount,
      loginConflicts,
      { inProgressCount, uploadPendingCount, processingCount },
      upcomingEventList,
      inProgressToCompletedCount,
      customerInquiryCount,
      prevDayVisitLog,
      thisMonthVisitLog
    ] = await Promise.all([
      getMonthlyVisitorCount(),
      getLoginConflictsCount(),
      getSupportStatus(),
      upcomingEvents(),
      completedSupportRequests(),
      getCustomerInquiries(),
      getPrevDayVisitLog(),
      getThisMonthVisitLog()
    ]);
    // 데이터 처리
  } catch (error) {
    // 오류 처리
  }
}

이와 같이 SvelteKit을 사용하면 비동기 코드의 가독성과 유지보수성을 높이고, 성능 최적화를 통해 사용자 경험을 향상시킬 수 있습니다.

결론

과거의 콜백 지옥에서 비동기 처리 방식의 발전을 통해, SvelteKit과 같은 현대적인 프레임워크에서는 더 간결하고 효율적인 코드 작성을 가능하게 합니다. 이를 통해 개발자는 복잡한 비동기 로직을 쉽게 관리하고, 사용자에게 더 나은 경험을 제공할 수 있습니다. ORM 내에서 특히 prisma같은 경우는 $transaction으로 함수로 모든 성공을 보장할 수도 있습니다. 일관성 굿굿 이는 추후 공부해보시죠