[닥터마틴 클론] 1차 프로젝트 회고

1. Overview

1.1 프로젝트 목표

1차프로젝트 전 투표를 통해 정해진 사이트 중에 닥터마틴 사이트를 클론하게 되었다. 신발판매 컨셉을 그대로 가져가면서 기본에 충실한 클론프로젝트를 진행했다.

1.2 프로젝트 기간

2021.01.24 ~ 2021.02.11
(중간에 1주일이 설 연휴기간이라 약 2주간 프로젝트를 진행하였다.)

1.3 팀 소개

팀 명: Dr. Mataeng

의미: 사실 그렇게 큰 의미가 있는 팀 명은 아니다. 어떤 이름으로 할지 계속 고민하다가 뒤에 탱을 붙이면 귀엽지 않을까요? 라고 의견내주신 동기님의 아이디어를 따라 닥터마탱!이 되었다.
(닥터맛탱이 될 뻔 했지만 프로젝트가 이름따라 간다는 이야기를 듣고 맛탱으로 짓지 않아서 다행이라고 생각이 들었다.ㅎㅎ)

Members

Frontend : 유재민, 오수민, 장예지
Frontend-github
Backend: 강종범, 이혜린(혜린님은 건강상의 이유로 중간에 하차하셨다....)
Backend-github

1.4 사용한 기술 스택

• JavaScript(ES6+)
• React
• SASS
• github

협업툴

• slack
• trello
  

트렐로는 이번에 처음 사용해보는 툴이라서 티켓을 나누는 방법도 익숙하지 않았다. 그래서 중복되는 티켓을 만들기도하고 필요한 티켓을 만들지 않고 진행하는 실수도 있었지만 팀원들과 중간회고를 하며 티켓을 변경하고 Done전에 Review column을 만들어서 좀 더 진행상황을 세세하게 볼 수 있도록 했다.

• Notion

2. 프로젝트 영상

3. 기능구현

(내가 맡은 부분 ✌️)
로그인
회원가입 ✌️
메인페이지 (레이아웃) ✌️
마이페이지
상품 리스트 ✌️
상품 디테일
검색
장바구니
주문 결제

3-1. 회원가입

1. 닥터마틴의 회원가입부분은 총 8개의 Input창으로 구성되어 있으며
   각각의 Input창 별로 조건을 걸어야했다.

-> input에 들어가는 state값을 한꺼번에 관리하기 위한 코드
-> input에 여러가지 type들을 사용해볼 수 있는 기회였다.

2. backend에서도 유효성 검사를 하고 frontend에서도 유효성 검사 를 하는 식으로 구성하였다.
   처음에는 한군데에서만 유효성 검사를 해도 되지 않을까? 라는 생각을 했었다. 그러나 서로 상호보완적이 가능하게 두군데에서 모두 검증해줘야한다.

-> backend와 조건을 맞춘뒤 작성한 유효성 검사 코드들, 정규식을 처음 사용해봤는데 매우 유용했다.

3. 유효성 검사를 끝낸 뒤 값들이 조건에 알맞으면 backend에 값들을 넘겨주고 회원가입이 완료되면 로그인 페이지로 넘어가는 플로우로 진행하였다.

4. 회원가입 폼들이 많아서 누르면 페이지의 최상단으로 가는 top버튼을 만들었다.

3-2. 상품리스트

1) 필터

1. 필터창에 원하는 조건을 선택하면 조건에 관련된 제품이 제품 리스트 창에 나오게 만들었다.

-> 필터창을 form으로 만들어서 매우 간단하게 필터의 데이터 값을 얻을 수 있었습니다.

->querystring을 이용해서 backend에 데이터를 요청했다.
그런데 이부분에서 색상부분이 한글로 되어있는데 한글 부분의 uri가 계속 숫자와 영어로 변환되었다. decodeuri 을 사용해서 해결했다.

2) pagination

1. 제품이 한 페이지에 6개만 보이도록 limit을 걸어두고 querystring을 사용해서 indexbutton을 눌렀을 때 다음페이지가 넘어가며 다른 상품이 보이도록 만들었다.

