실시간 뉴스 크롤링 웹앱 만들기: 자바스크립트와 Fetch API로 구현하는 미니 뉴스포털

- 6월 28, 2025

하루에도 수십 개의 뉴스가 쏟아지는데, 원하는 키워드의 뉴스만 모아보고 싶으셨나요? 자바스크립트와 API를 활용해 나만의 뉴스 크롤링 웹앱을 직접 만들어보세요!

안녕하세요, ICT 실전형 블로그를 운영하는 리치입니다. 뉴스를 하나하나 검색하는 대신, 특정 키워드만 자동으로 수집하고, 실시간으로 웹에서 확인할 수 있다면 어떨까요? 오늘은 자바스크립트와 fetch API, 그리고 News API를 활용해서 검색 기반 실시간 뉴스 크롤링 앱을 구현해볼 거예요. 초보자도 쉽게 따라할 수 있도록 설명드릴게요!

📌 바로가기 목차

1. async/await와 fetch API 개요 2. News API로 실시간 기사 받아오기 3. 뉴스 데이터를 HTML로 출력하는 방법 4. 예외 처리와 UX 메시지 구성 5. 모듈화 및 코드 구조 리팩토링 6. 최종 데모: 키워드 검색 기반 뉴스 앱 7. 자주 묻는 질문 (FAQ) 8. 마무리 요약

1. async/await와 fetch API 개요

자바스크립트는 비동기 처리를 지원하는 언어로, 네트워크 요청처럼 시간이 오래 걸리는 작업도 끊기지 않고 수행할 수 있게 합니다. 대표적으로 사용하는 구문이 fetch()와 async/await입니다.


async function loadData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

위 코드는 외부 API에서 데이터를 받아와 콘솔에 출력하는 기본 구조예요. 이 흐름을 그대로 뉴스 API에 적용해볼 수 있습니다.

2. News API로 실시간 기사 받아오기

newsapi.org는 전 세계 언론사 데이터를 실시간으로 제공하는 인기 API입니다. 아래는 키워드 기반 기사 검색을 위한 fetch 예제입니다.


const API_KEY = "여기에_API_KEY_입력";
const keyword = "AI";
const url = `https://newsapi.org/v2/everything?q=${keyword}&apiKey=${API_KEY}`;

async function fetchNews() {
  const response = await fetch(url);
  const result = await response.json();
  console.log(result.articles);
}

매개변수	설명
q	검색할 키워드 (예: "AI")
apiKey	뉴스 API에서 발급받은 개인 키

3. 뉴스 데이터를 HTML로 출력하는 방법

받아온 기사 리스트는 DOM 요소를 활용해 카드 형태로 출력하면 좋습니다. 아래는 간단한 뉴스 카드 렌더링 함수 예시입니다.


function renderNews(articles) {
  const container = document.getElementById("newsArea");
  container.innerHTML = "";
  articles.forEach(article => {
    const card = document.createElement("div");
    card.innerHTML = `
      <h4>${article.title}</h4>
      <p>${article.description}</p>
      <a href="${article.url}" target="_blank">원문 보기</a>
    `;
    container.appendChild(card);
  });
}

각 뉴스 기사 객체는 title, description, url 등의 속성을 포함
UI 출력은 innerHTML 또는 템플릿 리터럴 활용

4. 예외 처리와 UX 메시지 구성

실시간 API는 언제든지 오류를 반환할 수 있기 때문에, 예외 처리와 사용자 메시지 구성이 필수입니다. 예를 들어 API 호출 실패나 키워드 검색 결과가 없는 경우 사용자에게 친절하게 안내해야 합니다.


async function searchNews(keyword) {
  try {
    const url = `https://newsapi.org/v2/everything?q=${keyword}&apiKey=${API_KEY}`;
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("뉴스를 불러오지 못했습니다.");
    }
    const result = await response.json();
    if (result.articles.length === 0) {
      showMessage("검색 결과가 없습니다.");
    } else {
      renderNews(result.articles);
    }
  } catch (error) {
    showMessage(error.message);
  }
}

function showMessage(msg) {
  const el = document.getElementById("newsArea");
  el.innerHTML = `${msg}`;
}

5. 모듈화 및 코드 구조 리팩토링

