프로그래머스 데브코스 39일차 with. TS 웹 풀스택

📚요약

지난 시간은 주문 API를 구현하는 중이었습니다. 구현에 필요한 비동기에 관련된 부분을 먼저 정리해보겠습니다.

 

📖비동기 처리

비동기와 동기는 요청한 작업의 완료 여부에 따라 작업을 순차적으로 수행할지를 결정하는 것 입니다. 동기는 요청한 작업의 완료를 기다렸다가 다음 작업을 수행하고, 비동기는 요청한 작업의 완료를 기다리지 않고 다른 작업을 수행합니다. 그렇기에 동기는 작업이 순차적으로 진행되는 것으로 보이고, 비동기는 작업이 순차적으로 진행되지 않는 것으로 보입니다.

 

비동기를 사용할 때 주의사항으로는 요청의 결과가 다음에 시작되는 작업에 영향을 미치면 안된다는 점입니다. 잠깐 생각해보면 value=2 f1(value)함수에서 2배 해주고 f2(value)함수에서 f1()함수의 결과에 + 1을 해준다고 가정합니다. 그런데 이를 비동기로 처리하면 원하는 결과는 2*2+1인데 해당 결과가 아닌 2+1의 결과가 나올 수 있습니다. 따라서 비동기를 사용할 때는 해당 결과가 다음 작업에 영향을 미치는지 확인할 필요가 있습니다.

 

비동기를 처리하는 방법에는 여러 방법들이 있습니다.

1. Callback 함수 : 비동기를 순차적으로 처리하기 위한 함수. callback hell이라는 문제점이 발생할 수 있다.
2. Promise : 비동기 처리 전용 객체. then()으로 정상적인 결과의 처리를 catch()로 에러의 결과를 처리한다.
3. async/await : Promise를 기반으로 동기 코드처럼 작성이 가능한 키워드. await 키워드의 경우 async 키워드로 감싼 함수 내부에서만 사용할 수 있다.

📄실습

비동기 처리라는 가정을 위해 setTimeout()을 사용해 임의로 조정하겠습니다.

// callback
const test = (callback) => {
  setTimeout(() => {
    const value = 100;
    callback(value);
  }, 2000);
};

test((num)=>{
  let data = num*2;
  console.log(data);
});

// Promise
const promise = new Promise((resolve,reject) => {
  setTimeout(() => {
    const value = 100;
    resolve(value);
  }, 2000);
});

promise
    .then((result) => {
      let data = result*2;
      console.log(data);
    })
    .catch((error) => {
      console.log(error)
    });

// async&await
const test = async () => {
  let data = await promise;
  data *= 2;
  console.log(data);
}

test();

// 모두 같은 결과 200

 

다음 시간에는 비동기를 활용해 주문 API-주문하기에서 여러 sql을 날리는 상황을 실제로 구현해보겠습니다.

❔▪❓

Q. 여러 쿼리문을 처리하는데 비동기를 사용하는 방법만 있는 것인가?

A. 다음 블로그를 참고하면 mysql을 활용해 다중 쿼리를 처리하는 방법을 확인할 수 있다.

다중쿼리 처리 방법, sql에 파라미터 매핑하는 다양한 방법

[Node.js 8-2강] 다중쿼리 처리 방법, sql에 파라미터 매핑하는 다양한 방법

 

다음 시간에 계속...

 

출처 & 참고

김송아 강사님의 강의

자바스크립트의 핵심 비동기 완벽 이해, inpa, 2024.05.30

완벽히 이해하는 동기/비동기 & 블로킹/논블로킹, inpa, 2024.05.30