SearchBar2 SearchBar 검색기능 만들기 📁 SearchBar 미리보기 SearchBar 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 Search bar 만들기 사용할때 실행할 백엔드 API prop으로 받아옴 search 버튼을 누르면 search 상태값 업데이트 . 전역적으로 관리 업데이트된 search 데이터를 가지고 prop으로 받은 API 실행 백엔드 search value값 param으로 받아서 데이터를 찾을때 search value값이 포함된 데이터만 가져오도록 설정 실제 구현한 코드 각 페이지에서 트윗 데이터를 가져오는 API가 다르기때문에 데이터를 가져오는 함수를 넘겨받아서 사용했다. 그리고 searchBar 디자인은 간단하게 tailwind에서 지원해주는 searchBar를 가져와 수정해서 사용했다. const.. 2024. 1. 23. Explore 페이지 만들기 📁 Explore 페이지 미리보기 Explore 페이지 기능에 대해서 간단하게 정리해보자면 다음과 같다. SeacrchBar : 키워드 검색 누르면 해당 키워드를 포함한 데이터를 보여줌. Top : 키워드가 포함된 트윗 데이터들을 하트 수가 많은순으로 보여줌 Latest : 키워드가 포함된 트윗 데이터들을 최신순으로 배열 People : 계정정보에 키워드가 포함된 유저 데이터들을 보여줌 실제 구현한 코드 대부분 백엔드 코드는 getTweet API와 거의 동일하게 사용한다. 다른 점은 트윗 데이터를 가져올때 search 데이터를 가져와서 해당 글자를 포함한 데이터를 가져온다는 점이다. Top부분 마지막에 like 숫자에 따라 많은 순으로 데이터를 다시 정렬하여 프론트 보여주게 된다. data: topUs.. 2024. 1. 22. 이전 1 다음
