[트러블슈팅] 필터링 로직의 세분화 문제 해결

🚀 문제 상황

Next.js와 TypeScript를 선택하면, React + TypeScript로 작성된 포트폴리오도 표시 되는 이슈가 발생하였다. 필터링이 정확히 작동하지 않는 문제였다.

---

🛠️ 초기 코드

    const filteredContent =
        contentData[activeTab]?.filter((item) => {
            if (selectedTechs.length === 0) return true;
            return item.techs.some((tech) =>
                selectedTechs.some((selectedTech) => selectedTech.toLowerCase() === tech.toLowerCase())
            );
        }) || [];

문제점

OR 조건만 적용하여 선택된 기술 중 하나만 일치해도 프로젝트가 결과에 포함됨
예) Next.js와 TypeScript를 선택하면, React 와 TypeScript 프로젝트도 표시됨.

세분화 부족으로 사용자 경험이 저하 될 수 있는 문제점을 발견하였다.

---

🛠️ 문제 해결 과정

1.OR + AND 조건 결합
선택된 기술 중 하나라도 포함된 프로젝트는 OR 조건으로 표시하였고 선택한 모든 기술이 포함된 프로젝트는 AND 조건으로 표시하도록 로직을 수정하였다.

2. 값 정규화 추가
대소문자 및 공백 차이를 제거하여 비교 정확도를 향상 시켰다.

3. 모든 필터가 선택된 경우 처리
모든 필터가 선택되었을 떄는 필터링 없이 모든 프로젝트를 표시하였다.

const filteredContent =
    contentData[activeTab]?.filter((item) => {

        // 선택된 기술이 없으면 모두 표시
        if (selectedTechs.length === 0) return true;

        // 프로젝트의 기술 스택 정규화
        const normalizedItemTechs = item.techs.map((tech) => tech.toLowerCase().trim());

        // 선택된 기술들 정규화
        const normalizedSelectedTechs = selectedTechs.map((tech) => tech.toLowerCase().trim());

        // OR 조건: 선택된 기술 중 하나라도 포함된 프로젝트
        const matchesOr = normalizedSelectedTechs.some((selectedTech) =>
            normalizedItemTechs.includes(selectedTech)
        );

        // AND 조건: 선택한 모든 기술이 포함된 경우
        const matchesAnd =
            selectedTechs.length > 1 &&
            normalizedSelectedTechs.every((selectedTech) => normalizedItemTechs.includes(selectedTech));

        return matchesOr && (selectedTechs.length === 1 || matchesAnd);
    }) || [];

✨ 결론

• 문제: OR 조건만 사용으로 인해 잘못된 프로젝트가 필터링 결과에 포함됨
• 해결: OR + AND 조건을 결합하여 필터링 로직을 세분화함
  앞으로는 조건 설계할때 더 세분화 하고, 기술 스텍을 비교할때 대소문자, 공백 차이를 제거하여 비교 정확도를 높여야겠다고 생각했다.