 |
 |
 |
 |
| 권영채(팀장) | 신원규 | 김서윤 | 지연비 |
| FE Developer | FE Developer | FE Developer | FE Developer |
| 팀원 | 역할 |
| 권영채 | 프로젝트 매니지먼트 / 피그마 제작 / 카테고리,정렬,검색어에 따른 데이터 필터링 |
| 신원규 | 검색어 자동완성 구현 / dev 버전 Json-Server, React server 설정 / 문자열 유사도 기반 검색어 추천기능 구현 |
| 김서윤 | 프로젝트 초기세팅 / 검색결과 컴포넌트 구현 |
| 지연비 | Nav바 / Data 가공 및 Json-Server 세팅 / E2E test |
- 선택한 카테고리내에서 입력한 검색어에 대한 제품 검색결과를 출력한다.
- 검색어가 없는 경우, 해당 카테고리 제품의 전체 결과를 출력한다.
- default 카테고리는 '전체'이다.
- ex) 카테고리 : '종합영양제' / 검색어: '컨트롤' ==> '컨트롤지G', '컨트롤500', '컨트롤화이버', ...
- 정렬 기준은 인기 순 / 높은가격 순 / 낮은가격 순 으로 정렬된다.
- default 정렬은 '인기순'이다.
- 검색창이 Focused일 때, 전체 제품명 중 입력창 값을 가지고 있는 제품명을 검색창 밑에 인기 순으로 정렬하여 상위 5개의 결과를 보여준다.
- 검색 결과와 제품명이 일치하지 않는 경우, 문자열 유사도를 계산하여 추천 검색어 버튼 4개를 출력한다.
- 검색어가 초성인 경우, 해당 초성이 포함된 제품 검색결과를 출력한다.
- 유사도 우선으로 검색되며 정렬조건은 변경할 수 없다.
- ex) 'ㅋㅈ' ==> '키즈사랑프로바이오틱스', '키즈츄어블프로바이오틱스', '키즈케어비타프로바이오틱스', ...
$ git clone https://github.com/PreOnboardingTeam-16/3rdweek-energybalance-task.git
$ npm install
$ npm run dev
리액트는 컴포넌트 기반 라이브러리로, 컴포넌트의 재사용이 중요합니다. 우리팀은 중복되는 컴포넌트의 재사용성을 높이고자 아토믹 디자인 패턴 방식으로 프로젝트를 설계했습니다. 먼저 페이지를 나눌 수 없을때 까지 쪼개서 가장 작은 컴포넌트 단위를 원자로 설정했습니다. 그 후 각 단계별 재사용성 여부를 따지고, 조합하여 상위컴포넌트를 만드는 형식으로 진행했습니다.
이번 프로젝트에서는 재사용되는 컴포넌트가 많지 않았고, 설계과정에서 Molecules와 Organisms의 분류 기준이 명확하지않아서 팀원들과 이 부분들에 대한 논의가 이루어져야했습니다. 이러한 논의가 필요함에도 불구하고 컴포넌트를 쪼개고 팀원들 각자 원자단계부터 개발을 진행하면 불필요한 중복을 줄일 수 있기 때문에 아토믹 디자인을 도입했습니다. 직접 사용해보니 아토믹 디자인 패턴은 역할의 분리가 잘 되어있어 레이아웃을 짜는데 있어 효율적이었고, 조금 더 큰 프로젝트에서 확장 가능성을 고려한다면 적합한 디자인 방법론이라고 생각합니다.
과제의 영양제 리스트에는 제품명과 브랜드 칼럼이 있었습니다. 우리팀은 소비자가 보다 쉽게 원하는 데이터를 찾을 수 있도록 성분, 가격, 검색 횟수 등을 임의로 추가하여 데이터를 재가공하였습니다.
- 카테고리 버튼 구성은 모든 데이터의 성분
- 분류기준(인기순/ 높은가격 / 낮은가격)은 검색량과 가격 기준
json-server을 사용하여 Mock Rest API 서버를 만들었고, 가공한 Mock Data를 불러와서 사용했습니다.
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject",
"dev": "concurrently \"craco start\" \"npx json-server MockServer/db.json --port 4000\" "
},Rest API가 같은 폴더 안에 존재하고, jsonData와 craco start가 동시에 실행되어야하기 때문에 여러 명령어를 하나의 커맨드로 동시에 실행하는 concurrently 모듈을 설치했습니다.
기술 구현을 위해 2가지의 라이브러리를 사용했습니다.
문자열의 유사성을 계산할 수 있는 라이브러리입니다.
한글로 이루어진 문장의 자음과 모음을 분리할수 있는 라이브러리입니다. 초성검색에 사용되었습니다.
// disassemble method는 문자열을 분해하여 배열:string[]로 return합니다.
Hangul.disassemble("가나다"); // ['ㄱ','ㅏ','ㄴ','ㅏ','ㄷ','ㅏ']
// disassemble method의 2번째 인자는 `grouped` 옵션입니다. `true`일때는 2차원 배열로 변환됩니다.
Hangul.disassemble("에너지", true); // [['ㅇ', 'ㅔ'], ['ㄴ', 'ㅓ'], ['ㅈ', 'ㅣ']]
// isConsonantAll method는 문자열이 자음만으로 이루어져 있는지를 return합니다.
Hangul.isConsonantAll("ㅇㄴㅈ"); // true아래는 초성검색에 사용한 로직입니다.
const input = "ㅎㅅ"; // 검색할 문자 'ㅎㅅ'
if(Hangul.isConsonantAll(input)) // input이 초성으로 이루어져 있으면
data.filter((el) => { // 전체 데이터에서 `ㅎㅅ`초성을 가진 상품을 필터링하여 return합니다
const strArr: string[] = []; // 반복문 안에서 초성들을 결합할 배열변수입니다.
// el = '홍삼'
Hangul.disassemble(el.productName, true).map((itemArr) => { // [ ['ㅎ','ㅗ','ㅇ'],['ㅅ','ㅏ','ㅁ'] ]
//분해결과 2차원배열이 생성되고
itemArr.map((item, index) => {
index === 0 && strArr.push(item); // 각 배열의 0번 인덱스['ㅎ'],['ㅅ']를 strArr에 저장합니다.
});
});
return strArr.join("").trim().indexOf(searchInput) !== -1; // '홍삼'을 return 합니다.
});Input tag의 value를 subString으로 가지는 Product.name을 순회하여 찾아, 검색량 기준으로 정렬해 상위 5개의 결과를 검색창이 Focused일때 검색창 밑에 render 시켜줍니다.
한번 코드가 실행될때 500개가 넘는 길이의 리스트를 순회해야하므로 너무 많은 리렌더 방지를 위해 Throttling를 구현하였습니다.
동시에, OnChange 이벤트는 실시간으로 렌더되어 UX의 저하는 방지하였습니다.
│─MockServer
├─public
└─src
├─Components
│ ├─Pages
│ │ └─Main
│ ├─Templates
│ ├─Nav
│ ├─SearchBar
│ └─SearchResult
├─Const
├─Style
├─Types
└─UI
├─Atoms
├─Molecules
└─Organisms
.gif)
cypress를 통해 주요 로직을 테스트하였습니다.
🎈권영채 : 첫 날을 회의만 하며 보냈을 정도로, 많은 생각을 해야 하는 과제였습니다. 요구사항에 대해 개발자가 아닌 사용자의 입장에서 생각하니, 코드로 풀어내기가 편했습니다.
🎹신원규 : Throttling 코드를 구현하는 방법이 흥미로웠습니다. 프론트 업무에서는 잘 다루지 않는 서치로직을 구현하는 경험도요.
🎇김서윤 : 팀원들과 로직을 설계하는 과정이 어렵기도 했지만 새로운 경험이었고 프로젝트 시작 전 설계 단계가 중요하는 것을 느낀 프로젝트였습니다!
💖지연비 : 기능을 어떻게 가져갈 것인지에 대한 회의와 리서치부터 디자인까지 모두 팀 내에서 결정하는 과제였는데 굉장히 흥미로웠습니다. Json-server를 설치하고 E2E test를 처음 해본 것도 좋은 경험이라고 생각합니다!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent