await 와 async

 

컴파일 언어인 java와 그 프레임워크 spring을 기반으로 공부했던터라 자바스크립트에 대한 이해가 부족했었다. 

node.js 로 백엔드 예제를 만들다가 만난 경험을 적어본다.

 

자바스크립트는 싱글 스레드 기반의 인터프리터 언어이다. 때문에 동시성을 갖고 작업을 하기 위해서는 비동기 방식이 쓰이게 된다. 

 

동기

동시에 일어난다는 뜻을 가지고 있고 어떤 요청이 들어왔을 때 응답이 한자리에서 동시에 일어난다는 의미

한가지 작업을 하면 결과가 반환 될 때까지 다른 작업이 대기한다.

비동기

어떤 요청이 들어오면 한자리에서 동시에 응답이 일어나지 않는다.

여러 요청을 번갈아가며 수행한다.

 

비동기 처리가 백그라운드에서 동작하면 동시성을 갖는 작업의 결과 중 어떤 작업이 먼저 결과가 반환될지 알수가 없다.

때문에 작업 완료된 결과를 받아 처리해야하는 경우 비동기 처리에 대한 처리를 해야만 한다.

 

이때 사용되는 대표적인 방법이 콜백함수와 Promise객체가 있다.

 

콜백함수 예시

getAllSum(function(x){
    getSum(x, function(y){
    	getPow(y){
        	return y*y;
        }
    });
});

 

프로미스 예시

fetch('http://localhost:3060/api')
    .then(response => response.json())
    .then(json => ....)
    .catch(error => constol.error(error));

 

이러한 문제에 대한 해결로 await async가 탄생하였다.

 

await / async 예시

async function getData() {
    const response = await fetch('https://example.com/api');
    const data = await response.json();
    const response2 = await fetch(`https://example.com/api/${data.id}`);
    const data2 = await response2.json();
    console.log(data2);
}

getData();

 

function 키워드 앞에 async를 붙혀주고 비동기로 처리되는 작업에 await을 붙여 해당 작업의 결과를 기다려 다른 작업에서 참조가 가능하게 한다.

 

async/await 는 내부적으로는 Promise를 사용해서 비동기를 처리하고 있다.

코드 작성 부분의 유지보수 위해 문법적 편의성만 제공해 준다.

 

공부하게 된 계기로 직면했던 트러블 슈팅을 간단하게 적어본다.

 

기존 코드

return req.login(user, async(loginErr)=>{
            if(loginErr){
                console.error(loginErr);
                return next(loginErr);
            }
            const userResponse = User.findOne({
                where:{ id: user.id },
                attributes: {
                    exclude: ['password']
                },
                include: [{
                    model: Post,
                    as: 'Posts',
                },{
                    model: User,
                    as: 'Followings',
                },{
                    model: User,
                    as: 'Followers',
                }]
            });
            return res.status(200).json(userResponse);
        }

 

User.findOne()을 통해 User DB를 조회하여 올 때 await을 적용시켜 주지 않아 아래와 같이 참조하지 못하였다.

 

오류

처음 만났을 때 쿼리도 정상적으로 잘 나가서 한동안 찾지 못하였지만 await 가 붙지 않아 비동기 처리에 문제가 있었음을 찾을 수 있었다.

 

수정 (await 키워드 추가)

return req.login(user, async(loginErr)=>{
            if(loginErr){
                console.error(loginErr);
                return next(loginErr);
            }
            //수정한 부분
            const userResponse = await User.findOne({
                where:{ id: user.id },
                attributes: {
                    exclude: ['password']
                },
                include: [{
                    model: Post,
                    as: 'Posts',
                },{
                    model: User,
                    as: 'Followings',
                },{
                    model: User,
                    as: 'Followers',
                }]
            });
            return res.status(200).json(userResponse);
        }

 

결과