동기, 비동기란?

시연·2023년 7월 19일

때는 7월 초반쯤? 아마도 그쯤 갑자기 앞당겨진 전공동아리 정식 인원 면접을 봤다. 와 그 숨이 콱 막히고, 여름인데도 너무 추워서 겉옷을 입고 싶어지는 그 면접장 분위기를 잊지 못할 것이다...
아무튼 면접이 계속 진행되던 중 선배님께서 동기 처리 방식과 비동기 처리 방식에 대해 자유롭게 서술해 주세요.라는 질문을 던지셨고, 나는 대답했다. "네?"...
그래서 동기 처리 방식과 비동기 처리 방식에 대해 알아보려 한다!

1. 동기 처리 방식 📖

✏️ 동기(synchronous : 동시에 일어나는)

요청 결과가 동시에 일어나는 방식으로 요청을 보낸 후 응답을 받아야 다음 동작이 진행된다.
뜻 그대로 요청과 결과가 한 자리에 동시에 나타나는 것으로 사용자가 서버로 요청을 보냈을 경우 요청에 대한 답을 받기 전까지는 다른 것을 못하고 기다려야 한다.

☀️ 장점 : 설계가 매우 간단하고 직관적이다!

🌧️ 단점 : 결과가 주어질 때까지 아무것도 못하고 대기해야 한다.

2. 비동기 처리 방식 📖

✏️ 비동기(Asynchronous : 동시에 일어나지 않는)

요청과 결과가 동시에 일어나지 않는 방식으로 요청과 결과가 동시에 일어나지 않는다.
요청한 곳에 결과가 나타나지 않고, 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 기다리지 않고 다른 것을 수행할 수 있으며 서버로 다른 요청을 보낼 수 있다.

☀️ 장점 : 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있다!(자원을 효율적으로 사용가능)

🌧️ 단점 : 동기방식보다 설계가 복잡하다.

3. 비동기 처리 구현 방법

3-1. Callback 함수

Callback 이란?

다른 함수가 실행을 끝낸 후 나중에(특정 시점에) 호출되는 함수이다. (함수의 인수로 호출된다.)
파라미터로 함수를 전달받아서 함수 내부에서 실행된다.

Callback 함수 예제

const message = function() {
  console.log("Hi, I'm siyeon");
}
setTimeout(message, 3000); // setTimeout함수는 자바스크립트에 내장된 함수

주의할 점

1. this를 사용한 콜백함수
2. 콜백지옥

콜백지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 깊어지는 현상이다. (가독성이 떨어지고 코드를 수정하기 어려워진다)
콜백지옥을 Promise, async/await, Generator 등을 사용해 방지할 수 있다.

3-2. Promise

Promise란?

자바스크립트 비동기 처리에 사용되는 객체이다.
생성부터 종료까지 3가지 State(process)를 갖는다.

// [문법 ]

const promise객체 변수 = new Promise((resolve, reject) => {

const 결과 = 실행코드;   

 if (reject 조건){

       return reject(에러객체); //에러 반환

    }

     resolove(결과); //성공처리        

  });

return promise객체변수

const promise = new Promise((resolve, reject)=>{
	//처리 내용
})
 
promise.then(
	//resolve가 호출되면 then이 실행
)
.catch(
	//reject가 호출되면 catch가 실행
)
.finally(
	//콜백 작업을 마치고 무조건 실행되는 finally (생략 가능)
)

상태	설명
Pending(대기)	비동기 로직 처리에 비완료 상태
Fulfilled(이행)	비동기 로직 처리가 완료된 상태, Promise 결과값 반환
Rejected(실패)	비동기 로직 작업 실패 또는 오류

ES6에 도입된 기능이다.
결과를 값으로 받아서 저장할 수 있다는 것이다. 즉, Promise는 반환만 하면 되어, 따로 Callback함수를 따로 받을 필요가 없다.
따라서 Promise는 결과 그 자체를 값으로 받기 때문에, 연속으로 실행하는 코드에선(then() 이용) Callback보다 더 가독성 있는 코드가 된다.

3-3. async/await

async/await 이란?

Promise를 더 쉽게 사용할 수 있게 해주는 문법이다. (어떤 resolve(결과) 부분에서 실패가 났는지 파악하기 쉽다)
비동기식 코드를 동기식으로 표현하여 간단하게 나타낸 것이다.
async/await는 promise 객체를 반환한다 -> then을 사용할 수 있다.

async/await 기본 문법

async function 함수명() {
  await 비동기 처리 메서드명()
}

함수 앞에 async 라는 예약어를 붕ㅌ인다.
함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await을 붙인다.

1. async 함수

async는 function 앞에 위치한다. (해당 함수는 항상 프로미스 객체를 반환한다.)
-> async가 붙은 함수는 반드시 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 변환한다.
async 함수는 화살표 함수, 함수 표현식 으로 정의가 가능하다.

2. await

await은 async 함수 안에서만 동작한다.
자바스크립트는 await을 만나면 프로미스가 처리(settled)될 때까지 기다리고 그 결과는 그 이후에 반환된다.

async/await 예제

// 3초 동안 기다리고 이름을 리턴하는 함수
async function getName() {
  await delay(3000);
  return 'siyeon';
}

// 1초 동안 기다리고 나이를 리턴하는 함수
async function getAge() {
  await delay(1000);
  return 18;
}

getName().then(console.log); // 결과 : siyeon
getAge().then(console.log); // 결과 : 18