3주 차 여섯 번째 과제(22.02.17 ~ 22.02.19) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

여섯 번째 과제 검색 페이지 만들기

영양제를 검색할 수 있는 페이지를 만들었습니다.

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/06_search

GitHub - Gilpop8663/06_search: 원티드 프론트앤드 프리온보딩 2기 14팀 검색 페이지 프로젝트입니다

기능 구현 (맡았던 부분)

 

브랜드와 제품 각각 검색할 수 있는 select 창

• 전체 , 제품 , 브랜드 3가지 중 선택할 수 있으며 선택한 카테고리를 state값에 저장하여 해당하는 state 마다 로직을 달리하여 원하는 정보만 얻을 수 있도록 구현하였다.

띄어쓰기를 할 시 가장 일치하는 검색어를 상위 검색어로 노출

• json-server를 이용하여 검색어의 데이터를 불러온 후 띄어쓰기를 한 경우의 키워드가 있는지로 배열을 정렬한다.

json-server을 이용하여 실제 데이터를 불러오는 방식으로 구현

• json-server을 이용하여 api를 react-query를 사용하여 불러와 사용하였다.

검색어에 따라 html header의 title이 변경

• react-helmet을 이용하여 검색어를 title에 반영하도록 하였다.

검색하는 중에 자동완성 기능

• html의 datalist 태그를 사용하여 input과 연결시켜 자동완성이 되도록 하였다.

 

 

정리 및 회고

새로 알게 된 점

• html의 datalist 태그를 통해 input에서 자동 완성할 수 있다는 것을 알게 되었습니다.

 

• json-server를 heroku 사이트를 통해 배포하는 법을 알게 되었습니다.

 

• 실제 검색엔진을 만들 때 한 글자도 검색이 되어야 할지 , 브랜드명과 제품명이 같을 때 어떤 것을 먼저 보여줘야 할지 등등 다양한 것들을 팀원들과 고민해보며 고려해야 할 것들이 많다는 것을 알게 되었습니다.

힘들었던 점 / 해결과 극복 방법

• json-server을 이용해서 할 때 두 단어로 (홍삼 칼슘) 띄어쓰기를 하여 검색을 할 때의 두 단어 모두 포함되어 결과를 주는 기능이 없어서 첫 번째 단어로 먼저 검색 값을 가져온 후 두 번째 단어가 포함되어 있으면 상위 검색 결과로 sort 하였었습니다. 

 

• 배포 담당이였어서 json-server를 이용한 것을 실제 배포 사이트에서도 이용 가능하게 배포하는 것이 처음이라 어려웠지만 google 검색을 통해 해결할 수 있었습니다.

 

• react-router-dom의 useLocation을 통해 URL의 params를 가져와 카테고리와 검색어가 무엇인지에 따라 검색 결과를 다르게 하는 로직을 짤 때 머리가 복잡했었는데 팀원 분과 같이 같은 화면을 보고 진행을 하며 이야기를 하고 코드를 작성하니 잘 해결할 수 있었습니다.