🎬 클론 영상 보러가기 : https://www.youtube.com/watch?v=_ENyBLFF7VU&feature=emb_title

github 보러가기 : https://github.com/Kangyejiii/11-t2gether-frontend

🍵 T2 Tea 클론 프로젝트

• 🍵 호주 유명 티 브랜드 웹 사이트 클론
  https://www.t2tea.com/

• 🗓 개발 기간 - 2020/08/18 ~ 2020/08/28

• 👨‍💻 개발 인원 : 프론트엔드 4명, 백엔드 2명
  - 프론트엔드: 강예지, 김규영, 마상원, 오승하
  - 백엔드: 왕민욱, 이건규

기술 스택

• JavaScript (ES6)

• React (CRA)

• Sass (SCSS)

• Git /Github

• 리액트 라이브러리

  • Slick
  • React-router-dom

협업 툴

• Git
• Slack
• Trello

구현 기능 상세 설명

제가 구현한부분 은 주황색으로 표시했습니다!

[ navigation 바 ]

• setInterval 함수를 활용한 롤링 배너 구현
• search icon 클릭 시 searchbar 표시 기능 구현
• 컴포넌트 활용하여 메뉴 hover 시 세부 메뉴 보여지는 기능 구현

[ 메인 페이지 ]

• 컴포넌트를 재사용하여 각기다른 디자인의 섹션을 구현
• 케러셀기능을 라이브러리를 사용하지않고 필요한 부분까지만 넣어서 가볍게 구현

[ product list 페이지 ]

• 드롭다운 멀티 체크 박스
• 필터링 기능
• 장바구니 추가 기능, wishlist 추가 기능 구현
• productItem Component 생성 후 사용

[ product detail 페이지 ]

• 동적 라우팅 활용하여 product list 페이지에서 상품 클릭 시 클릭한 상품에 해당하는 상세 페이지 보여주는 기능 구현
• react slick 라이브러리로 이미지 슬라이더 구현

[ 로그인 페이지 ]

• 이메일 및 비밀번호 형식 불일치 시 경고 표시
• 비밀번호 조건 : 8 자리 이상, 대문자 1개 포함, 숫자 1개 포함
• 이메일 형식(@포함) 일치 시 확인 버튼 표시
• 로그인 성공 시 메인페이지로 이동
• 조건식(3가지)
  0글자일때, 1글자이상 조건에 만족못했을때, 조건에 만족했을때

[ 회원가입 페이지 ]

• first name (1글자이상)
• last name(2글자이상)
• phone 번호 11숫자
• email형식 (@) 포함
• 생년월일 선택

[ 장바구니 페이지 ]

• shop all tea 페이지에서
  add to bag 추가하면 장바구니에 추가되는 기능
• 장바구니 아이콘 클릭시 모달창 띄우기
• 모달창에서 Remove 클릭시 아이템 삭제
• 장바구니 아이템 자동 계산 출력

[ 마이 페이지 ]

• wishlist를 보여주는 페이지 구현
• 삭제 기능

[ 검색 페이지 ]

• 동적라우팅을 이용해서 검색한 값을 각 주소마다 다르게 보여주게 구현
• 검색값에 따라서 다른 컴포넌트를 이용하여 페이지 구성을 표현하게 설계

[ footer ]

• map 활용하여 반복되는 list 요소 재사용

1차 프로젝트 후기

2주가 어떻게 지나간건지 모를만큼 빠르게 지나갔다. 잠을 줄여가면서 무언가에 몰두한 것은 오랜만이였다.
오늘은 내가 개발 후기를 주절주절 적을 것이다.

첫번째 고민 '난 할 수 있을까' & '개발자는?'

프로젝트 기간 10일동안 내가 맡은 일을 다 끝낼 수 있을까?

이건 내 '개인' 프로젝트가 아닌 정말 팀원들이 있는 프로젝트여서 더 걱정이 컸다.
코드를 치면서 '이 정도면 적당한 속도로 해내고 있는 건가? 내가 느린건가?' 이 생각을 계속 들었던 것 같다.

내가 매일 지키고 싶은 3가지
1. 좋은 코드를 작성하면서
2. 팀원들과 소통하면서
3. 내 할 일을 꿋꿋하게 해 나가는 개발자

한번에 이것을 다 지키기엔 정말 힘들었고 앞으로도 쭉 힘들 것이다.
이 고민은 개발자를 하면서 계속 생각 할 것이고 1년 후 2년 후에도 '좋은 개발자'인지 아닌지 확인 할 것이다.

일단 내 할 일을 끝낼 자신이 없었기에 다른 팀원분들의 문제들을 완벽하게 해결을 못했다. 내가 과연 내 일에 자신이 있으면 조급하지 않고 다 도와 줄 수 있었을까?
그리고 언제쯤 '언제까지 할 수 있는지' 감을 잡을 수 있을까?

이 고민은 나만 하는 것이 아니라 조금은 안심이었다. 동기들도 비슷한 고민을 가지고 있었다.

팀 프로젝트하면서..

프로젝트는 이렇게 하는 것이구나 느끼게 되었다.
일단 백엔드와 소통하는 법은 조금은 알게 되었다. 서로 받고 보내야할 데이터를 이야기하면서 postman을 이용하기도하고 내가 이렇게 왔으면 좋겠다 라고 먼저 mockdata를 보내기도 하고 잘 이야기한 것 같다.
물론 부족했던 점도 많았다. 대표적으로 git!이였다.
버전관리를 제대로 하지 못해서 서로 다른 버전을 가지고 있는 문제가 일어났다...내 코드도 날아갔다. 물론 어딘가에는 있겠지만 (어디 commit에 있을지는..) 잘 찾아봐야한다...이 사건으로 우린 발표 직전까지 코드를 수정을 했다. 아주 긴박한 순간이었다. 다들 실수 없이 발표를 하는데 우리팀만 오류메시지만 보여줄 순 없으니깐 말이다. 발표한 금요일이 위코드 생활 중 베스트로 기억에 많이 남을 것같다. 몸으로 배우는 깃의 중요성..또 공부하고 조심하고 공부하자.