🔎 검색 구현 하면서 느낀점

[FE LEE]

🔎 검색 구현

(1) 최근 검색한 키워드 → 키워드를 검색 후 해당 아이템을 클릭 했을 때 이벤트 걸기

중복된 검색어가 있을 경우 옛날 기록은 지워지고 최신 기록을 앞으로 당긴다.
검색 키워드 내역 10개 까지만 보여지도록 ! 11개 째부터 사라지고 새롭게 추가된다.

사용한 메서드 filter, _(lodash), unshift, pop, localstorage

조건 1. 중복된 검색어가 있다면

_ lodash

if (_.filter(검색된 리스트, 검색한 키워드).length > 0) {
    ...
}

검색된 리스트에 내가 검색한 키워드 값이 있다면 1 없다면 -1이다. (indexOf) 같은 역할을 해준다.

그러므로 있을 경우 0보다 클테니 부등호를 사용하여 조건을 걸어주고 블록안에 새로운 배열을 만들어질 수 있도록 코드 로직을 생성한다.

📍 filter

keywordList = keywordList.filter((item) => {
   // item의 검색명과 내가 클릭한 검색 결과 아이템이 다른 애들은 앞으로 보내기
   return item.coin !== newCoinMarket.coin || item.market !== newCoinMarket.market;
});

// 새로운 배열에 내가 클릭한 객체를 새로 추가해주자
keywordList.unshift(newCoinMarket);
}

filter와 map은 새로운 배열을 만들어주는 ES6 문법이다. 그래서 전역변수로 선언된 keywordList의 새로운 배열값을 만들어주는데, 이처럼 반환된 값이 현재 있던 item의 coin과 내가 찾고자 한 coin이 일치하지 않으면서 ~ ( || (OR) 연산자) market 또한 일치하지 않는 다른 애들은 앞으로 보내준다. (unShift) 이렇게 filter로 하여금 새로운 배열을 만들어준다.

그리고 새로운 배열이 만들어진 keywordList 배열에 내가 클릭한 아이템을 새로 추가해줌으로서 최근 검색한 검색명에 중복된 애들은 한 번에 취합돼서 최신 기록 순서로 옮겨지게 되고 중복된 값들은 앞으로 가면서 new 배열값이 생기도록 했다.

📍 작업하면서 헷갈린 것.

화살표함수에서 값을 반환할 때, function 함수와는 달리
const sum = (num1, num2) => num1 + num2 이렇게 블록 없이 처리가 가능하다.

하지만 블록안에서는 retrun을 사용해야한다.

arrow 함수 return?

const sum = (num1, num2) => {
 return num1 + num2;
}

조건 2. 중복된 아이템이 없을 경우 → 보여질 수 있는 아이템은 최대 10개 처리

unShift로 리스트에 아이템 추가하기

조건 3. 10개가 초과 됐을 경우 ?

• 마지막 순서에 위치한 리스트 아이템 제거하기 (pop)
• 그리고 새로운 아이템 최신 순서로 추가하기 (unShift)
• 결론적으로 이렇게 조건문을 거친 애들은 로컬스토리지에 저장해준다.

그렇게 최근 검색한 가상자산 기능 구현 완료

(2) 검색 필터링

1. 검색명 (한글, 영어)
   2.검색한 키워드의 심볼명
2. 한글 초성
3. 영어로 '검색명' 입력할 때, 이 4가지 조건이 성립돼서 검색시 찾고자하는 결과물이 나와야한다.

그렇게 하기 위해서 다양한 로직으로 조건문을 만들어서 작업해봤으나, 시간 지연으로 이미 만들어진 컴포넌트를 사용했다.
검색할 때 특히 가장 어려웠던 것이 무엇 이냐면 한글 검색할 때는 초성, 종성, 중성 그리고 자음과 모음이 있고 '읻'을 입력해도 이더리움이라는 결과물이 나오기 위해서는 두벌식도 고려해서 해야한다. 근데 그것을 전부 처리해주는 한글 라이브러리가 있었다. → hangul.js 참고하기

hangul.js에서 제공해주는 메서드 기능도 다양하다 !

(3) 입력된 키워드만 색깔입히기 (하이라이터)

현재 내가 입력한 키워드에 대해서 하이라이터 효과를 주기 위해서도 indexOf, split, splice, join 등등 여러 메서드들을 잘 활용해야되는데
하다가 구조요청했다. 암튼 배열 쪼개고 붙히고 하는 능력도 부족한 것 같다. 따로 연습해보자 !