2023-01-25 수요일

✏️ 무엇을 배웠나

1. fuse.js를 이용해 검색 기능 구현하기

fuzzy-search 기능을 구현하기 위해 fuse.js 라이브러리를 사용했다. 앙골리아 같은 라이브러리보다 사용하기 훨씬 쉽고 굳이 앙골리아까지 사용할 필요가 없어서 fuse.js를 선택했다.

fuse.js 공식문서

공식문서를 보고 프로젝트에 세팅을 했는데 너무 간편해서 좋았다. 나중에 기회가 된다면 라이브러리 코드를 뜯어보면 공부가 많이 될 것 같다.

// 검색 옵션 설정
const options = {
	threshold: 0.3,
	keys: ['FCLTY_NM'],
};

// data에서 options를 적용해 검색하고
const fuse = new Fuse(data, options);
// 검색 결과를 result에 할당에 렌더링할 때 사용했다.
const result: any = fuse.search(search);
console.log('검색 결과', result);

딱 이 정도의 코드만 작성해도 전체 데이터에서 내가 원하는 데이터만 가져올 수 있는 기능이 구현된다. 심플하다는 게 fuse.js의 최고의 장점인 듯.

useState와 같이 사용하면 검색 결과를 상태값으로 관리할 수 있다. 이걸 로직을 짠다 생각하면 좀 까마득한데... fuse.js, 적재적소에 잘 쓴 거 같다.

2. Recoil로 상태 관리하기

이번 프로젝트에는 Recoil을 사용해보자고 했었는데, 정말 사용해봤다. Recoil도 너무 간단하다. 리덕스랑 비교했을 때 상태를 전역으로 관리하기 위해서 작성해야 하는 코드 길이도 줄었고 작성 단계도 몇 단계는 간소화됐다.

// 전역 상태 세팅
export const dbState: any = atom<IdbState[]>({
	key: 'dbState',
	default: data,
});

// 상태를 1) 가져오고 2) 업데이트까지 해야 한다면 useRecoilState를 사용한다.
const [DB, setDB] = useRecoilState<IdbState[]>(dbState);

// 상태를 단순히 가져오기만 할 때는 useRecoilValue를 사용한다.
const DB = useRecoilValue<IdbState[]>(dbState);

위 코드가 전역으로 상태를 1) 설정하고 2)가져오고 3)업데이트 하기 위해 작성한 코드의 전부다. 리덕스로 했다면 저것보다 몇 배는 길었을 것. 보일러 플레이트가 거의 없다시피 한 게 부담감도 덜하다.

아직은 맛보기 수준의 사용이지만 리덕스와의 차이를 체감할 수 있었다. 리코일... 뭔가 본격적으로 사용해보고 싶음.