[에러일기] 😈 비동기 데이터 undefined

날씨앱 작성중에..
콘솔창에선 api로 날씨 data도 잘 불러와졌고
도시 입력시 입력도 잘되고 해당되는 데이터값도 잘 불러와지는데
돔화면에선 아래처럼 undefined로 불러와지지 않음...........

작성한코드.. 아무리 봐도 뭐가 잘못된지 몰랐는데... await..........!!!!!!!!

const getWeather = async (city) => {
  const res = await fetch(`${URL}/weather?q=${city}&appid=${KEY}&units=metric`);
  const weatherData = await res.json();
  if (!res.ok) {
    throw new Error("❌ 날씨데이터를 불러오지 못했습니다.");
  }
  const { name } = weatherData;
  const { temp, temp_max: high, temp_min: low } = weatherData.main;
  const { main: weather } = weatherData.weather[0];
  console.log(name, temp, weather);
  return {
    name,
    temp,
    high,
    low,
    weather,
  };
};
const formEl = document.querySelector(".weatherForm");
const searchInput = document.querySelector(".city_search");
const weatherInfo = document.querySelector(".weather_info");
function onSubmit(e) {
  e.preventDefault();
  const city = searchInput.value;
  displayWeatherInfo(city);
}
function displayWeatherInfo(city) {
  try {
    const { name, temp, high, low, weather } = getWeather(city);
    console.log(name, temp, weather);
    weatherInfo.innerHTML = ` <div class="area">${name}</div>
          <div class="date">2025.8.5</div>
          <div class="temp">${temp}°C</div>
          <div class="weather">${weather}</div>
          <div class="high_low">${low}°C/${high}°C</div>`;
  } catch (error) {
    weatherInfo.innerHTML = `<p>날씨를 불러오지 못했습니다.</p>`;
  }
}
formEl.addEventListener("submit", onSubmit);
export default displayWeatherInfo; 

문제해결💡💡💡💡💡💡💡💡💡

👉 getWeather(ciry)이코드가 문제...!!!!
getWeather는 async 함수라서, 호출하면 Promise 객체를 반환함.
그래서 displayWeatherInfo도 async 함수로 만들고 await을 써서 데이터가 올 때까지 기다려야 한다...

await를 안하게되면
name, temp 등은 아직 데이터가 도착하지 않은 상태라서 undefined가 되는것!!!

수정했더니 정상적으로 데이터 불러와짐..!

📌 비동기 데이터 처리 흐름(비동기 API 데이터 요청 및 처리 순서)

1. fetch로 날씨 데이터 서버에서 요청 → 이건 비동기라 기다려야 함
2. response.json()으로 JSON 파싱 → 이 또한 비동기 작업
3. 데이터가 완전히 도착하고 나서야 가공 가능
4. 그 가공된 데이터를 displayWeatherInfo() 같은 함수에 넘겨서 화면에 보여주기

그래서 displayWeatherInfo 함수가 async여야 하고, await getWeather(city)로 데이터를 기다려야 제대로 값이 나옴.

만약 await 빼면 Promise 객체가 곧바로 반환돼서, 데이터가 안 들어온 상태라서 undefined가 뜸