[뉴스 타임즈] 반복된 코드 정리

코드는 거의 다 짰는데.. 너무 중복된 코드가 많죠?

그래서 중복된 코드를 간결하게 만들어주는 작업을 할것입니다용

1. 각 함수에서 필요한 url 을 만든다.

2. api 호출 함수를 만든다.

이 2가지가 지금 여러 함수에서 겹치고 있는 코드라서

이 코드를 간결하게 묶어줄거에요!

// 뉴스 Api 갖고 오기

let news = []; // articles 를 담아줄 변수

const h2 = document.querySelectorAll('#news_cont h2')
const newsContents = document.getElementById('news_contents')

// 각 함수에서 필요한 url , api 호출 함수

const getNews = async() => {
    let response = await fetch(`https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`)
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.

    render();
}

저희가 계속 복사 붙여넣기 했던 코드 있죠? 아주 익숙하죠??

fetch 해서~ url 불러오고~

그걸 data 에 저장하고~ 데이터의 articles 를 news 에 저장하고~ render() 호출하고~

아주 무한 반복의 코드였어요

이걸 하나의 함수에 다 저장을 해주는거에요옷!

근데, 불러와야하는 url 이 다르잖아요? 그래서 이 url 을 전역변수로 먼저 만들어줄게요

// 각 함수에서 필요한 url , api 호출 함수
let url;

const getNews = async() => {
    let response = await fetch(`https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`)
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.

    render();
}

요렇게 선언을 해주시공

저 fetch 부분에 url 을 넣어줄게용

일단은 따라와바~

아 저 주소는 따로 복사해서 어디다가 붙여넣으세여! (써야함)

// 각 함수에서 필요한 url , api 호출 함수
let url;

const getNews = async() => {
    let response = await fetch(url)
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.

    render();
}

자 이렇게 fetch 에 url 을 불러오게 했습니당.

근데 url 이 뭔지 모르니까, 이 함수를 불러오는 함수들에게

url에 그 함수에 맞는 url 을 넣어줄거에요 (ㅜㅡㅜ 설명을 제대로 못하겠군)

const getLatestNews = async() => {
    url = `https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`
    getNews();
}

바로 요렇게 말입니다요

그럼 url 이 넣어지면서 밑에 함수가 실행이 되니까 오류가 나지 않고 잘 작동이 됩니당!!

다른 함수도 똑같이~~ 해주셔용

// 전체 랜덤 뉴스 불러오기
const getLatestNews = async() => {
    url = `https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`
    getNews();
}

// 카테고리 클릭시 카테고리 뉴스 나오게 하는 함수
const getNewsByTopic = async(event) => {
    let topic = event.target.textContent.toLowerCase();
    url = `https://newsapi.org/v2/top-headlines?country=us&category=${topic}&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`
    getNews();
}

// 키워드 별 검색
const getNewsByKeyword = async() => {
    let keyword = document.getElementById('user-search').value
    url = `https://newsapi.org/v2/everything?q=${keyword}&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`
    getNews();
}

어때여? 엄청 간결해졌죵?!

이렇게 코드 정리 끝!