[Study] API를 활용하여 뉴스페이지 구성하기

기능

• https://docs.newscatcherapi.com/ API 활용하여 뉴스 페이지 구현
• 검색어 입력시 해당 키워드의 뉴스 내용이 나오는 검색 기능 구현
• 메뉴 클릭시 해당 메뉴 그룹의 내용이 나오는 탭 기능 구현
• 오류 발견 시 화면단에 오류 내용 출력
• 슬라이드 메뉴바 구현
• 반응형 홈페이지 구현

사용언어

• HTML
• CSS
• JavaScript

Demo App

• url - https://bottlesun.github.io/study/05-NewsTimes/

01. newscatcherapi 사용하기

https://docs.newscatcherapi.com/

해당 api를 사용하기 위해서는 회원가입을 하여, 고유 api-key를 받아야 하는데,
무료 기간은 30일이고, 한달간 사용 할 수 있는 한도가 정해져있기때문에 작업을 하다가
이용을 못하게 되는 단점도 있다.

해당 API 페이지의 뉴스 내용을 받아서 화면에 출력하는 프로젝트고,
fetch()를 활용해 API를 활용하였다.

02.fetch 란?

원격 API 호출을 하기위한 request나 axios, jQuery 같은 라이브러리 사용을 하여, 조금 편하게 HTTP를 요청하여 응답을 받는게 효율이 좋았으나, ES6로 넘어오고 나서는 fetch() 함수로 해당 기능들을 쉽게 사용 할 수 있게 되었다.

02-1 fetch 사용방법

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받는.
Promise 타입의 객체를 반환하며 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

○ API KEY 사용하기

URL()로 매개변수로 제공한 URL을 나타내는 URL 객체를 만들어준다.

API를 요청하기 위해서 KEY를 사용해야 하는데, 로그인 후 KEY를 받아 사용할때, HTTP Headers 객체를 만들어, 안에 x-api-key : key 형식으로 key 값을 넣어준다.
JS 내장 클래스인 new Headers({}) 를 사용해 작업을 진행 했다.

const getNews = async () => {
    try {
        url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&page_size=6`);
        let header = new Headers({ 'x-api-key': 'mykey' });
        let response = await fetch(url, { headers: header });
        let data = await response.json();
                  console.log('데이터', data)
    } catch(error){
    console.log(error.message)
    }

fetch를 사용하여, url 과 key 값을 인자로 넣어주면 response.json() 값을 받아올 수 있다.

03. 뉴스 불러오기 (render)

받아온 데이터를 HTML 화면에 출력을 해주기 위해 render 라는 함수를 만들어
화면으로 보여질 부분들에 대한 부분을 넣어줬다.

function render() {
    //topic
    let newsHTML = "";
    newsHTML = news.map((newsItem) => {
        return `<div class="row news">
        <div class="col-lg-4">   
            <img class="news-img-size" src="${newsItem.media || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqEWgS0uxxEYJ0PsOb2OgwyWvC0Gjp8NUdPw&usqp=CAU"}" alt="">
        </div>
        <div class="col-lg-8 news-content">
            <h2>${newsItem.title}</h2>
            <P>
                ${newsItem.summary == "null" || newsItem.summary == "" ? "내용없음" : newsItem.summary.length > 200 ? newsItem.summary.substring(0, 200) + "..." : newsItem.summary
            }
            </P>
            <div class="source-dey">
            ${newsItem.rights || "no Source"} * ${moment(newsItem.published_date).fromNow()
            }
            </div>
        </div>
    </div>
    `
    }).join('');
    document.querySelector('.body_wrap').innerHTML = newsHTML;
}

04. 키워드 검색

 

뉴스 API 내장 기능으로, q='입력 할 키워드' q에 매개변수를 넣어주면, 해당 keyword가 포함된 뉴스 내용들을 전부 json 값으로 가지고 올 수 있다.

1. 검색 내용 읽어오기(input.value)
2. url 검색 키워드 값 넣어주기
3. api 재호출
4. 데이터 가지고 오기 & 데이터 내보내기

순서이다.

const getNewsByKeyWord = async () => {
    let keyWord = document.querySelector('#search-input').value;
    url = new URL(`https://api.newscatcherapi.com/v2/search?q=${keyWord}&countries=KR&page_size=6`);
    getNews()
}

05. Topic불러오기

api 내부 json 데이터들의 대분류를 지정하여 topic에 매개변수로 해당 topic 키워드를 넣어주면, 해당 topic인 값들만 출력해줄 수 있다.

html 파일 메뉴로 토픽 이름의 값들을 넣어주어 해당 부분을 클릭하여, topic 매개변수를 변경해준다.

const getNewsByTopic = async (event) => {
    console.log('클릭됨', event.target.textContent);
    let topic = event.target.textContent.toLowerCase()
    url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=${topic}&page_size=6`);
    getNews()
}

06. 페이지네이션 구현하기

const pageNation = () => {
    let pageNationHTML = ``;
    let pageGroup = Math.ceil(page / 5);
    let last = pageGroup * 5;
    if (last > total_page) {
      // 마지막 그룹이 5개 이하이면
      last = total_page;
    }
    let first = last - 4 <= 0 ? 1 : last - 4; // 첫그룹이 5이하이면
    // first ~ last 페이지 프린트
    //total page 3일 경우 3개의 페이지만 프린트 하는법 last, first 
    //<< >> 버튼 만들어주기 맨 처음 맨 끝으로 가는 버튼 만들기 
    // 내가 그룹 1일때, << < 버튼이 없다
    // 내가 마지막 그룹일떄 > >> 버튼이 없다
    pageNationHTML = page == 1 ? "" : 
    `
    ${
        page >= false + 1 ? `<li class="page-item">
        <a class="page-link" href="#" aria-label="Previous" onClick="moveToPage(${false})">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>` : ""
    }
    <li class="page-item">
    <a class="page-link" href="#" aria-label="Previous" onClick="moveToPage(${page-1})">
      <span aria-hidden="true">&lt;</span>
    </a>
  </li>
  `
    for (let i = first; i <= last; i++) {
        pageNationHTML += `
        <li class="page-item ${page == i ? 'active' : ""}"><a class="page-link " href="javascript:void(0)" onClick="moveToPage(${i})">${i}</a></li>
        `
    }
    pageNationHTML += page == total_page ? "" :  `
    <li class="page-item">
    <a class="page-link" href="#" aria-label="Next" onClick="moveToPage(${page+1})">
      <span aria-hidden="true">&gt;</span>
    </a>
  </li>
  ${
    page <= total_page - 1 ? `<li class="page-item">
    <a class="page-link" href="#" aria-label="Next" onClick="moveToPage(${total_page})">
      <span aria-hidden="true">&raquo;</span>
    </a>
  </li>` : ""
}
`
    document.querySelector('.pagination').innerHTML = pageNationHTML;
}
const moveToPage = (pageNum) => {
    //1. 이동하고싶은 페이지 알기
    page = pageNum;
    console.log(page)
    //2. 이동하고싶은 페이지를 가지고 API를 재호출
    getNews()
}