Let's talk about Async in JavaScript

Minwoo Gwak·2023년 4월 24일
0

안녕하세요 여러분! 오늘은 자바스크립트의 비동기에 대해서 이야기해 볼까 합니다. 자바스크립트를 사용하면서 비동기라는 말을 들어본 적 있으시죠? 저는 비동기라는 말 자체도 처음에는 알아듣기 힘들어서 개념정리하는데 시간이 많이 들었어요 ㅠㅠ

그래서 비동기가 뭐야 도대체

우선 비동기에 대해 알아보기 전에, 반대되는 개념인 동기를 간단히 이해해봅시다. 동기(Synchronous)는 말 그대로 순차적으로 작업이 진행되는 방식입니다. 작업 A와 작업 B가 있다면, 작업 A가 끝난 후 작업 B가 진행되는 거죠.

하지만 여기서 문제가 발생합니다. 작업 A가 시간이 오래 걸리는 작업이라면, 작업 B는 작업 A가 끝날 때까지 기다려야 해요. 이럴 때 비동기(Asynchronous)가 등장합니다!

비동기는 작업 A와 작업 B를 동시에 실행하되, 작업 A가 끝나기 전에 작업 B가 먼저 실행될 수 있는 방식이에요. 자바스크립트에서 비동기 처리는 웹 앱의 성능을 향상시키고 사용자 경험을 개선하는 데 큰 역할을 합니다.

자바스크립트 비동기 처리 방법 🛠️

그럼 이제 비동기 처리를 어떻게 할 수 있는지 알아봅시다! 자주 사용되는 세 가지 방법을 소개하겠습니다.

콜백 함수 (Callback Function)
콜백함수는 어떤 함수에 파라미터로 전달되어 그 함수 내부에서 실행되는 함수예요. 작업이 끝난뒤 실행되어야 할 동작을 콜백함수로 정의해서 사용하곤 해요. 하지만, 중첩된 콜백함수가 많아지면 코드가 복잡해지고 가독성이 떨어지는 콜백지옥(Callback Hell)에 빠질 수 있죠.

프로미스 (Promise)
프로미스는 콜백지옥의 문제를 해결하기 위한 자바스크립트 비동기처리패턴 중 하나에요. 프로미스는 성공(resolve)과 실패(reject)로 나누어 처리하는 객체로, 코드를 더욱 간결하고 가독성 좋게 작성할 수 있어요.

async/await
async/await는 ES2017에서 도입된 비동기 처리 패턴으로, 프로미스를 더욱 간결하게 사용할 수 있게 해줍니다. async 키워드가 붙은 함수 안에서만 await을 사용할 수 있어요. await은 프로미스가 처리될 때까지 기다리고, 처리된 값을 반환합니다.

다음 포스트에서는 세가지 방법의 예시를 알아보겠습니다!

profile
CS and Math student at the University of Illinois with a passion for web development and aspiring to become a frontend developer.

0개의 댓글