4. 회고

4-1. 좋았던 점

• 기한에 맞춰서 프로젝트를 완성
  솔직하게 말하면 이번 프로젝트 전까지 무언가를 내가 스스로 완성해본 적이 없다. 그래서 프로젝트를 시작하기 전 내가 팀원들에게 크나큰 blocker가 되지는 않을까 엄청 걱정하면서 프로젝트를 시작했다. 그런데 프로젝트를 시작하니 팀원들과 협동하는 것이 너무 즐거웠고 내가 무언가를 하고있는 것도 신기했다. 집에가서 잠을 자기 전까지 어떻게든 오늘 이건 해결해야된다는 생각으로 여러가지 자료를 찾아보고 무조건 코딩을 쳐보기도 하면서 프로젝트 전과 다르게 실력(사실 실력이라고 할것도 없었다...)이 성장하는 기분이 들었다.

• 코드를 시작하는 것에 대한 두려움 극복(and git)
  아는게 없으니 페이지 하나를 시작할 때 코딩 한줄을 치는 것이 시간이 오래걸렸다. 머리속으로 이게 맞는지 계속 생각하고.. 구글링하고... 몇줄치다가 다시 다 삭제하고 다시 시작하고의 반복이였다. 그런데 프로젝트는 기한이 있고 다른 팀원들과 시간을 맞춰야 되기 때문에 내가 머뭇거리면 다른 팀원들에게도 피해가 되기때문에 고민은 짧게 그러나 하면서 계속 생각했다.
  git을 올리는것도 잘못올리면 어쩌지라는 두려움이 있었는데 계속 반복해서 git을 사용하니까 자신감이 생겼고 잘못되도 괜찮다고 말해주는 팀원분들이 있어서 git두려움에서 벗어날 수 있었다.

4-2. 아쉬웠던 점

• 컴포넌트 활용을 잘 못한 것 같다.
• 네이밍을 비슷하게 사용하는 경우가 있어서 수정사항이 발생했다.
• 사용자를 조금 더 고려하는 사이트로 만들었으면 좋았을 것 같다.
• 피어리뷰를 하는 시간이 많지 않았다.
• bloker 많든 적든 자세하게 기록하지 못했다.
• 개발 기획 단계에서 개개인의 목표 공유를 하지 못했다.

4-3. 소감

처음 프로젝트를 끝내서 후련하기도 하지만 아쉽기도하다.
그 아쉬움 중에 커다란 하나는 우리 팀원들과 이제 헤어져야한다는 것이다. 말랑말랑이라는 말이 잘어울리는 순둥한 팀원들과 내 인생의 첫 프로젝트를 하게되서 너무 큰 영광이였다. 사소한 질문 하나에도 같이 생각해주고 서로 배려하고 어떤식으로 서로를 도울 수 있을지 생각하는 좋은 마음들이 모여서 이번 프로젝트가 잘 마무리 된 것 같다.

그리고 위코드를 시작하고 내가 개발자에 정말 어울리는 사람인지...
내가 잘해낼 수 있을지 매일매일 생각하면서 가끔은 너무나 큰 스트레스로 심장이 조여들어왔었다.그러나 프로젝트를 시작하면서 힘들기도 했지만 알아가는 기쁨을 느끼고 내가 해내가는 성취감을 느끼며 개발자 할 수 있을까? 라는 생각보다 그냥 너무 재밌다라는 생각이 더 커졌다. (거짓말같지만 자기전에 '빨리 내일이와서 코딩하고싶다' 라는 생각도 한두번정도?!했었다.) 아직까지도 내가 perfect하게 개발자에 맞는 사람인지는 잘 모르겠지만 perfect하지 않아도 뭐 어때?라는 마인드로 개발을 즐기면서 하고싶다.

Thanks to..❤️ 재민님,수민님,종범님,혜린님
제 인생 첫 프로젝트를 함께해주셔서 너무 감사했습니다. 사는동안 우리 많이 벌어요~