코드가 길어지면 기능별로 분리해 유지보수하기 쉬운 구조로 리팩토링하는 것이 좋습니다. fetch, render, error 처리 함수를 분리해 재사용성을 높여봅니다.


async function getNewsData(keyword) {
  const url = `https://newsapi.org/v2/everything?q=${keyword}&apiKey=${API_KEY}`;
  const response = await fetch(url);
  if (!response.ok) throw new Error("뉴스 로딩 실패");
  const result = await response.json();
  return result.articles;
}

function displayNewsUI(articles) {
  const el = document.getElementById("newsArea");
  el.innerHTML = "";
  articles.forEach(item => {
    el.innerHTML += `
      <div style="border:1px solid #ccc; margin-bottom:10px; padding:10px;">
        <h4>${item.title}</h4>
        <p>${item.description || '내용 없음'}</p>
        <a href="${item.url}" target="_blank">기사보기</a>
      </div>
    `;
  });
}

async function handleSearch(keyword) {
  try {
    const articles = await getNewsData(keyword);
    if (articles.length === 0) {
      showMessage("검색된 뉴스가 없습니다.");
    } else {
      displayNewsUI(articles);
    }
  } catch (err) {
    showMessage(err.message);
  }
}

6. 최종 데모: 키워드 검색 기반 뉴스 앱

이제 입력창에 키워드를 입력하고 버튼을 클릭하면 뉴스 목록이 실시간으로 출력되는 완성형 데모를 확인해볼 시간입니다.


// HTML
<input id="keywordInput" placeholder="검색할 키워드 입력">
<button onclick="handleClick()">뉴스 검색</button>
<div id="newsArea"></div>

// JS
function handleClick() {
  const kw = document.getElementById("keywordInput").value;
  handleSearch(kw);
}

검색어를 기준으로 실시간 뉴스 목록 출력
에러 시 사용자에게 직관적인 메시지 제공

7. 자주 묻는 질문 (FAQ)

Q fetch 대신 axios를 사용해도 되나요?

물론입니다. axios는 에러 처리와 응답 데이터 처리에서 더 간편한 장점이 있으며, CDN 또는 npm으로 손쉽게 사용할 수 있습니다.

Q News API 키는 어디서 받나요?

newsapi.org에서 회원가입 후 대시보드에서 무료 API 키를 발급받을 수 있습니다. 무료 요금제도 충분히 학습용으로 사용할 수 있어요.

Q API 요청 시 검색 결과가 없을 땐 어떻게 하나요?

응답 객체의 articles.length를 검사해 “검색 결과가 없습니다” 같은 사용자 친화 메시지를 보여주는 로직을 추가해야 합니다.

Q CORS 오류가 발생하면 어떻게 해야 하나요?

CORS 문제는 브라우저 보안 정책 때문에 발생합니다. 서버가 요청을 허용하지 않으면, 백엔드 프록시 서버를 두거나 CORS proxy 서비스를 사용할 수 있습니다.

Q 뉴스 데이터를 로컬에 저장해서 오프라인에서도 볼 수 있나요?

브라우저의 localStorage 또는 IndexedDB를 사용하면 최근 검색 결과를 저장하고 오프라인에서도 간단히 표시할 수 있습니다. 단, 데이터 보존에는 주의가 필요합니다.

8. 마무리 요약

지금까지 자바스크립트를 활용한 실시간 뉴스 크롤링 웹앱을 함께 만들어보았습니다. 단순한 API 호출에서 끝나는 것이 아니라, 검색 기반 데이터 처리, 에러 핸들링, UI 렌더링, 코드 구조화까지 실제 프로젝트에서 바로 써먹을 수 있는 구성으로 완성했죠.

fetch API와 async/await의 실제 활용법
News API를 통한 키워드 뉴스 검색
예외 처리와 사용자 메시지 구성
모듈형 함수 구성으로 유지보수성 향상

이번 튜토리얼을 통해 여러분도 단순히 코드를 따라 치는 수준을 넘어서, 서비스형 앱 개발의 사고방식을 익히셨기를 바랍니다. 다음 포스팅에서는 또다른 유용한 앱개발을 준비해볼게요!

끝까지 읽어주셔서 감사합니다. 더 똑똑하고 쓸모 있는 프론트엔드 앱을 함께 만들어가요! 🙌

이 블로그 검색

ICT리더 리치