TIL / 20210810

✍ 오늘한 일

Search 기능 구현

1.Search는 총 영어와 한국어 2가지 언어로 검색이 가능하다.
한개의 input tag에서 front에서 자체적으로 언어를 체크해 검색해야하기 때문에
정규표현식으로 언어를 판별했다.

const check_eng = /[a-zA-Z]/; // 영어체크
const check_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크

2.초반에 맥주 수가 적을 때는 api로 검색 맥주명만 response로 받아왔다. 그리고 받아온 맥주명을 이용해 전체 맥주 정보에서 필터링하는 방식으로 작업했다. 하지만 맥주 수가 3배 가까이 늘고, 앞으로 더 많은 맥주가 추가 될걸 생각하면 비효율적인 방식이라고 판단이 들었다.결과적으로 검색한 맥주 정보를 불러오는 api가 새로 필요 만들었다.

수정전

const findBeerbyClick = (name)=>{//특정 맥주명을 누른 경우 해당 맥주 명으로 검색
        if(check_eng.test(word)){//영어로 검색            
            words.map((w)=>{
                setSearch_Beer(search_beer => [...search_beer,
                beers?.filter((p) => p.name_korean.includes(w))[0]]);
                setIs_Search(true);
            })
        }else if(check_kor.test(word)){ //한국어로 검색           
            words.map((w)=>{
                setSearch_Beer(search_beer => [...search_beer,
                beers?.filter((p) => p.name_korean.includes(w))[0]]);
                setIs_Search(true);
            })
        }else{
            if(! beers?.filter((p) => p.name_korean.includes(word))[0]){
                window.alert("검색 결과가 없습니다")
                return;
            }
          
        }

    }

수정후

const findBeerbyWordClick = (name)=>{//특정 맥주명을 누른 경우 해당 맥주 명으로 검색
        setSearch_Beer([]);
        setHashtag([]);
        if(language==="english"){//영어로 검색            
            setSearch_Beer(words?.filter((p) => p.name_english.includes(name)));
        }else if(language==="korean"){ //한국어로 검색           
            setSearch_Beer(words?.filter((p) => p.name_korean.includes(name)));   
        }
        setIs_Search(true);
	recent_words.concat(search_beer[0]?.name_korean));//최근 검색어 리스트에 저장
    }

3.검색 후에는 더이상 검색된 단어명이 모달로 안 보여야하는데 남아 있어 제거해주었다.
이외 실시간으로 확인한 결과 검색 단어명이 없을 때, 아예 검색을 안하고 있을 때도 모달이 열리지 않도록 작업해주었다.

const [openModal, setOpen_Modal] = useState(false);

useEffect(()=>{
  if(word === null || words.length===0 ){
    setOpen_Modal(false);           
  } else{
    checkLanguage();
  }
},[word, words])

카카오, 당근마켓 .. 어느 플랫폼에서나 검색 기능이 있지만 자세히 들여다보면 검색 방식, 검색 결과를 보여주는 방식이 모두 다른것을 볼 수가 있다.

사용자가 검색을 통해 어떤 검색 결과를 얻고 싶은지에 따라 자동완성이 필요할 수도, 추천 검색어가 필요할 수도 있는 것이다.

사용자의 니즈를 잘 파악하여 서비스에 녹여낼 수 있도록 끊임없이 고민 해야겠다.