2024년 02월 01일 비동기함수와 비동기처리, Promise-then, async-await, 백엔드 연결

1. 비동기

1-1. 비동기 함수

기본적으로 자바스크립트는 동기적이다.

= 호이스팅(변수 및 함수 선언)이 된 후부터 코드가 작성된 순서에 따라 작동한다. 

 

※ 비동기 함수는 본인이 끝나는 것을 기다리지 않고 다음 줄을 바로 실행하도록 한다.

※ 오래 걸리는 작업을 기다리지 않고 다음 작업을 먼저 하게 하기 위함.

 

1-2. 비동기 함수의 종류

[ js 내에 이미 있는 비동기 함수 ]

1. 시간을 이용하는 함수 (setTimeout, setInterval)
2. 이벤트 등록 함수 (addEventListener)
3. 백엔드 통신 함수 (fetch)
4. 리액트 내에서의 비동기 함수 (useEffect)
5. 데이터베이스 연결 함수

⇒ 위 함수들의 공통점: 시간이 오래 걸리는 함수임. 함수의 매개변수로 함수를 받음.

 

[ 개발자가 직접 만드는 비동기 함수 ] 

 

1-3. 비동기 처리

비동기 함수가 끝나고 나서 실행되었으면 하는 내용을 처리하는 것을 비동기 처리라고 한다.

 

[ 비동기 처리 방법의 종류 ]

 

1. Callback: js 태초부터 존재했던 비동기 처리 방법(es5문법)

매개변수로 보내어지는 함수를 "Callback함수"라고 한다.

※ 내 함수를 나중에 다시 불러줘 Callback 해줘!

setTimeout( ()=> {

    console.log("1초 기다렸음")

}, 1000)

매개변수가 되는 console.log("1초 기다렸음") <-이것이 콜백함수에 해당하게 된다.

 

※ 콜백함수를 통한 비동기 처리의 문제: 코드에 탭이 너무 많아서 가독성이 떨어진다. 

 

2. Promise/ Then: Callback의 문제점을 해결하고자 ES7버전에 출시된 비동기 함수, 비동기 처리 명령어

Promise is a Javascript object for asynchronous operation.

 

정해진 장시간의 기능을 수행하고나서 정상적으로 기능이 수행되어졌다면 성공의 메시지와 함께 처리된 결과값을 전달,

기능에 문제가 발생하였다면 에러를 전달해준다. 

const Promise = new Promise((resolve, reject) => {

    // 네트워크에서 데이터를 받아오는 등의 무거운 작업들 수행

});

 

Promise 안에서 수행하는 작업들은 대게 네트워크 통신, 파일 확인 등의 무거운 작업들임 

이것들을 동기적으로 처리한다면 그 다음 라인의 코드가 실행되는 데 더 오랜 시간이 걸려 문제가 생길 것이기 때문에

Promise를 이용해 비동기처리를 하는 것이다. 

 

※ 주의: 새로운 Promise가 만들어지는 순간 안에 있는 작업을 자동적으로 실행한다(executor 함수가 바로 실행된다).

하지만 만약 사용자가 요구했을 때에만(버튼을 눌렀을 때 등) 그 작업을 실행해야한다면? 불필요한 작업이 실행되지 않도록 주의해야함

 

const Promise = new Promise ((resolve, reject) => {

    console.log("작업 중....");

    setTimeout(() => {

        resolve("success");

        reject(new Error("no network"));

    }, 2000);

});

Producer의 입장에서는, 비동기적으로 처리하고 싶은 내용을 적고

성공적으로 잘 수행되었다면 resolve를 호출하고, 실패했다면 reject를 통해 에러와 함께 에러의 이유를 전달한다. 

Promise

    .then((value) => {

        console.log(value);

    })

    .then((value) => {

        console.log(value);

    })

    .catch((error) => {

        console.log(error);

    })

Consumer의 입장에서는, 성공한 값(then) 혹은 실패한 에러(catch)를 받아와서 원하는 방식으로 처리해준다. 

then을 이용해 계속해서 chaining을 할 수 있다. (성공하면 이렇게, 또 성공하면 이렇게, .....)

(+) finally를 통해 기능의 성공과 실패에 상관없이 원하는 것을 보여줄 수도 있음.

 

3. Async-Await: ES8버전에 출시된 then 처리 방법을 조금 더 좋게 바꾼 형태

(Promise를 좀더 간편하게 쓸 수 있게 하는 syntactic sugar임)

 

async라는 키워드를 함수 앞에 쓰면 코드가 자동으로 Promise로 바뀌는구나!

 

⇒ 요즘은 promise로 만들고, async-await으로 처리함