[뉴스 타임즈] 키워드 검색

이제 키워드를 검색하면 키워드에 대한 내용이 나올 수 있도록 해줄겁니당!

먼저 검색할 수 있는 html 이 필요하겠죠? 저는 미리 만들어놨습니당.

<div id="search-box" class="search_box">
                <input type="search" id="user-search">
                <button id="user-search-btn" class="xi-search"></button>
            </div>

자 요렇게 만들어놨구용

이제 이 html 을 자바스크립트 에서 불러옵시당.

//숨겨진 메뉴 카테고리 클릭
const menu2 = document.querySelectorAll('#h_menu li');
menu2.forEach((menu2Item) => {
    menu2Item.addEventListener('click', (event) => getNewsByTopic(event));
})

// 웹 메뉴 카테고리 클릭
menu.forEach((menuItem) => {
    menuItem.addEventListener('click', (event)=> getNewsByTopic(event));
})


// 키워드 검색
const searchButton = document.getElementById('user-search-btn');
console.log(searchButton)

저는 요렇게 주석처리를 해서 갖고왔어요 ㅎㅎ

콘솔로그로 꼭 불러와졌는지 확인해주셔요

이제 이 버튼을 클릭했을 때, 이벤트가 발생해야겠죠?

무슨 이벤트?? => 키워드를 input 에 입력하고 버튼을 클릭했을 때 input 에 입력한 키워드에 관련된 뉴스가 나오게한다.

// 키워드 검색
const searchButton = document.getElementById('user-search-btn');
searchButton.addEventListener('click', getNewsByKeyword);

함수 이름은 무엇이냐면? -> getNewsByKeyword 입니당. 키워드에 대한 뉴스 가져오기 라는 뜻

근데 이 addEventListener 밑에 함수를 만들면, 호출이 안됩니당.

그럼 왜  이 함수는 호출이 된거야?!

menu.forEach((menuItem) => {
    menuItem.addEventListener('click', (event)=> getNewsByTopic(event));
})

이 함수는 제가 바로 부른게 아닌, 익명의 함수 안에 들어가있죠? 함수 안에 함수가 있잖아용.

클릭할 시에 이미 코드를 처음부터 끝까지 돌린 상태이기 때문에, 토픽함수에 접근이 되는것입니당.

결론은 화살표 함수는 정의 전에 호출할 수 없습니다. 화살표 함수로 호출하고 싶다면,

호출 전에 정의를 해야한다는 것이죠 !!

그래서 키워드 호출은 맨 밑에 getLatestNews() 호출 전에 호출해줍시당. 이사 ㄱㄱ

//키워드 클릭시 호출
searchButton.addEventListener('click', getNewsByKeyword);

getLatestNews();

이제 이 위에 이 함수를 만들어봅시댜요

// 카테고리 클릭시 카테고리 뉴스 나오게 하는 함수
const getNewsByTopic = async(event) => {
    let topic = event.target.textContent.toLowerCase();

    let response = await fetch(`https://newsapi.org/v2/top-headlines?country=us&category=${topic}&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`)

    let data = await response.json();
    news = data.articles;
    render();
}

// 키워드 별 검색
const getNewsByKeyword = () => {
    console.log('클릭됨')
}

저는 카데고리 함수 밑에 만들었습니당 순서대로 ^^

이제 버튼을 클릭하면 실행이 되는지 콘솔로그로 확인!

저는 오류가 나지않고 잘 작동됩니다요

그리고, 우리가 먼저 해야할 것은!

어떤 키워드를 user 가 입력했는지, 그 값을 갖고와야겠죠?

// 키워드 별 검색
const getNewsByKeyword = () => {
    let keyword = document.getElementById('user-search').value
    console.log(keyword)
}

요렇게 갖고왔슴다. 

.value 를 사용하면, input 에 있는 값을 갖고와줍니당.

그걸 keyword 라는 변수에 저장을 해준거죠!

이제 잘 저장이 되는가 한번 콘솔로그로 찍어봅시더

 

아주 잘 저장이 되고 있어요 ㅎㅎ

이제 키워드를 검색할 수 있도록 하게 해주는 api url 을 갖고올겁니덩

저희는 이 q 에 키워드를 넣어줄거에용 ㅎㅎ 간단하죠?

또 url 을 조금만 고쳐주면 된답니다?

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

자  q에 무엇을 넣었죠? keyword 라는 변수를 넣었죠?

keyword 는 무슨 변수죠? 유저가 input 에 넣은 값이죵?

그 값을 검색해주고, 데이터를 주는거에요 요놈이!

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

그리고 나머지는 위에서 썼던 코드랑 똑같으니까 붙여넣기 해줘오..

이제 테슬라를 검색해봅시다.

테슬라에 대한 뉴스만 촤르륵 나왔죠? 아웅 쉽다 쉬워~~