.gif&blockId=5538e6a5-846c-4806-91c2-a17c25894d28)
화면
.gif&blockId=2860af8a-6a0d-48fa-a22a-8dbd72b38154)
배경
개발 커뮤니티의 목적에 맞게 서비스를 사용하는 유저들에게 개발 관련 정보를 쉽게 접할 수 있게 뉴스를 보여주고 싶었습니다.
구현한 기능
•
BE
네이버 검색 API
네이버 검색 API와 카카오 검색 API 중에 우선적으로 네이버 검색 API를 선택한 이유는 뉴스 데이터를 명확하게 가져올 수 있고 일일 할당량 또한 25,000번으로 충분하여 우선적으로 선택했습니다.
Jsoup를 사용한 크롤링
크롤링하기 위해 HTML을 파싱할 수 있는 라이브러리 Jsoup을 선택하였습니다.
네이버 검색 API에서 보내주는 수많은 사이트를 파싱하기에는 시간이 부족하여 가장 많이 보내주는 링크를 카운팅하여 특정 사이트를 우선으로 파싱하여 상세 데이터를 저장했습니다.
•
FE
useInfinityQuery와 react-intersection-observer를 활용한 무한스크롤
옵저버를 활용해, 뷰포트 안에 옵저버가 보여지는 시점에 다음페이지를 불러오도록 했습니다.
뷰포트의 크기를 계산해 Yscroll 값을 활용하는 방법도 있었지만, 더 효율적이고 안정적인 방법인 observer를 활용했습니다.
scroll Event를 활용한 UI
사용자 편의성을 위해 약 한페이지 정도 이상의 스크롤이 발생하면, 정해진 Yscroll값에 따라 scroll to top 버튼이 생기도록 구현했습니다.
뉴스 상세보기페이지에서도 스크롤 이벤트를 감지해 전체 내용을 볼 수 있도록 디자인했습니다.
추가적으로 구현하고 싶은 기능
•
정적인 뉴스 API 요청 키워드를 인기 있는 동적인 키워드로 변경하기
현재 네이버 검색 API를 약 정적인 15 개정도의 키워드를 사용하여 뉴스 API를 요청하고 있습니다.
그렇다 보니 해당 키워드가 인기가 있는 키워드인지 모르는 상태로 개발자 임의로 추가 하였기 때문에 뉴스 데이터가 사용자에게 필요한 정보인지 판단하기 어렵습니다.
따라서 사용자들이 검색한 키워드를 데이터베이스에 저장하고 가장 많은 TOP10 키워드를 사용하여 뉴스 API를 요청하고 싶습니다.