fetch 지연으로 인한 오류

개인 과제 진행 중 전역변수로 만든 array가 이상하게 값이 자꾸 안들어갔다.
이전 게시글에서 언급한 async / await 부분에서 문제가 있는 줄 알았는데 계속 정확히 어떤 문제인지 인지하지 못하고 있었다.
오랜 시간 끝에 그 문제를 해결하였는데, 과정을 살펴보겠다.(초보적인 실수이다..)

fetch 지연으로 인한 지연

간단하게 코드부터 보자면

let array1 = [];
const getData = async () => {
    try {
        const res = await fetch('api주소', options);
        const data = await res.json();
        console.log(data);
        data.results.forEach(e => {
            array1.push(e);
        });
    } catch (error) {
        console.log("error");
    }
}
getData();
console.log(array1);

위와 같은 코드이다.
array1 이라는 배열을 만들어 주고 api 호출을 통해 데이터를 받아온 뒤,
해당 데이터를 array1에 하나씩 push해주는 코드를 함수표현식으로 작성하였다.

필자는 자바스크립트 왕초보라 전역에 배열을 선언해주고, getData 함수에서 배열 안에 값을 넣어주면 당연히 잘 돌아갈줄 알고 싱글벙글했었다.

그러나 현실은 저 array1안에 아무 값도 들어가지 않았다.
이유는 의외로 간단했다.

getData()를 호출하고난 뒤 바로 콘솔에 찍었을 때, 배열에 값이 아직 안들어갔던 것.
fetch는 인간은 느끼지 못하겠지만 내부에 분명 지연시간이 있을 것이고, 그 지연으로 인해 array1에 데이터가 들어가지 않은 시점에서 콘솔을 불러왔기 때문이었다.

어? 그러면 비동기 처리해서 await붙여주고 기다리게 하면 되는거 아니에요?

모두가 알고있겠지만 async 함수 내에서 getData를 불러주는게 아니기 때문에 await는 사용할 수 없다.

굳이 사용하겠다면 새로운 함수를 만들어 준 뒤 async로 선언해주고,
getData 함수에서 array1을 리턴으로 뿌려준 뒤,
await로 getData를 받아주면 된다.

//getData()에서 return array1을 추가해준 뒤.
...
...
async function here() {
	const array2 = await getData();
    console.log(array2);
}

본인은 이렇게 따로 함수를 만들지는 않고, 전역에 배열을 두지 않기로 했다.
전역에 두고 사용하는 것이 안전한 방법은 아니기 때문.
결국 try문 안에 data를 빼지 않고 안에서 전부 사용해주기로 했다.

마치며..

개인 과제를 오늘 전부 끝내버렸다.
코드 리뷰도 부탁드리면서 이것 저것 고쳐가며 완성시켰다.
필수 조건이 몇개 있어서 지저분한 코드가 된 느낌이 있지만
끝내고 나니 후련하다.
역시 강의 듣는 것 보다 머리감싸면서 코드짜는게 훨씬 재밌다..!