1. 오설록
- 한국 최고의 차 판매회사인, 오설록 클론 코딩을 진행했다.
1_1 시연 영상
1_2 프로젝트 소개
- 프로젝트 클론 사이트 소개 : 오설록은 국내 차 전문 브랜드로, 다양한 차를 판매함은 물론 구독 서비스를 제공하여 차와 함께하는 일상을 제공
- 특징 : 다양성, 일상, 편리함을 주요 성질로 판단하고 이를 중심으로 기능 구현
- 프로젝트 목표 : React와 Node.js를 활용해 사이트 구축하기
- 진행기간 : 2023년 9월 18일 ~ 2023년 10월 6일
- 프로젝트 참여자 : 프론트3 / 백엔드4
2. 적용 기술 및 구현 기능
적용기술 :
Front-End : React.js, sass
Back-End : Node.js, express.js, typeORM, bcrypt, JWT, MySQL
Common : RESTful API
2_1. 회원가입 / 로그인
- 실시간 유효성 검사
2_2. 제품 목록
- queryString
- 필터
- Pagination
2_3. 제품 상세
- 제품 상세 정보
- 리뷰 목록
- 바로구매 기능
- 구매수량, 옵션 선택
2_4. 장바구니
- 선택주문/전체주문
2_5. 주문 / 결제
- 주문정보
3 프로젝트 진행 요약
3_1 팀에서 담당한 역할 + 대략적인 히스토리
- 5Sherlock은 프론트3 / 백엔드 4로 이루어진 팀이었다.
- 첫 미팅때, 프론트와 백엔드 경험이 모두 있었던 백엔드 분께서 Project Manager를 맡아주셨다. Product Manager 자리가 비어있자, 하고 싶다고 해서 결국 Product Manager를 하게 되었다.
- 1차 프로젝트 때는 다 구성하고, 백엔드와 통신을 시도했었다.
- 하지만 변수는 통신에서 자주 발생했기에, 이번에는 백엔드와의 통신을 구현 1순위로 두었다.
- 가장 많이 리소스가 투자 될 것 같은 기능들을 위주로 업무를 분담했다.
- 그 결과, 필수 기능은 모두 구현하며 통신도 정상적으로 작동하는 것을 확인했다.
3_2 진행하면서 좋았던 점
- 백엔드와 API통신을 할 때, 엑셀을 통해서 용어를 정리해서 혼란을 사전에 방지했던 점이 좋았다.
- 통신을 우선시 하다보니, 프로젝트 필수 기능 구현에 성공해서 좋았다.
- QueryString, Pagination등 페이지들에서 공통적으로 사용하는 기능들을 익힐 수 있어서 좋았다.
3_3 진행하면서 아쉬웠던 점
- 1차 프로젝트 때 일정관리 비중 투자에 실패를 겪어, 신경을 더 썼지만.. 2차 프로젝트도 마감일 직전까지 검증을 하는 등, 기한이 빡빡했다.
- 안해본 기능에 대한 난이도 측정 어려움이 가장 컸다.
- 내 생각보다 장바구니와 결제 페이지에 대한 난이도가 컸다.
3_4 트러블 슈팅 :
1. 메뉴, 필터 코드 간결화
[문제 사항]
=> 제품 리스트에 있는 메뉴, 필터 버튼의 UI가 반복적으로 들어가 있었음. 이로 인해, 코드의 길이가 굉장히 길어졌으며, 유지 보수 접근도 힘들어졌음.
[결과]
=> 메뉴와 필터에 필요한 데이터를 따로 분리해서, 해당 데이터를 map 함수로 돌릴 수 있게 함. 그 결과 해당 코드의 오류를 데이터만 분리해서 볼 수 있게 해서 유지 보수를 쉽게 함. 또한 코드의 길이가 줄어드는 결과를 가져옴.
2. 페이지 이동 시, 스크롤 초기화
[문제 사항]
=> 스크롤을 내리고 페이지를 이동하면, 내려진 상태로 페이지가 이동되는 문제가 있었음. 해당 사항은 고객 UX 적인 측면에서 악영향을 줄 거라 판단했음. 따라서 스크롤을 내리고 페이지를 이동하면, 강제적으로 스크롤을 맨 위로 올리려고 함.
[결과]
=> ScrollToTop.js라는 파일을 만들었음. 해당 파일은 useLocation()을 이용해서, url 주소가 달라질 때마다 useEffect 안에서 scrollTo(0,0)을 이용해서 강제적으로 올려줬음. 해당 JS 파일은 Router에 넣어서 모든 파일에 해당 되게 했음. 이를 통해 스크롤을 내리고 이동해도 스크롤이 올라가도록 구현했음
3. 페이지네이션 로직 구현
[문제 사항]
=> 제품 리스트에 있는 제품의 수량에 따라 페이지를 그려줘야 했음. 한 페이지에 들어갈 제품의 개수, 그 개수를 토대로 기본적으로 보여줄 최대 페이지 구현을 해야 했음. 기존에 있는 페이지네이션 라이브러리나 작성된 코드들을 활용하려고 했으나, 해당 기능들을 모두 반영하기에 유연한 코드가 아니었음
[결과]
=> 제품 리스트 숫자를 한 페이지에 보여줄 최대 개수로 나누고, 나머지를 이용해서 최대 페이지 개수를 보여주는 로직을 작성했음. 이를 통해서 언제든지 페이지의 UI를 원하는 대로 변경할 수 있는 유연한 코드를 작성함
4 총평
- 페이지네이션, 필터 등 안해본 기능을 적용하는데 리소스가 들었지만, 그만큼 논리적으로 사고하는 경험이 늘어난 것 같아 좋다.
