1차 프로젝트 후기 - 29CM 클로닝

kkb·어제
0
post-thumbnail

29CM 클론 프로젝트

  • 국내외 패션, 라이프 스타일을 한눈에 볼 수 있는 유명 온라인 편집샵 29CM Web 클론

개발 인원 및 기간

  • 개발 기간: 2020/07/20 ~ 2020/07/31(12일간)
  • 개발 인원: 프론트엔드 3명, 백엔드 2명

팀원

  • 프론트엔드: 김경배, 윤지영, 임현지
  • 백엔드: 김병준, 이민호

기술 스택 및 구현 기능

1. 기술 스택

  • JavaScript(ES6)
  • React(CRA)
  • Sass(SCSS)
  • Git /Github

리액트 라이브러리

  • Slick
  • React-router-dom

2. 협업 툴

  • Git
  • Slack
  • Trello

3. 구현 기능 상세 설명

회원가입/로그인

  • 로그인시 토큰 적용
  • 로그인/로그아웃 기능 (자동로그인-LocalStorage/ 로그인-SessionStorage)
  • 이메일, 패스워드 양식 확인 기능

네비게이션바

  • 스크롤 위치에 따라 컴포넌트 변경

SpecialOrder 페이지

  • 상품 이벤트 기간에 따라 현재의 날짜만큼 늘어나는 프로그레스바 기능 구현
  • 상품 이벤트 마감 시간 타이머 기능 구현

상품 상세 페이지

  • 장바구니 담기 버튼 클릭시 장바구니에 추가할 데이터 전달
  • 제품 상세 페이지 동적 라우팅

상품 리스트 페이지

  • 상품정보 불러오기
  • 좌측 Nav바 카테고리 별 서버 데이터 연결
  • 가격 순, 옵션 별 상품 필터기능
  • 좋아요 버튼 활성화 및 기존의 개수&상태 불러오기
  • 상품 클릭시 상품 상세정보 페이지로 이동

장바구니 페이지

  • 상품 수량변경 및 할인율을 포함한 가격정보 화면 출력
  • 각 상품 별 삭제 기능
  • 선택된 상품 별 삭제 기능
  • 장바구니에 담긴상품의 데이터(목록, 개수, 총 가격) 서버로 전송

29TV 페이지

  • 이중 모달창 구현
  • 모달창 내에서 이전/이후 데이터 출력
  • 각 피드와 모달창의 아이콘 State 연동 및 데이터 서버로 전송

My Heart페이지

  • Active Tab을 이용하여 라우팅 없이 출력 화면 전환
  • 다른 데이터를 받아와서 컴포넌트 재사용

4. 기록하고 싶은 코드


백엔드에서 받아온 날짜를 통해서 progressbar와 timer 기능 구현

이번 프로젝트를 통해 변수를 통해 코드가 무엇을 의미하는지 작성하는 연습을
배울 수 있었습니다.
2주라는 짧은 기간동안 많은 것을 보여줘야 된다는 부담감에
기본적인것이 무너지면 안된다는 것을 담아두기 위해 저의 코드를 기록하고자 합니다.


5. 느낀점

팀이 처음 결정되고 나서 초기설정부터 시작하였는데, 리액트를 설치하고 나서
팀원들과 함께 reset.css 설정과 common.css에서 사용할 코드를 함께 작성하였고,
git 관련 주의사항들을 기록해나가면서 팀원간 컨벤션을 잘 지켜주다보니 작업하면서
css나 git 관련해서 팀원간의 코드 충돌이나 트러블이 없어서 사고없이 프로젝트가 진행되었습니다. 우선적으로 우리팀의 강점은 서로에게 말을 많이 하다보니 팀 분위기도 가장 좋았다고 할 수 있을 정도로 재밌게 프로젝트를 진행했습니다.
(즐겁게 코딩할 수 있게 도와준 팀원들 진심으로 감사합니다!)
반대로 팀안에서 회의에서 말할 내용들이 팀원간 잡담처럼 이어져
모든 팀원에게 같은 의견을 제시하지 못한 부분도 있다고 생각합니다.
잡담은 경쟁력이라는 말도 있지만 스탠딩회의와 잡담의 기준선을 잘잡고
프로젝트를 진행해야 모두가 같은 시너지를 내고 작업을 할 수 있다는 것을 느꼇습니다.


(모두가 열심히 만들어준 Trello, Folder tree) - Oh29ya 화이팅!

profile
개발 일지

0개의 댓글