TRANDI는 BRANDI 여성 전문 쇼핑몰 이커머스를 클론해본 프로젝트이다.

Project OverView

위코드 5-6주차 총 12일에 걸쳐 1차 클론 프로젝트가 끝났다.
프로젝트에 참여한 인원은 프론트엔드 2명, 백엔드 3명 총 5명으로 구성되어 있다.
프로젝트가 끝나고 2주를 돌아보며 스스로에게 칭찬할 점과 아쉬웠던 점을 곱 씹어본다.

프로젝트 진행 기간

2020년 11월 16일 ~ 2020년 11월 27일(12일)

적용 기술

1) 프론트엔드

• Javascript
• React
• SASS
• Select(셀렉트 선택 library)
• Slick(이미지 슬라이더 library)
• React-router-dom

맡은 부분 및 구현 사항

• 메인 하단 상품 리스트 API를 통한 상품 진열 기능 구현

  • 더보기 버튼 클릭시 상품 페이지네이션 기능 구현
  • 메인 홈페이지 상품 API 수신 및 진열 기능 구현

• 상품 리스트 페이지 API로 상품 진열 및 필터링 기능 구현

  • 쿼리스트링으로 인한 빠른배송,세일,최신순,가격순,낮은가격순 filter 정렬 기능

• 상세 페이지 사이즈,컬러,구매 선택시 가격 및 수량 적용 기능 구현

  • 쿼리스트링으로 제품 디테일 정보 레이아웃 구성 및 화면 출력가능
  • Scroll 및 Ref 기능으로 스크롤 이동시 div 태그 색상 변환 기능구현

• 이용약관 및 회원가입 기능 구현

  • fetch POST 사용으로 로그인 및 회원가입 기능
  • 아이디 비밀번호 Validation 기능 구현

TRANDI 팀의 목표

1. 레이아웃 보다는 기능 구현을 목표로

아쉽지만 우리팀은 다른팀과는 달리 프론트엔드가 2명뿐인 팀이었다.
처음에 초기세팅은 순조롭게 끝이 났다. (필자인 본인이 걱정이 많아 프로젝트 시작 전 주에 초기세팅 준비를 다 하였기 때문)
하지만 팀이 정해지고, 회의가 진행되면 진행될수록 점점 원하는 구상과 현실 기간에 많은 것을 맞추기엔 시간이 너무 촉박하다는걸 알게 되었고, 멘토님들의 권유로 많은 레이아웃 보다는 기능 구현을 목표로 실력을 쌓는것에 포커스를 두었다.

2. 애자일 하게!

매일 기록하기, 끊임 없이 생각하기

개발자들 사이에세 애자일 기법,스크럼 방식이란 말을 심심치 않게 들을수 있다.
애자일 선언문에서 스크럼이 가치가 고스란히 드러난다.
스크럼에 대해서 간단히 소개하자면 아래와 같다.

스크럼 방식은 5-9명으로 구성된 소규모의 다기능 팀이 제품 개발을 완성하기 위해 스프린트(sprint)라고 불리우는 업무 주기를 반복한다.

이 팀은 '제품 책임자'가 관리하는 해야할 일 들의 목록에서 스프린트 동안 해야 하는 일들(sprint backlog)을 스스로 결정하고 완수하여 매 스프린트마다 '결과물'을 산출해낸다.

위에 사진은 우리가 해야 할 일들을 생각하고 적으면서 실천해가는 trello 앱이다.

스크럼 방식으로 진행되어 팀원들이 어떤 생각을 하고 있고,어떤 일을 하고 있으며,팀원들의 진척 사항을 보며 내가 무엇을 해야하는지 끊임 없이 생각하게 해주는 좋은 앱이다.

또한 매일 스탠드업 미팅으로 10분 안에 자신들의 진행상황을 공유하며 서로 보완할 수 있는 부분들은 도와주며 보완할 수 있었고, 원활하게 작업에 임할 수 있었다.

프로젝트 결과물

회원가입 및 로그인 기능
메인 페이지 페이지네이션,상세페이지,장바구니

1. 메인 홈페이지 레이아웃 및 상품 배열 기능

fetch로 데이터를 받아 map을 돌리고 거기서 15개씩 slice 하여 기본 세팅하고,
'더보기' 버튼을 누를때마다 백엔드에서 받은 데이터를 계속 보여주게 하였다.

2. 상세 페이지 상품 선택 및 장바구니 추가 기능

1. 상품 색상과,사이즈가 선택되면 새로운 배열에 추가하고 setState하여, 그 배열에 map을 돌려
   계속 생성되게 하였다.
2. 색상,사이즈가 중복되는 배열은 filter 기능을 추가하여 중복이 안되게 만들었다.
3. 주문 목록 카드가 추가되면서 누적되는 금액은 componentDidUpdate에 reduce를 사용하여 값이 계속 늘어나게 만들었다.

3. 장바구니 수량 선택,추가,제거 기능

4. 회원가입 기능

프로젝트 후기

12일이라는 짧은 시간동안 정말 배운거 이상으로 더 많은 것을 구현해 본 작품인거 같다.

다른 팀들은 보통 프론트엔드 4명, 백엔드 2명 정도 비율이라던데 우린 오히려 그 반대로 백엔드가 프론트 보다 더 많았다.(프론트 2명, 백엔드 4명)
그렇기에 아쉬운 점이 있다면 백엔드가 API를 많이 만들어줘도 생각보다 많이 API를 못 붙여본 점이 아쉬웠다.
그래도 좋은 PM을 만나 힘들어도 너무 좋은 팀원들과 좋은 분위기속에서 일하면서 '힘듬'이 '힘'이 되었던 경험이었다.

프론트엔드가 두명이지만 두명이라고 하기 무색할 만큼 정말 좋은 결과물을 보여 주었고,
첫 프로젝트인 만큼 애착이 많이 가는 프로젝트였다.
처음으로 백엔드와 통신을 하면서, 프론트 쪽에서 처리하기 힘든 로직이 백엔드로 넘기면서 훨씬 간결해지는 순간을 느꼈고 그때 처음으로 "백엔드와 마찰이란것이 이런것이구나 ㅋㅋ.." 라는걸 느꼈다.
아직 부족한 점이 너무나 많고, 좌절 할때가 많았지만 그러한 생각들이 너무나 독이 된다는걸 잘 알아버렸기에 항상 긍정적인 마인드로 생각하고 있다.

"내가 무엇이 모르는지 안다면, 내가 모르는것을 정확하게 아는 사람이고, 할게 많다고 느끼는 사람은 뭘 해야 하는지 정확하게 아는 사람이다."

그렇기에 나는 내 부족한 점들을 완벽하게 보완해 나갈 수 있을것이다.
남은 2차 프로젝트를 기대하며 더 잘해낼거라 굳게 믿으며 앞으로 한걸음 더 나아간다!