2023-01-26 목요일

✏️ 무엇을 배웠나

---

1. 다중 검색 옵션 적용하기

검색어 + 카테고리 + 주차 가능 여부 + 카페 운영 여부 + 영업 여부를 모두 검색 옵션으로 넣어서 이 모든 조건을 만족하는 결과 값을 받아서 렌더링을 해야 했다.

검색어에 따른 검색 결과 렌더링이나 카테고리, 주차 가능 여부 등 각 옵션에 대해서는 필터된 값을 가지고 올 수 있었는데 내가 원하는 건 사용자가 원하는 옵션을 모두 만족시키는 결과 값이었다.

내가 생각한 로직은 아래와 같았다.

-   전체 데이터는 data에 담겨 있다
-   검색과 필터링은 data에서 해온다

1.  검색 결과를 담은 값
2.  카테고리 선택 여부를 담은 값과 카테고리 이름을 담은 값
3.  주차 선택 여부를 담은 값
4.  카페 선택 여부를 담은 값
5.  영업 여부를 담은 값

검색 기능이 실행될 때
위 5가지 값의 교집합을 반환하면 된다.

단, 검색어를 제외한 기타 필터링 조건들이 선택되지 않았을 때는 해당 값은 연산에서 빼야 한다.

처음에 시도한 건 각 검색 옵션을 변수로 따로 지정해서 거기 검색 기능이 활성화되었는지 지시해주는 boolean값을 할당해서

filter할 때 각 조건을 && 연산자로 붙여서 교집합을 얻어내려고 했는데 사용자가 선택하지 않은 옵션은 연산에 넣으면 안 된다는 조건을 만족시킬 수가 없었다.

reduce 메소드를 사용해서 filter된 결과값을 누적시키는 방법도 해봤는데 뭔가 잘 되지 않았다.

답은 안 나오고 구글링을 해도 마땅히 적용해볼 만한 게 나오지 않아 답답했다. 실력을 더 끌어올리고 싶다는 생각을 했다.

여튼 프로젝트에는 마감이 존재하고 어찌됐든 이 기능을 만들어야 하기 때문에 suno님에게 도움을 청했다.

suno님이 접근한 방법은 아래와 같다.

// 검색 결과 필터

let result = data.filter((item) => item.FCLTY_NM.includes(search));

if (currentCategory !== '카테고리 선택') {
	result = result.filter((item) => item.MLSFC_NM.includes(currentCategory));
}

if (parking) {
	result = result.filter((item) => item.ADIT_DC.includes('주차'));
}

if (cafe) {
result = result.filter((item) => item.ADIT_DC.includes('카페'));
}

검색 결과로 도출된 result에 다시 조건부 filter를 먹여서 최종적으로는 사용자가 선택한 옵션에 모두 만족하는 결과값을 리턴하게 해주는 로직이다.

이걸 보는 순간 '어 이걸 왜 생각을 못했지'라는 생각이 들었고, '왜 이것도 생각을 못 했지'라는 생각도 들었다.

일단 접근 자체를 굉장히 쉽고 직관적으로 했다는 인상을 받았다. 같은 문제에 대해서 다른 흐름으로 접근하는 걸 보니까 배울 점이 있었다.

문제를 해결할 때는 가장 쉽고 직관적으로 풀 수 있는 방법이 무엇인가 생각해보자. 너무 돌아돌아 생각했다는 생각도 했다. ( 뭔가 멋진 코드를 짜보고 싶었음)

🏷️ 오늘의 코멘트

코드는 많이 쳐볼수록 좋다라는 말을 체감하고 있는 요즘이다. 더 많이 쳐서 더 많이 잘하고 싶다. 실력이 더 늘어서 더 많은 걸 도전해서 해내고 싶다 🥳