[Project] 검색어 조회 기능(API콜 최적화) 개인 프로젝트 후기

📄 프로젝트 소개

본 프로젝트는 json서버 API를 활용해 API콜 최적화를 적용한 검색어 조회 웹 서비스입니다.

 

 

🐈‍⬛깃허브

https://github.com/seonyeong719/Search_Project

GitHub - seonyeong719/Search_Project

 

 

🗓️프로젝트 기간

2023년 4월 1일 ~ 4월 4일 

 

 

---

🖥️ 프로젝트 메인 화면 

 

• 메인 화면 

 

 

• 메인 화면 (.gif) 



• 검색 결과가 없을 시(.gif)

 

 

---

 

⚒️사용 기술 및 라이브러리

Stack

• React
• JavaScript
• HTML
• CSS

 

 

---

💡주요기능

• API 콜 최적화하기
  • 검색 서비스는 입력할 때마다 API 콜을 요청하기 때문에 굉장히 비효율적일 수 있습니다. => 이는 Debounce를 이용해 최적화가 가능합니다. 
  • ❗️하지만, 라이브러리는 axios만 사용이 가능하며 axios의 cache 옵션은 사용할 수 없습니다.+react-query와 같은 캐싱 라이브러리 또한 사용불가합니다.
• 최근 검색어 기능 구현하기
  • 최근 검색어는 최대 5개까지 작성됩니다.
  • 최근 검색어에 포함된 검색어를 검색한 경우 새로 중복 추가되는 것이 아닌, 기존에 있던 검색어가 가장 첫번째로 이동됩니다.
  • 5개가 넘었을 때 새로운 검색어가 생긴다면 가장 마지막 검색어를 삭제합니다.
  • 로컬 스토리지를 활용하여 웹 페이지 종료 후에도 검색기록 유지.
• 키보드 만으로 추천 검색어 구현하기
  • 키보드 만으로 상하 이동 + ENTER로 검색이 가능합니다.
• 검색 단어 하이라이트 하기
  • 검색어가 포함된 부분을 하이라이트합니다.

 

 

---

✍🏻 후기 및 회고

이번 프로젝트를 통해 로컬 스토리지와 Debounce를 알게 되었다.

Debounce를 공부 하면서 쓰로틀링(Throttle)이란것도 알게 되었는데 이건 따로 포스팅을 해두었는데 아래 링크를 보면 된다. 

👉🏻 https://seonzzi-honey-factory.tistory.com/32

 

 

아쉬운점 및 회고

파일 및 폴더 구조의 아쉬움 

- 아무래도 작은 기능 하나만 만드는 토이 프로젝트이다 보니 폴더 구조를 신경 안쓴게 보였다. 

한가지 기능만 하는 프로젝트라 신경을 많이 안썼는데 이렇게 코드를 짜면 유지보수와 가독성이 안좋아지는게 보인다.

다음엔 작은 프로젝트라도 신경써서 가독성 좋은 코드를 만들어야겠다.