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

프로젝트 설명

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

고민 포인트

검색로직

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

• 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 분안에 각자 컴포넌트를 구현한 뒤 머지하고, 최종적으로 수정 사항을 반영했다.

새로 알게 된 내용

• Next.js에서 프론트 서버에서 api 구축하고 데이터 fetch 하기

아쉬운점, 개선할 점

• 네이밍에 대한 아쉬움
  - isProduct
  • targetList
  • searchValue
  • rollbackProducts

리듀서

• 브랜드 검색
• 제품 검색
• 검색어 삭제: deleteSearchKeyword
• 검색어 입력: write
  

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

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