뉴스 API를 이용하여 뉴스 검색기 만들기 (2)

2022.08.04 - [JS] - 뉴스 API를 이용하여 뉴스 검색기 만들기 (1)

뉴스 API를 이용하여 뉴스 검색기 만들기 (1)

1탄에 이어서 기사 불러오는 방법을 작성해보겠습니다.

기사를 불러오기전에 요구사항 리스트중 검색히스토리를 먼저 만들어봅시다.

function addDiv(targetVal) {
  searchArray.unshift(targetVal); //전역변수에 배열선언 unshift 를 사용한 이유는 배열에 거꾸로 넣으려고 사용했습니다.
  const keywordHistory = document.querySelector("#recentKeyword"); 
  const inputEl = document.querySelector("input");
  const searchHistoryDiv = document.createElement("div");
  const searchHistoryChild = document.querySelector(
    "#searchHistory:nth-child(5)"
  );

  searchHistoryDiv.innerHTML = inputEl.value;
  searchHistoryDiv.setAttribute("id", "searchHistory");

  if (searchArray.length === 6) { //요구사항에 있는 최대 5개까지를 위한 조건문
    (function () {
      searchHistoryChild.parentElement.removeChild(searchHistoryChild);
    })();
  }
  keywordHistory.prepend(searchHistoryDiv);
  if (inputEl.value != "") { //검색값이 있어야만 기사를 검색하는 함수를 실행함 
    SearchArticle(inputEl.value, 0);
  }
}

위 코드를 이용하여 검색창 div를 만들고 그 안에 input태그에 입력된 값을 저장합니다.

 

이제 기사를 검색하는 함수를 만들어 봅시다.

아래 링크를 참고하여 API를 사용하는 방법을 확인합니다.

https://developer.nytimes.com/docs/articlesearch-product/1/overview

https://developer.nytimes.com/docs/articlesearch-product/1/overview

https://api.nytimes.com/svc/search/v2/articlesearch.json?q=election&api-key=yourkey

For example 에 있는대로 적용을 해봅시다.

API 설명서를 참고하여 q=이후에는 검색어 api-key에는 발급받은 키값을 넣어 확인한 결과

api문서를 참고하여 covid에 대하여 검색해보니 위와같은 데이터들이 나왔습니다.

function test(){
    fetch(`https://api.nytimes.com/svc/search/v2/articlesearch.json?q=covid&api-key=YOURKEY`)
    .then((response)=>  response.json())
    .then((data)=>console.log(data))
  }
  test();

위코드를 이용하여 데이터들을 확인해보았습니다.

fetch를 이용하여 데이터를 확인하는 모습

자 이제 코드를 이용해서 저 데이터들을 불러와보겠습니다.

function SearchArticle(item, index) {
  fetch(
    `https://api.nytimes.com/svc/search/v2/articlesearch.json?q=${item}&page=${index}&api-key=${API_KEY}`
  )
    .then((response) => response.json())
    .then((data) => {
      for (let i = 0; i < data.response.docs.length; i++) { //api가 10개까지만 불러오므로 for문을 이용하여 길이만큼 반복
        const article = document.querySelectorAll(".article");
        const searchResult = document.querySelector("#searchResult");
        const articleDiv = document.createElement("div");
        articleDiv.setAttribute("class", "article");
        function convertDate(item) { // 시간대를 한국시간대로 맞춰주기 위하여 사용
          const NYTdate = new Date(data.response.docs[item].pub_date)
          return NYTdate.getFullYear()+". "+ (NYTdate.getMonth()+1)+". "+NYTdate.getDate()+". "+NYTdate.toLocaleTimeString();     
        } 
        articleDiv.innerHTML = `
          <div class="newsHead">${data.response.docs[i].headline.main}</div>
          <div class="newsDate">${convertDate(i)}</div>
          <button class="clipBtn">Clip this</button>
          <a class="linkClass" rel="noopener" href="${
            data.response.docs[i].web_url
          }" target="_blank" >
          <button class="detailBtn">See Detail</button>
          </a>
        `;
        searchResult.appendChild(articleDiv);
        articleArr.push(articleDiv); // 추후 클립기능을 위하여 article들을 배열에 저장

        if (i == data.response.docs.length - 2) {
          //obeserve target 생성
          const endDiv = document.createElement("div");
          endDiv.setAttribute("class", "endDiv");
          searchResult.appendChild(endDiv);
          articleArr.push(endDiv);
          observe();
        }
      }
    });
}

처음에는 CreateElement 와 setAttribute를 이용하여 일일이 만들었었으나 가독성이 안좋아보여서 innerHTML로 바꿔보았으나

성능상 이점은 더 뒤쳐지고 안전상으로도 더 이점이 있으니 CreateElement 와 setAttribute를 이용하는게 더 좋습니다!!