[원티드 프리온보딩 프론트엔드][3주차 2차 과제] 검색창 구현하기

GY·2022년 2월 19일
0

원티드 프리온보딩

목록 보기
9/12
post-thumbnail

프로젝트 설명

프로젝트 소스 코드 및 Readme 설명은 여기서 확인하실 수 있습니다.
깃허브 보러가기

ezgif com-gif-maker (3)

고민 포인트

검색로직

어떻게 하면 소비자가 원하는 제품을 검색했을 때 잘 찾을 수 있을지 로직을 설계하는 것이 중요했다. 나름대로 많은 고민과 토론을 했고, 그 결과 결정한 주어진 시간 내에서 구현할 수 있는 최선의 구현 사항은 다음과 같았다.

  • mockdata를 Next.js api에 저장하여 fetching 구현
  • 검색어 입력
    • 한글 초성,중성,종성이 입력될 때 검색구현 (라이브러리 이용)
    • 영문 입력될 때 대소문자 구분없이 검색구현
    • 공백 들어오거나 공백만 검색어에 남을 때 예외처리
  • 정렬순서 :
    • 사전순 정렬
    • 제품,브랜드를 모두 보여주되 구분하기 위하여 UI 분리
  • 검색결과 :
    • 브랜드 : overflow시 옆으로 스크롤
    • 제품 : overflow시 위아래 스크롤
  • 성능최적화 : data fetching, data 순회를 최소화하려고 노력
    • 처음 검색어를 입력시 mockdata에서 filter
    • 추후 검색어를 입력시 filter된 배열을 리덕스 state에 저장해서 reducer로 다시 filter
    • 삭제시 mockdata에서 filter

상태관리

  • mockdata : 처음에 데이터 통신을 통해 초기값 할당
  • brandList : mockdata에 값이 들어온 뒤 브랜드만 중복없이 추출하여 저장
  • filterList :
    • products : 검색어에 따라 필터된 제품 리스트 저장, 후에 검색결과가 출력될 때를 대비하여 둘의 의존성을 유지하기 위해 mockdata와 같은 객체구조 유지
    • brands : 검색어에 따라 brandList에서 필터된 브랜드들을 string 배열로 저장
const initialState = {
  mockdata: [] as searchInfo[],
  brandList: [] as string[],
  filterList: {
    products: [] as searchInfo[],
    brands: [] as string[],
  }

interface searchInfo {
  제품명: string;
  브랜드: string;
}

잘한점

프로젝트 협업 방식

브레인스토밍

프로젝트 상세 구현 사항 정의

  • 영어: 대소문자 구분 없이 검색 가능할 것
  • 한글: 초성만 입력해도 검색 가능할 것
  • 정렬 순서: 제품명과 브랜드명이 겹칠 경우 제품을 우선적으로 노출

이후 변경된 사항은, 브랜드를 퀵버튼으로 제품명과 별도로 노출하기로 한 것이었다.
이 과정에서 서로 이해한 바가 다른 것 같아 Figma에서 UI를 직접 구현해 확인했다.

개별 구현 로직 공유 및 공통 로직 정의

Initial State 정의

UI 컴포넌트 개별 구현 후 머지 및 최종 수정사항 반영

각자 검색 로직을 구현해본 뒤 모여서 공유

  • 분담이 어려웠고, 검색 로직에 있어 미리예측하기 힘든 부분들이 있었기 때문에 각자 구현해본 뒤 다시 모여 공유하고 적절한 로직을 합치기로 했다.

검색 로직을 합쳐 구현 시작

  • 이 때는 redux 개발자 도구로 리덕스의 전역상태가 어떻게 들어가는지를 확인했다.

UI 컴포넌트별 개별 구현

  • 30 분안에 각자 컴포넌트를 구현한 뒤 머지하고, 최종적으로 수정 사항을 반영했다.

새로 알게 된 내용

아쉬운점, 개선할 점

  • 네이밍에 대한 아쉬움
    - isProduct
    • targetList
    • searchValue
    • rollbackProducts
리듀서
  • 브랜드 검색
  • 제품 검색
  • 검색어 삭제: deleteSearchKeyword
  • 검색어 입력: write

실무에서 이 프로젝트에 대해 알지 못하던 새로운 개발자가 투입되었을 때, 이 코드를 보고 어떤 내용인지 파악하기 쉬울까?

다시 한다면 이런 네이밍을 고려해볼 것 같다.

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글