React와 New York Times API를 사용하여 뉴스 앱 구축

이 튜토리얼에서는 React와 New York Times API를 사용하여 뉴스 앱을 구축한 방법을 보여 드리겠습니다. 이 프로젝트는 React, API 작업 방법, Vercel을 사용하여 웹 앱을 배포하는 방법에 대해 자세히 배울 수 있는 좋은 방법이었습니다.

우리가 다룰 내용:

• New York Times API에서 뉴스 기사 가져오기
• 페이지 매김 및 부드러운 애니메이션 추가
• Vercel에 앱 배포

1. 프로젝트 개요

New York Times 뉴스 앱은 사용자가 New York Times의 최신 뉴스를 볼 수 있는 간단한 웹 애플리케이션입니다. 이 앱은 New York Times API에서 직접 데이터를 가져와 깔끔하고 사용하기 쉬운 인터페이스로 표시합니다.

주요 특징:

• 페이지 매김: 사용자는 뉴스 기사의 여러 페이지 사이를 쉽게 이동할 수 있습니다.
• 부드러운 애니메이션: 기사가 부드럽게 전환되어 로드되어 앱이 더욱 세련된 느낌을 줍니다.
• 배포: 앱은 Vercel에 배포되므로 온라인에서 누구나 사용할 수 있습니다. GitHub 저장소를 확인하여 모든 코드를 보고 자세히 알아볼 수 있습니다.

2. 프로젝트 설정

코딩을 시작하기 전에 컴퓨터에 다음이 있는지 확인하세요.

• Node.js 및 npm: React 앱을 실행하고 다른 도구를 설치하려면 이 항목이 필요합니다.
• New York Times API 키: NY Times 개발자 포털에 가입하면 이 키를 얻을 수 있습니다. 설치 단계 로컬 컴퓨터에 프로젝트를 설정해 보겠습니다.

1. 저장소 복제:

git clone https://github.com/tomasdevs/the-new-york-times-app.git
cd the-new-york-times-app

2. 종속성 설치:
앱의 클라이언트 부분과 서버 부분 모두에 대한 도구를 설치해야 합니다.

cd client
npm install
npm install react-transition-group
cd ../server
npm install

3. 환경 변수 설정:
서버 폴더에 .env 파일을 생성하고 New York Times API 키를 추가하세요.

NYT_API_KEY=your_api_key_여기

3. 애플리케이션 구축

New York Times API에서 데이터 가져오기

Articles.js 컴포넌트에서 Fetch API를 사용하여 최신 뉴스 기사를 가져왔습니다. 작동 방식은 다음과 같습니다.

const response = await fetch(
  process.env.NODE_ENV === "production"
    ? `https://api.nytimes.com/svc/topstories/v2/home.json?api-key=${process.env.REACT_APP_NYT_API_KEY}`
    : `${process.env.REACT_APP_API_URL}/api/articles`
);

이 코드는 앱이 실행 중일 때 New York Times API에서 직접 데이터를 가져오도록 합니다. 개발 중에는 로컬 서버에서 데이터를 가져오므로 테스트가 더 쉬워집니다.

페이지 매김 및 애니메이션 추가

페이지 매김을 처리하기 위해 기사 목록을 페이지로 나누는 간단한 로직을 추가했습니다. 또한 기사 사이를 이동할 때 부드러운 애니메이션을 추가하기 위해 react-transition-group을 사용했습니다.

<TransitionGroup component="ul" className="articles-list">
  {currentArticles.map((article, index) => (
    <CSSTransition key={index} timeout={500} classNames="article">
      <ArticleItem article={article} />
    </CSSTransition>
  ))}
</TransitionGroup>

4. 도전과제와 교훈

CORS 문제 처리

처음에는 로컬 개발 중에 New York Times API에서 데이터를 가져오려고 할 때 CORS에 몇 가지 문제가 있었습니다. 저는 프록시 역할을 하는 간단한 백엔드 서버를 설정하여 이 문제를 해결했습니다. 라이브 버전에서는 작업을 단순화하기 위해 API에서 직접 데이터를 가져왔습니다.

환경 변수 관리

또한 특히 Vercel과 같은 플랫폼에 배포할 때 환경 변수를 적절하게 관리하는 것이 얼마나 중요한지 배웠습니다. 이는 API 키와 같은 민감한 데이터를 안전하게 유지하는 데 중요합니다.

5. 결론

이 프로젝트는 훌륭한 학습 경험이었습니다. React, API 통합 및 웹 배포 기술을 향상하는 데 도움이 되었습니다. 앱의 결과에 정말 만족하며 앞으로 더욱 복잡한 프로젝트를 구축할 수 있게 되어 기쁩니다.
피드백이나 제안 사항이 있으면 언제든지 연락하거나 댓글을 남겨주세요. GitHub에서 코드를 확인하고 직접 사용해 볼 수도 있습니다.
여기서 라이브 데모를 경험해보세요!

읽어주셔서 감사합니다!

위 내용은 React와 New York Times API를 사용하여 뉴스 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!