📰 뉴스 API 프로젝트 (News API Project)

📌 프로젝트 개요

이 프로젝트는 뉴스 API를 활용하여 최신 뉴스를 카테고리별로 조회할 수 있고, 검색 및 페이지네이션이 가능한 반응형 뉴스 웹 애플리케이션입니다.

🛠️ 구현된 주요 기능들

1. 뉴스 조회

• 뉴스 API 를 통해 최신 뉴스 목록을 불러와 화면에 표시합니다.
• 뉴스 이미지, 제목, 내용을 클릭하면 새 탭에서 원본 뉴스 페이지로 이동합니다.

2. 뉴스 검색

• 입력창을 통해 키워드를 입력하고 버튼을 클릭하거나 엔터를 누르면 해당 키워드를 포함한 뉴스만 조회합니다.

3. 카테고리별 뉴스 조회

• 상단 메뉴 및 사이드 메뉴를 통해 카테고리별 뉴스 (예: Business, Entertainment, Health 등)를 볼 수 있습니다.

3. 모바일 사이드 메뉴 (햄버거 메뉴)

• 모바일 화면에서 햄버거 메뉴 버튼을 클릭하면 사이드 메뉴가 나타나 카테고리를 선택할 수 있습니다.

4. 페이지네이션 기능

• 한 페이지에 뉴스가 많을 경우 페이지네이션 기능을 제공하여 사용자가 원하는 페이지로 쉽게 이동할 수 있도록 구현했습니다.

⚙️ 사용된 오픈 소스 및 라이브러리

• HTML5 / CSS3
• JavaScript
• Bootstrap 5
• Font Awesome
• Moment.js (날짜와 시간을 상대적으로 표시)

🧑 개발 중 만났던 문제와 해결법

• JavaScript의 이벤트 처리에서 발생한 오류 (undefined 문제)
  • 이벤트 객체를 명확하게 통일하여 해결 (클래스는 querySelector, id는 getElementById) 전달하여 해결했습니다.
• API 데이터에 이미지가 없는 경우 대체 이미지를 표시하여 에러(404)를 방지했습니다.
• 반응형 CSS 미디어 쿼리를 통해 다양한 화면 크기에서 UI가 정상적으로 동작하도록 했습니다.

🚀 향후 추가하고 싶은 기능

• 더 다양한 국가별, 언어별 뉴스 제공
• 사용자 북마크 기능 구현
• 뉴스 읽기 상태 관리 및 개인화 기능 제공

🔗 API 출처

• News API (https://newsapi.org) 뉴스 데이터를 JSON 형태로 제공하는 오픈 API입니다.