안녕하세요! 자바스크립트를 공부하고 있는 ‘비동기늪에빠진자’입니다.

현재 오픈 API를 활용해서 날씨 정보를 가져오는 간단한 웹 페이지를 만들고 있습니다. 그런데 데이터를 분명히 받아왔는데도 외부에서 변수를 출력해보면 자꾸 undefined가 떠서 몇 시간째 헤매고 있습니다.

발생한 문제 (undefined 출력)

fetch 함수를 사용해서 API를 호출하고, 그 결과값을 함수 바깥에 있는 변수에 할당하려고 했습니다. 콘솔을 찍어보면 fetch 내부에서는 데이터가 정상적으로 찍히는데, 함수를 호출하고 나서 그 결과값을 확인하면 항상 데이터가 비어있습니다.

“데이터가 도착하기도 전에 console.log가 먼저 실행되는 것 같은데, 어떻게 기다리게 해야 할지 모르겠습니다.”

작성한 코드

아래는 문제가 발생하는 자바스크립트 코드입니다.

function getWeatherData() {
    let resultData;

    fetch('https://api.example.com/weather/seoul')
        .then(response => response.json())
        .then(data => {
            console.log("1. API 내부 데이터:", data); // 여기서는 데이터가 잘 나옵니다!
            resultData = data;
        });

    return resultData; 
}

const weather = getWeatherData();
console.log("2. 최종 결과물:", weather); // 여기서는 항상 undefined가 나옵니다.
        

궁금한 점 (도움 요청)

강의에서 콜백 함수나 Promise를 써야 한다고 배운 것 같은데, 막상 제 코드에 적용하려니 구조가 헷갈립니다. 최근에는 async/await를 많이 쓴다는데 이 코드에 적용하려면 어떻게 수정해야 할까요?

• 현재 코드에서 2. 최종 결과물이 undefined로 나오는 정확한 이유가 무엇인가요?
• 제가 원하는 대로 데이터를 모두 받아온 후에 출력하려면 코드를 어떻게 변경해야 하는지 예시를 보여주시면 감사하겠습니다.

고수님들의 명쾌한 답변을 기다리겠습니다. 미리 감사드립니다!