[javascript] 비동기 데이터 요청을 이용한 뉴스 헤드라인 보여주기

11 Dec 2023

javascript

원하는 뉴스 헤드라인을 보여주기 위해 비동기 데이터 요청을 사용하는 간단한 웹 애플리케이션을 만들어보겠습니다.

1. HTML 구성

우선 아래와 같이 HTML을 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>뉴스 헤드라인</title>
</head>
<body>
    <h1>최신 뉴스 헤드라인</h1>
    <ul id="newsHeadlines"></ul>

    <script src="script.js" defer></script>
</body>
</html>

2. JavaScript로 데이터 요청

다음으로, JavaScript 파일을 만들어 비동기 데이터 요청을 관리합니다.

const headlineList = document.getElementById('newsHeadlines');

async function getNewsHeadlines() {
    try {
        const response = await fetch('https://api.example.com/news/headlines');
        const data = await response.json();
        return data.articles;
    } catch (error) {
        console.error('뉴스 헤드라인을 가져오는 중 에러가 발생했습니다.', error);
        return [];
    }
}

async function showNewsHeadlines() {
    const headlines = await getNewsHeadlines();
    headlines.forEach((headline) => {
        const li = document.createElement('li');
        li.textContent = headline.title;
        headlineList.appendChild(li);
    });
}

showNewsHeadlines();

3. 실행 결과

위의 코드를 HTML 파일과 함께 웹 브라우저에서 실행하면, JavaScript가 API에서 최신 뉴스 헤드라인을 가져와 화면에 보여줍니다.

이렇게 간단하게 비동기 데이터 요청을 이용하여 뉴스 헤드라인을 보여주는 웹 애플리케이션이 완성됩니다.