3주차 네번째 - 2 (필터 기능이 있는 대시보드 구현하기)

🥺 프로젝트 시작!

네 번째 프로젝트를 진행하였습니다.

이번 프로젝트는 처음으로 TypeScript 를 사용하고 또한 figma 에 작성된 디자인과 가이드에 따라 구현해야 하는 과제였습니다. 또한 json-server 를 이용하여 mock 데이터로 화면에 보이도록 설정해주는 부분도 필요했습니다.

 

내 거친 TS 지식과 불안한 눈빛과 함께 첫 타입스크립트 기반 프로젝트를 시작하였습니다.

 

완성하여 배포한 프로젝트 이미지

 

필터나 토글을 선택하여 조건에 맞는 견적 요청 카드를 보여주는 페이지를 구현하는 것이 목적인 과제입니다.

 

크게 파트를 나누자면 필터 섹션, 카드 섹션, 네비게이션 섹션 (그 외 배포 설정 등..)으로 나눌 수 있었습니다. 이번 과제부터 팀원분의 사정으로인해 저희 팀이 3명(ㅠㅠ)이 되어버렸는데 다행히도 파트가 크게 세 개로 분류돼서 각자 파트 나누기에 적절했던 것 같습니다.

제가 맡은 부분은 중간에 있는 필터 선택 부분이었습니다.

 

 

구현해야 했던 부분은 다음과 같습니다.

 

1. 메뉴 hover 시, 테두리 색 적용
2. 메뉴 클릭 시, 아래로 checkbox list 생성 및 메뉴 스타일 적용
3. checkbox 선택시, 메뉴 스타일 적용 및 선택된 checkbox 숫자 보이도록 처리
4. 선택된 필터가 있는 경우 메뉴 우측에 '필터링 리셋' 버튼 보이도록 적용
5. '필터링 리셋' 버튼을 누르면 선택했던 checkbox 를 리셋
6. 선택한 필터에 맞는 견적 요청 카드 출력

 

이번 과제는 특별한 기능을 구현해야하기 보다는 필터 기능을 제외한다면 이벤트가 일어났을 때 생기는 스타일 변화나 반응형 디자인이 대부분이었기 때문에 전반적으로 크게 어려울 부분이 없을 거라 생각했었습니다. 하지만 역시나 막혔던 부분들이 있었습니다.

 

👉 필터링 로직

처음에 작성했던 필터링 로직은 다음과 같습니다.

// cardData : 카드의 정보 배열
  //  ex ) cardData = [{id: 0, name: name, 필터항목: ["조건1", "조건2"]}, {...}, ...]
// selected : 선택한 필터 배열
  //  ex ) selected = ["조건1"]

const filterResult =
  selected.length > 0
    ? cardData.filter((card) => {
        return selected.some((selected) => {
          card.필터항목.find((item) => item === selected)
        );
      })
    : cardData;

우선 필터가 하나라고 가정한다면

selected 가 있을 때, cardData 배열에서 filter 메서드를 사용하여 반복문을 돌고 selected.some 을 이용하여 선택한 필터의 조건에 맞는지를 체크하였습니다. 그리고 이런 로직을 필터 종류만큼 중첩되도록 로직을 구현하였습니다.

 

하지만 막상 적용해보니 모든 조건을 충족하는 교집합 결과를 리턴하는 것이 아닌, 선택한 조건에 하나라도 맞는 합집합 결과가 리턴되었습니다. 요구사항에 맞는 결과는 아니었기 때문에 로직의 수정이 필요했습니다.

 

🥳 문제 해결

 

대대적인 수정을 하여 필터 로직을 변경 해야하나 고민하면서 기존 로직을 계속 분석하였습니다.

처음에는 some 메서드를 사용해야 여러가지 조건의 필터를 선택했을 때 원하는 조건이 나올거라 생각했었는데, 실제로는 OR 연산자 처럼 하나라도 맞으면 true를 반환하였기 때문에 각 조건이 포함되는 모든 카드들이 리턴되는 것이였습니다. 생각했던 로직과 실제로 돌아가는 로직이 달라서 생긴 문제였던 것 같습니다.

some 메서드가 하나라도 맞는 요소가 있을 때 true 를 반환하는 메서드라면 그와 비슷하게 모든 요소가 참일 때만 true 를 반환하는 every 메서드가 있었습니다. 따라서 단순하게 some 메서드를 썼던 부분들을 every 로 고치는 것으로 문제가 생겼던 로직을 요구사항대로 동작하도록 수정할 수 있었습니다.

 

---

회고

이번 프로젝트부터 GitHub Issue 를 통하여 이슈관리를 시작하였습니다.

이전에도 자주 사용했던 기능이라 크게 어렵지 않을 거라 생각했었습니다. 하지만 이전에는 적어도 몇 주부터 한 달 이상 진행하는 프로젝트에서만 이슈관리를 진행하여서 이슈를 일 단위로 작성하곤 했었는데, 2~3일이라는 단기간에 적용하려니 조금 어려움을 느꼈던 것 같습니다. 작업 기간이 시간 단위로 쪼개지다 보니 이슈를 미리 작성하기가 어려웠던 부분도 있고 한 가지의 이슈만 작성하고 그 작업을 하다가도 다른 작업을 같이 진행하게 되는 것도 이유였습니다.

다음 프로젝트 부터는 프로젝트 시작 전에 해야 할 일에 대한 이슈를 최소 단위로 잘 분리하여 이슈에 작성해놓고 시간 단위로 일정관리를 하는 연습이 필요할 것으로 보입니다.