뉴스와 날씨 정보를 가져오는 세 가지 방법

이 글에서는 뉴스와 날씨 정보를 가져오는 세 가지 방법에 대해 알아보겠습니다. 첫 번째 방법은 fetch와 then을 사용한 비동기 처리입니다. 두 번째 방법은 Promise.all을 사용한 병렬 처리이고, 세 번째 방법은 async/await를 사용한 비동기 처리입니다.

1. fetch와 then을 사용한 비동기 처리

첫 번째 방법은 fetch와 then을 사용하여 비동기적으로 데이터를 가져오고 처리하는 방법입니다.

// 최신 뉴스 데이터를 가져오기 위한 URL
const newsURL = 'http://localhost:4999/data/latestNews';
// 날씨 정보를 가져오기 위한 URL
const weatherURL = 'http://localhost:4999/data/weather';

// 뉴스와 날씨 정보를 가져오는 함수
function getNewsAndWeather() {
  // 뉴스 데이터를 가져오기 위해 fetch 함수를 사용하고 응답을 JSON 형식으로 변환
  return fetch(newsURL)
    .then(resp => resp.json())
    .then(json1 => {
      // 날씨 데이터를 가져오기 위해 fetch 함수를 사용하고 응답을 JSON 형식으로 변환
      return fetch(weatherURL)
        .then(resp => resp.json())
        .then(json2 => {
          // 가져온 뉴스 데이터와 날씨 데이터를 객체로 반환
          return {
            news: json1.data,
            weather: json2
          }
        });
    })
}

// 브라우저 외부에서 사용할 수 있도록 모듈을 내보냄
if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeather
  }
}

이 방법에서는 먼저 fetch 함수를 사용하여 뉴스 데이터를 가져오고, 가져온 응답을 JSON 형식으로 변환합니다. 그리고 then 메서드를 사용하여 날씨 데이터를 가져오고 응답을 JSON 형식으로 변환합니다. 최종적으로 가져온 뉴스 데이터와 날씨 데이터를 객체로 반환합니다.

이 방법은 비동기 처리를 위해 Promise 체인을 사용하므로 순차적인 실행을 보장합니다. 하지만 뉴스 데이터를 가져오고 나서야 날씨 데이터를 가져오므로 병렬 처리가 아니라는 단점이 있습니다.

2. Promise.all을 사용한 병렬 처리

두 번째 방법은 Promise.all을 사용하여 뉴스와 날씨 정보를 병렬로 가져오고 처리하는 방법입니다.

javascript


// 뉴스와 날씨 정보를 모두 가져오는 함수
function getNewsAndWeatherAll() {
  // fetch 함수를 사용하여 뉴스와 날씨 정보를 병렬로 가져옴
  return Promise.all([
    fetch(newsURL),
    fetch(weatherURL)
  ])
    .then(([newsResponse, weatherResponse]) => {
      // 가져온 응답을 JSON 형식으로 변환
      return Promise.all([newsResponse.json(), weatherResponse.json()])
    })
    .then(([json1, json2]) => {
      // 가져온 뉴스 데이터와 날씨 데이터를 객체로 반환
      return {
        news: json1.data,
        weather: json2
      }
    })
}

// 브라우저 외부에서 사용할 수 있도록 모듈을 내보냄
if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeatherAll
  }
}

이 방법에서는 Promise.all을 사용하여 뉴스와 날씨 정보를 병렬로 가져옵니다. fetch 함수를 호출한 후 Promise.all로 묶어서 한꺼번에 처리할 수 있습니다. 가져온 응답은 then 메서드를 사용하여 JSON 형식으로 변환하고, 최종적으로 가져온 뉴스 데이터와 날씨 데이터를 객체로 반환합니다.

이 방법은 병렬 처리를 통해 뉴스와 날씨 정보를 동시에 가져올 수 있으므로 속도 면에서 효율적입니다. 하지만 모든 요청이 완료될 때까지 기다려야 하므로 모든 요청에 대한 응답이 필요한 경우에 사용하는 것이 적합합니다.

3. async/await를 사용한 비동기 처리

세 번째 방법은 async/await를 사용하여 비동기적으로 데이터를 가져오고 처리하는 방법입니다.

javascript
// 뉴스와 날씨 정보를 가져오는 비동기 함수
async function getNewsAndWeatherAsync() {
  // 뉴스 데이터를 가져올 때까지 대기하고 JSON 형식으로 변환
  let json1 = await fetch(newsURL).then(resp => resp.json());
  // 날씨 데이터를 가져올 때까지 대기하고 JSON 형식으로 변환
  let json2 = await fetch(weatherURL).then(resp => resp.json());

  // 가져온 뉴스 데이터와 날씨 데이터를 객체로 반환
  return {
    news: json1.data,
    weather: json2
  }
}

// 브라우저 외부에서 사용할 수 있도록 모듈을 내보냄
if (typeof window === 'undefined') {
  module.exports = {
    getNewsAndWeatherAsync
  }
}

이 방법에서는 async 함수와 await 키워드를 사용하여 비동기 처리를 합니다. await를 사용 하여 fetch 함수를 호출하고, 응답을 JSON 형식으로 변환하는 작업을 대기합니다. 뉴스 데이터와 날씨 데이터를 각각 변수에 할당한 후에 최종적으로 객체로 반환합니다.

이 방법은 비동기 처리를 동기적으로 작성할 수 있어 가독성이 좋습니다. 하지만 코드가 순차적으로 실행되므로 다른 작업을 동시에 처리할 수 없는 단점이 있습니다.

결론

이 글에서는 뉴스와 날씨 정보를 가져오는 세 가지 방법에 대해 알아보았습니다. fetch와 then을 사용한 비동기 처리, Promise.all을 사용한 병렬 처리, 그리고 async/await를 사용한 비동기 처리 방법을 소개했습니다.

fetch와 then을 사용한 방법은 Promise 체인을 통해 순차적으로 실행되며, 데이터를 가져온 후에야 다음 작업을 수행합니다. Promise.all을 사용한 방법은 병렬 처리를 통해 속도를 향상시킬 수 있지만 모든 요청이 완료될 때까지 기다려야 합니다. async/await를 사용한 방법은 비동기 처리를 동기적으로 작성할 수 있어 가독성이 좋지만 순차적으로 실행되므로 다른 작업과의 병렬 처리는 어렵습니다.

각 방법은 상황에 맞게 선택하여 사용할 수 있으며, 개발자의 선호도와 요구사항에 따라 선택하면 됩니다.