3rdweek-energybalance-task

Go Demo🚀

Member


권영채(팀장)	신원규	김서윤	지연비
FE Developer	FE Developer	FE Developer	FE Developer

역할 분담

팀원	역할
권영채	프로젝트 매니지먼트 /
신원규	자동완성 /
김서윤	프로젝트 초기세팅 /
지연비	Nav바 / Data 가공 및 Json-Server 세팅 / E2E test

구현 기능

✅카테고리

✅정렬

✅자동완성

✅검색어 추천

✅초성 검색

프로젝트 실행 방법

$ git clone https://github.com/PreOnboardingTeam-16/3rdweek-energybalance-task.git
$ npm install
$ npm start

이슈정리

아토믹 디자인 적용

리액트는 컴포넌트 기반 라이브러리로, 컴포넌트의 재사용이 중요합니다. 우리팀은 중복되는 컴포넌트의 재사용성을 높이고자 아토믹 디자인 패턴 방식으로 프로젝트를 설계했습니다. 먼저 페이지를 나눌 수 없을때 까지 쪼개서 가장 작은 컴포넌트 단위를 원자로 설정했습니다. 그 후 각 단계별 재사용성 여부를 따지고, 조합하여 상위컴포넌트를 만드는 형식으로 진행했습니다.

이번 프로젝트에서는 재사용되는 컴포넌트가 많지 않았고, 설계과정에서 Molecules와 Organisms의 분류 기준이 명확하지않아서 팀원들과 이 부분들에 대한 논의가 이루어져야했습니다. 이러한 논의가 필요함에도 불구하고 컴포넌트를 쪼개고 팀원들 각자 원자단계부터 개발을 진행하면 불필요한 중복을 줄일 수 있기 때문에 아토믹 디자인을 도입했습니다. 직접 사용해보니 아토믹 디자인 패턴은 역할의 분리가 잘 되어있어 레이아웃을 짜는데 있어 효율적이었고, 조금 더 큰 프로젝트에서 확장 가능성을 고려한다면 적합한 디자인 방법론이라고 생각합니다.

기획부터 배포까지

자동완성

⚡구현 중 기술적 이슈들

디렉토리 구조

│─MockServer
├─public
└─src
   ├─Components
   │  ├─Pages
   │  │  └─Main
   │  ├─Templates
   │  ├─Nav
   │  ├─SearchBar
   │  └─SearchResult
   ├─Const
   ├─Style
   ├─Types
   └─UI
     ├─Atoms
     ├─Molecules
     └─Organisms

E2E Test(Cypress)

cypress를 통해 주요 로직을 테스트하였습니다.

프로젝트 후기

🎈권영채 :

🎹신원규 :

🎇김서윤 :

💖지연비 :

jyb1798 / 3rdweek-energybalance-task Goto Github PK