이번에는 자바스크립트와 React.js를 사용하여 간단한 뉴스 피드 애플리케이션을 제작해보겠습니다.

목차

• 프로젝트 개요
• 프로젝트 설정
• 뉴스 API 가져오기
• 피드 구현하기
• 결론

프로젝트 개요

이 프로젝트의 목표는 사용자에게 실시간으로 최신 뉴스 기사를 보여주는 피드를 만드는 것입니다. 사용자는 피드에서 뉴스 기사를 볼 수 있고, 필터링 및 정렬 기능을 사용하여 원하는 뉴스를 찾을 수 있습니다.

프로젝트 설정

먼저 React.js 프로젝트를 설정해야 합니다. 아래의 명령어를 사용하여 새로운 React.js 프로젝트를 생성합니다.

npx create-react-app news-feed-app
cd news-feed-app

프로젝트 디렉토리로 이동한 후, 다음 명령어로 React.js 개발 서버를 실행합니다.

npm start

프로젝트가 성공적으로 실행되면 http://localhost:3000 에서 애플리케이션을 확인할 수 있습니다.

뉴스 API 가져오기

이 애플리케이션에서는 외부 뉴스 API를 사용하여 뉴스 데이터를 가져옵니다. 널리 알려진 뉴스 API 중 하나인 NewsAPI 를 사용하겠습니다.

먼저 src 폴더 안에 api.js 파일을 생성한 후, 다음 코드를 추가합니다.

export async function fetchNews() {
  const response = await fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY');
  const data = await response.json();
  return data.articles;
}

위 코드에서 YOUR_API_KEY 부분에는 NewsAPI에서 발급받은 API 키를 입력해야 합니다. 이 키를 사용하여 API에서 뉴스 데이터를 가져오게 됩니다.

피드 구현하기

피드를 구현하기 위해 src 폴더 안에 Feed.js 파일을 생성한 후, 다음 코드를 추가합니다.

import React, { useState, useEffect } from 'react';
import { fetchNews } from './api';

export default function Feed() {
  const [news, setNews] = useState([]);

  useEffect(() => {
    async function getNews() {
      const newsData = await fetchNews();
      setNews(newsData);
    }

    getNews();
  }, []);

  return (
    <div>
      <h1>뉴스 피드</h1>
      <ul>
        {news.map((article, index) => (
          <li key={index}>
            <h2>{article.title}</h2>
            <p>{article.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

위 코드에서 useState와 useEffect 훅을 사용하여 상태와 사이드 이펙트를 관리합니다. fetchNews 함수를 호출하여 뉴스 데이터를 가져와 news 상태에 설정합니다. 그리고 ul 요소 안에 뉴스 기사들을 동적으로 렌더링합니다.

이제 App.js 파일에서 Feed 컴포넌트를 렌더링하도록 수정합니다.

import React from 'react';
import Feed from './Feed';

export default function App() {
  return (
    <div>
      <h1>뉴스 애플리케이션</h1>
      <Feed />
    </div>
  );
}

결론

이렇게 자바스크립트와 React.js를 사용하여 간단한 뉴스 피드 애플리케이션을 제작하는 방법을 알아보았습니다. React.js를 사용하면 강력하고 유연한 UI를 구축할 수 있으며, 외부 API와의 통합도 쉽게 구현할 수 있습니다.

해시태그: #자바스크립트 #React.js