1차 프로젝트 후기 - 러쉬코리아 클로닝

프로젝트 소개

1) 주제

• '프레쉬 핸드메이드 코스메틱' 러쉬코리아 웹사이트 클로닝 프로젝트
• 시작부터 마지막까지 React.js로 진행한 첫 번째 팀 프로젝트이자 Git을 사용한 첫 번째 협업 경험
• 백엔드와 첫 협업(회원가입, 로그인, 장바구니 구현)

2) 구성원

• 프론트엔드 2명, 백엔드 3명

3) 기간

• 21.05.10 ~ 21.05.21

적용 기술

• React.js(Class형 컴포넌트), JavaScript(ES6), SASS, Git

사이트 구현 기능

• 다음은 사이트의 주요 기능 중 이번 프로젝트에서 구현한 기능이다. 직접 구현한 기능은 👤, 팀원이 구현한 기능은 👥 로 표시 했다.

1) 회원가입/로그인 페이지

• 👤 아이디,이메일,패스워드 양식 확인 기능 (정규식 사용)
• 👤 로그인 기능 (localStorage)

2) 메인 페이지

• 👤 검색기능 (Query string)
• 👤 Carousel 기능 (css)
• 👤 Navigation Bar 호버시 펼쳐지는 드롭다운 메뉴
• 👤 현재 접속 유저의 장바구니 제품 가짓수 출력

3) 상품 리스트 페이지 / 상품 상세정보 페이지

• 👥 Pagination
• 👥 상품 찜하기, 장바구니 담기 기능
• 👥 장바구니 담기, 재고 부족 시 Modal 창을 통한 이벤트 발생 (Create Portal)
• 👥 Better UX를 위한 Load More 기능 추가
• 👥 상품 후기 & 페이지 상단으로 smooth한 스크롤 구현 (CreateRef(), scrollIntoView())
• 👥 DB의 평점에 따른 ⭐ 표시 로직 구현

4) 장바구니 페이지

• 👥 체크박스, 가격 및 수량 카운트, 삭제 등 기능

기록하고 싶은 코드

• 메인페이지 Aside 이미지 슬라이더(Carousel)

프로젝트를 통해 느낀점과 다음 프로젝트에 임하는 각오

처음 해보는 협업 프로젝트를 큰 다툼 없이 잘 마무리 했다는 점에서 만족감을 느꼈다.

상품 리스트를 슬라이드를 통해 구현한다던가, 회원가입을 통한 회원정보의 생성, 로그인시 받아온 토큰을 통해 해당 유저의 장바구니 정보를 불러온다던가, 쿼리스트링으로 검색어를 전달하여 렌더링 한 검색페이지 등등 다양한 기능을 구현해보았다.

이번에 맡은 페이지들의 특성상 작업 내용에서 CSS 를 통한 레이아웃을 보기좋게 짜는 부분이 비중이 적지 않았는데, 생각만큼 레이아웃 구성이 잘 되지 않아 고생을 많이 했다. 이번 프로젝트를 통해 요소의 배치나 CSS의 적용에 있어서 나름의 기준이 생겼는데 이걸 다음 프로젝트에 적용해서 더 좋은 결과를 만들고 싶다.

상품을 보여주는 무한 슬라이드를 라이브러리 사용 없이 CSS (trasition, translateX) property 를 이용한 방식으로 해보았는데, 이걸 구현하는데만 순수하게 2일의 시간이 소요되었는데, 거의 포기하려던 시점에 잘 작동되는 코드를 짜서 더 기억에 남는 것 같다.

다음 프로젝트 때는 아래와 같은 사항들을 꼭 염두에 두고 진행하여 더 나은 결과를 얻고 싶다.

• 사이트 분석을 철저히 하여 빠짐없이 기능 단위로 Trello 티켓을 발행하고, 유기적으로 스케쥴을 조정하면서 진행 할 것
• 팀원단위 작업량 분배는 페이지 단위로 하되, branch 는 기능 단위로 팔 것
• 페이지 불문, 공용으로 사용 할만한 Component 를 우선으로 작업 할 것
• 되도록이면 같은 파일을 동시에 두 사람이 작업하지 않도록 하고, 불가피 할 때는 나중에 작업 결과를 push 하는 사람은 꼭 merge 이후 진행 할 것
• frontend 와 backend 간 서로 영향을 줄수있는 부분은 바로바로 공유 할 것 (key 값..)