MySql과 같은 DB에 연결하거나 외부의 라이브러리를 사용하여 어떠한 기능 수행 후 return값을 받아오려고 할 때에는 시간이 필요하다. 따라서 코드가 실행될 때 해당 부분을 만났을 때 바로 아래쪽의 코드로 넘어가지 않고 return값을 받아올 때까지 기다려주는 문법이 async와 await이다.

📌 async와 await

• async와 await는 자바스크립트의 비동기식 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 콜백 함수 형태의 비동기식 처리와 Promise의 단점을 보완하고 개발자가 읽고 사용하기 쉬운 코드를 만들기 위해 공개된 문법이다.
• async와 await는 한 쌍으로써 진행하려고 하는 비동기식 처리 코드 앞에 await가 붙이고 해당 작업이 진행되고 있는 function에 async라는 예약어를 반드시 붙여주어야 한다.
• 여기서 주의할 점은 비동기식 처리 메소드가 반드시 Promise객체를 반환해야 async와 await기능이 제대로 동작한다.

Example

다음은 프론트엔드로부터 사용자의 email을 전달받았을 때 해당 email이 이미 서비스에 등록된 이메일인지 DB에서 찾아 확인하는 코드이다.

async checkIsAvailable({ email }) {
    const user = await this.userRepository.findOne({ where: { email } });
    if (user) {
      throw new UnprocessableEntityException('이미 사용중인 아이디입니다.');
    }
  }

위와 같은 코드가 작성되었을 때 우리는 먼저 DB에 해당 email을 가진 user정보가 있는지 확인하고 해당 값을 리턴 받아와야한다. 이후 user정보의 존재 유무에 따라 이미 존재한다면 '이미 사용중인 아이디입니다.'라는 메시지를 프론트엔드에 전달해주고 없는 정보라면 회원가입을 진행할 수 있도록 해야한다. 이 때의 프로세스는 user정보를 반드시 먼저 가져와야하므로 해당 작업 앞에 await를 적어주고 작업이 진행되는 function에 async를 붙여주었다. async와 await로 인해 userRepositofy.findOne()작업(Promise객체를 반환하는 작업)은 코드의 실행 순서를 보장받을 수 있게되었다.

async와 await의 예외처리

• try-catch문을 사용하여 예외처리를 해준다. 위의 코드에 예외처리를 적용하면 아래와 같이 코드를 작성할 수 있다. userRepository.findOne()을 실행하다 오류가 발생되면 catch로 해당 오류를 잡아내어 각 에러의 유형에 맞게 에러 코드를 처리해주면 된다.

async checkIsAvailable({ email }) {
  	try{
      const user = await this.userRepository.findOne({ where: { email } });
      if (user) {
        throw new UnprocessableEntityException('이미 사용중인 아이디입니다.');
      }
    }catch(error) {
    	console.log(error) 
    }
  }

확실히 async와 await를 사용할 경우 코드를 읽을 때 훨씬 더 빠르게 이해할 수 있었다. 내가 작성한 코드를 다른 사람이 봤을 때에도 어떤 역할을 수행하고 어떤 프로세스를 거치고 있는지 쉽게 파악할 수 있어 개발하는데 매우 용이하다.

---

📌 참고

• https://joshua1988.github.io/web-development/javascript/js-async-await/