자바스크립트 뉴스 웹페이지에 검색 기능을 만들어보자

 

 안녕하세요. 진득 코딩입니다.

 

 저번 시간에는 API로 가져온 데이터를 화면에 출력하는 과정을 살펴보았습니다.

 

 이번 시간에는 이렇게 가져온 데이터를 검색하는 기능을 만들어보도록 하겠습니다.

 

API 문서 확인하기

 

 

 먼저 만들어볼 기능은 카테고리 기능입니다.

 

 이때 기능을 만들기 전에 해당 데이터를 카테고리 별로 API에서 제공해 주는지 먼저 확인해봐야 합니다.

 

 API 문서를 확인해보면 category별로 데이터를 response할 수 있는 것을 확인할 수 있습니다.

 

 하지만 해당 기능은 7가지 카테고리만을 제공하기 때문에 메뉴에 있는 버튼을 바꿀 필요가 있습니다.

 

 

 API 문서에서 제공한다고 설명해주는 버튼만 남기고 다른 버튼들은 삭제해 주었습니다.

 

 이렇게 API를 이용하기 위해서는 API가 제공하는 서비스를 숙지하고 그 안에서 이용해야 합니다.

 

카테고리별 검색 기능

 

 

 API에서 제공하는 대로 메뉴를 바꿨으면 해당 메뉴들을 js 파일에서 가져와서 함수를 만들어줘야 합니다.

 

 해당 버튼들은 여러 개이기 때문에 querySelectorAll을 사용해서 모든 버튼을 가져옵니다.

 

 또한 해당 버튼들은 menus라는 클래스 안에 있는 버튼들을 가져와야 하기 때문에 ".menus button"를 가져와주시면 됩니다.

 

 이렇게 querySelectorAll을 사용하여 여러 요소를 가져오면 for문을 사용해서 각각의 버튼의 click 이벤트를 주면 됩니다.

 

해당 버튼들을 클릭하면 getNewsByCategory(event) 함수가 실행되도록 코드를 작성해주었습니다.

 

 

 

 다음은 클릭 이벤트와 연결해 둔 함수를 만들어야 합니다.

 

 getLatestNews() 함수와 getNewsByCategory() 함수를 주석처리한 이유는 두 함수가와 뒤에 나올 함수가 중복된 코드가 많아서 중복 코드를 제거한 코드로 바꾸기 때문입니다.

 

 getNewsByCategory() 함수는 fetch와 joson() 함수를 사용해서 await를 사용하기 때문에 async 함수르 만들어주었습니다.

 

 event의 버튼 이름을 가져와야 하는데 메뉴에 있는 글자들은 가장 앞에 대문자로 시작하고 쿼리문은 모든 문자들이 소문자이기 때문에 toLowerCase() 함수를 이용해서 category 변수를 소문자로 바꿔주었습니다.

 

 다른 부분은 getLatestNews() 함수와 똑같은 방법으로 API를 호출한 데이터를 화면에 출력해 주면 됩니다.

 

 

 위와 같은 함수를 만들게 되면 카테고리 버튼을 눌러서 카테고리 별로 기사를 보실 수 있습니다.

 

키워드 검색 기능

 

 

 다음은 키워드로 검색하는 기능을 만들어보도록 하겠습니다.

 

 코드로 기능을 만들기 전에 API 문서에 키워드로 데이터를 가져올 수 있는지부터 확인해 줍니다.

 

 API 문서에 q라는 parameter를 사용해서 키워드별로 데이터를 가져올 수 있는 것을 확인할 수 있습니다.

 

 

 먼저 HTML에서 검색 버튼에 onclick 이벤트를 줍니다.

 

 HTML에서 onclick 이벤트를 줄 때는 onclick="getNewsByKeyword()"를 통해 줄 수 있습니다.

 

 

 HTML에서 onclick 이벤트를 이용해 부르는 getNewsByKeyword() 함수를 만들어보도록 하겠습니다.

 

해당 기능은 keyword 변수에 검색을 위한 input 박스에 있는 요소를 가져와서 담아줍니다.

 

 그 후 url에 있는 쿼리문에 q=${keyword}를 추가해 주시고 fetch()를 하고 render() 함수를 불러주면 됩니다.

 

 위에서 살펴본 두 함수와 키워드 검색 함수의 코드들을 보면 많은 부분들이 중복되는 것을 확인할 수 있습니다.

 

 

 키워드로 검색을 해서 해당 키워드에 대한 기사들이 출력되는 것을 확인할 수 있습니다.

 

 중복된 코드 제거하기

 

 

 위에서 본 세 가지 함수를 위와 같이 바꿀 수 있습니다.

 

 fetch() 하고 json() 함수를 호출하는 부분이 반복되고 URL도 반복되기 때문에 반복되는 부분은 fetchNews에서 처리하고 각각의 기능은 데이터만 가져와서 fetchNews에 parameter를 전달해 줍니다.

 

 이렇게 코드를 구성하면 다른 기능이 추가되어도 힘들이지 않고 parameter를 받아오는 함수만 만들어서 fetchNews에 보내주면 됩니다.

 

 먼저 URL에서 바뀌지 않는 값을 일단 URL에 넣어주고 append()를 이용해서 추가적인 URL을 추가해 주시면 됩니다.

 

 Object.entries(params) 함수는 객체의 속성(key-value 쌍)을 배열 형태로 변환하는 메서드입니다.

 

---

 

 이번 시간에는 검색 기능을 구현하는 시간을 가져보았습니다.

 

 검색 기능은 API가 해당 데이터를 준다면 굉장히 간단하게 구현할 수 있습니다.

 

 이때 기능을 구현하고 프로그램이 작동되는 것이 제일 중요하지만 기능적으로 구현이 완료되었다면 중복된 코드를 제거하는 작업을 하기 위해 코드 관리해 주는 것도 중요하다는 것을 느꼈습니다.

 

 이번 시간은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