async&await

이번 시간에는 async와 await에 대해서 다루어 보겠습니다.

| async

먼저 async 부터 보죠. async는 함수 앞에 붙일 수 있는 예약어 입니다.

const functionName = async () => {}; //A

async function functionName2() {}; //B

화살표 함수에는 A와 같이, 일반 함수에는 B와 같이 키워드를 붙일 수 있습니다.

async를 붙인 함수는 자동적으로 Promise 객체를 반환합니다.

const functionName = async () => {
  return 1;
}; //A

const funcionName2 = () => {
	return new Promise((resolve, reject)=>
    	resolve(1);
    )
}; //B

위 예시에서 functionName과 functionName2는 정확히 같은 역할을 하는 것이죠.

다른 말로, async를 붙인함수를 호출할 때는 .then() 메소드와, .catch() 메소드를 사용할 수 있는 것이죠.

functionName().then((data)=>console.log(data))

이렇게 functionName은 1을 반환(resolve(1))하기 때문에, data를 console.log()하면 1이 찍히겠죠?

| await

await은 말 그대로 기다려주는 키워드입니다. 오래 걸릴 것 같은 구문 앞에 await를 써주시면 됩니다.

const 결과물 = await 시간이 오래 걸릴 것 같은 코드;
const data = await axios.get("http://localhost:8000/posts); //Ex

여기서 시간이 오래 걸릴 것 같은 코드는 비동기 처리가 필요한 것들입니다.

파일을 읽고 쓰거나, 긴 계산을 하거나 하는 등의 코드들이 쓰입니다. 가장 많이 쓰이는 예시는 Ex와 같이 프론트에서 백엔드로부터 데이터를 요청하는 과정을 기다리는 것입니다.

원래는 async로 이루어진 함수 내에서만 사용할 수 있었지만, 최신 javascript에서는 그냥 사용할 수 있습니다.

async function 함수이름(){
	const 결과물 = await 시간이 오래 걸릴 것 같은 코드;
}

위와 같이 await 구문을 사용하는 것이 정석이긴 합니다. async 함수 안에서 await을 사용했죠. 전 버전과 호환 문제가 있을 수 있으니 이러한 정석적인 방식을 사용하는 것을 추천드립니다.

| Promise를 async&await으로 바꾸기

그럼 간단하게 기존에 Promise로 만들었던 세탁기 예시를 async&await으로 바꿔보면서 끝내겠습니다.

세탁() //A
.then((세탁의 결과물)=>건조(세탁의 결과물)) //B
.then((건조의 결과물)=>빨래개기(건조의 결과물)) //C
.then((개진 빨래) => 옷장에넣기(개진 빨래)) //D
.catch((에러)=>console.log(에러)) //E

기존의 예시입니다.

async function 빨래하기(){
	try {
      const 세탁결과물 = await 세탁();
      const 건조결과물 = await 건조(세탁결과물);
      const 개진 빨래 = await 빨래개기(건조결과물);
      const 결과물 = 옷장에넣기(개진빨래);
      return 결과물;
    } catch (error) {
      console.log(error)
    }
}

async&await으로 바꾼 예시입니다. 에러 처리를 위해 javascript의 기본 문법인 try&catch 문을 사용한 것이 눈에 띕니다.

다음부터는 본격적으로 Express 프로젝트를 만드는 법을 알아보겠습니다. 프론트엔드의 경우 이제부터는 백엔드의 영역이기 때문에 다음 장은 보지 않으셔도 됩니다.