프론트에서 백엔드 로그인 API와 연결하는 중에 다음 오류가 발생했다.

오류를 보면, 서버로부터 데이터를 못가져오는 것을 확인할 수 있었다.

서버 코드를 살펴보니, 로그인 API를 작성한 부분에서 비동기로 처리되는 부분에 await을 사용해주지 않아서 해당 코드가 실행이 되지 않았다.

비밀번호를 제외한 유저 정보를 가져오기 위해서, User테이블에서 findOne 메서드를 사용해서 데이터를 가지고 오도록 코드를 작성했는데, 이 부분이 비동기로 처리됐던 부분인데, await을 사용해주지 않아서 response.data 에 데이터가 빈 객체로 들어간채로 프론트로 넘어가고 있었다.

다음과 같이 await을 추가해주니, 오류가 깔끔하게 해결됐다.

async --- await ---

기본적으로, async/await 문법은 비동기처리를 동기적으로 처리하기 위해서 사용한다.
기존 Promise + then 으로 비동기 로직을 동기적으로 처리하던 방법에서 조금 더 직관적이고 체이닝으로 인한 코드의 길이가 길어지는 단점을 해결할 수 있다.