부트캠프 1차 팀프로젝트로 팀원 6명이 한 팀으로 구성되어 화장품 사이트인 Dr.Jart+를 클론 코딩 하였다. 처음으로 실무처럼 진행한 프로젝트로 프로젝트 시작 전부터 회고에서 말했듯이 걱정만 하고 있었지만, 감사하게도 팀원 모두가 적극적으로 서로 도우며 2주동안 프로젝트를 진행한 덕분에 목표한 바를 이룰 수 있었다.
Dr.Jart+ 웹페이지 클론 프로젝트 회고
처음 프로젝트 시작전 내가 선정한 사이트 2개가 모두 후보에 올라 있어 기분이 좋았다. 그 중에 하나인 Dr.Jart+가 최종 선정이 되었고 조사했던 사이트인 만큼 최선을 다하고자 했다.
Dr.Jart+ 웹페이지 선정이유
- Dr.Jart+ 특유의 모던함으로 구성된 웹페이지가 1차 프로젝트로서 적합
- 다양한 기능(필터링, 카러셀, 장바구니, 인증인가 등..)
- 다양한 카테고리로 백앤드와의 통신에서도 적합하다고 판단
웹페이지 Ideation
- 화장품의 다양한 카테고리를 활용할 수 있는
치즈를 주제로 선정 - 한국사이트의 과한 에니메이션을 배제 미국사이트 레이아웃 채택
- Dr.Mozza+로 네이밍 /
치즈 Mozzarella에서 영감🧀
작업기간
2021.7.5 - 2021.7.16
기술스택
- HTML
- CSS
- JavaScript(ES6+)
- React
- SASS
- Git
Project Tool
- Trello
- Notion
- POSTMAN
주요 구현 사항
🧀내가 맡은 구현사항
Nav bar 레이아웃 및 기능 구현🧀
메인페이지 슬라이더 기능 구현🧀
메인페이지 기본 레이아웃 구현🧀
공용 컴포넌트 레이아웃 및 기능 구현🧀
상품 카드 컴포넌트 레이아웃 구현🧀
상품 카드 컴포넌트 기능 구현
제품 상세 페이지 레이아웃 및 기능 구현
제품 리스트 페이지 레이아웃 및 기능구현
제품 리스트 페이지 filtering 기능 구현
로그인, 회원가입 레이아웃 및 기능 구현
장바구니 페이지 레이아웃 및 기능 구현
Project Flow
1주차
1주차에는 trello를 사용하여 구현할 기능들에 대해 카트를 세분화 하고 역할을 분담하였다. 하지만 프로젝트를 진행할수록 처음에 카드 세분화 했다고 생각한게 부족하였는지 계속 자가번식하여 관리하기가 어려워지기 시작했다.
2주차
2주차 부터는 notion의 roadmap을 적극 활용하여 회의록도 노션에 적기 시작하였으며 그때부터 뭔가 front/Back간의 명확한 소통과 연결이 이루어지기 시작했다.
또한 POSTMAN을 적극 활용하여 미리 백앤들와 데이터 구조를 맞춰 서버를 통신해 볼때의 오류를 최소화하였다.
OUTPUT👍
front-end repository
back-end repository
전체 기능 구현 영상 -Youtube
Detail
1. Carousel
1주차 Carousel
- 카러셀 기능 구현 / Potential blockers: 접근방식의 헷갈림, map, fetch 위치 정리
- 슬라이드 끝에서 멈추는 기능 구현 필요
- transition 구현
- Mock data 연동 및 백앤드 통신 test
tmi
처음 카러셀 기능을 구현할때 검색하지 않고 만들고 싶어 이것저것 시도를 해보았다. 그러다 다른 팀원분의 약간의 팁을 받고 구현해낼 수 있었다. 사실 알고보면 단순한 로직인데 처음에 알아차리는게 어려운 것 같다.
반응형을 고려한 재설계
2주차 Carousel
- 카러셀 기능 구현 / blokers 해결 및 최적화
- 슬라이드 끝에서 멈춤
- transition 구현
- 반응형 구현
- 카드 컴포넌트를 활용한 카러셀 추가
- 백앤드 통신 및 데이터 추가
2. Nav
2주차 Nav
- 드롭다운 기능구현
- 동적라우팅 연결
- 반응형 구현
tmi
Carousel을 한번 구현하고 나서 감을 잡아서 구현하는데 성공을 하였다. 지금 만들어진 코드로는 단순히 마우스가 hover시 작동하는 조건인데 프로젝트 마지막쯤에 다른분들의 코드를 보며 얻은 팁인classname을 삼항연산자로 활용하여 조건을 부여하는 방식으로 리팩토링을 해봐야겠다.
Pr 리뷰중 기억남는 사소한 🍯팁!
//ex
handleClickPrev() { //지양
handleClickPrev = () => {. //권장이벤트에 콜백 함수로 넘겼을 때 this가 동적으로 바뀌면서 문제가 될 수 있다.
따라서 class 컴포넌트에서는 가급적 화살표 함수로 써주는걸 권장한다.
+@ 바인드와 같은 원리라 .bind()를 써주는 것도 가능하지만 굳이 쓸 이유는 없다.
<i className="fas fa-chevron-left fa-4x"
onClick={() => this.handleClickPrev()} />
<i className="fas fa-chevron-left fa-4x"
onClick={this.handleClickPrev} />새로 함수 인스턴스를 만들지 않고 함수를 직접 넘겨주는 것이 좋다.
why?🧐
해당 부분이 실행될 때마다 기존에 생성해놓은 함수를 호출하는것이 아니라
새로운 함수를 생성해서 실행하는 방식이라서 비효율적이라고 할 수 있다.
Project Review
1차 프로젝트를 하며 지난 한달간 배운 것들을 활용해보며 내게 부족한 부분이 정확히 알게 되었다. 앞서 작성했던 한달 회고록에서 말한 것처럼 내가 모르는 부분을 부끄러워 하기보다 알게된 것을 기뻐하며 해결하는 태도 또한 갖게 되었다.
사실 내가 구현한 기능들은 뭔가 나 스스로 완벽히 마음에 드는 결과물은 아니다. 추가 구현사항들이 남아 있지만 그것은 추후 리펙토링을 위해 따로 리스트를 작성해 두었다.
욕심부리지 않고 내가 소화할 수 있는 기능들을 구현하며, 팀프로젝트에서 맡은 사항을 해결하는데 초점을 두었다. 또한 이번 프로젝트를 통해 가장 중요한 개발자로써의 태도와 자세를 깨닫게 되었으며 가장 중요한 깨달음이라고 생각한다.
팀원들과 함께 프로젝트를 진행하는 2주 매순간마다 소통이 즐거웠으며 다들 유쾌한 분위기에서 프로젝트를 진행해서인지, 중간에 고비가 있어도 팀원들이 있었기에 극복해낼 수 있었다. 이런게 개발자 문화 아닐까? 또한 팀원들처럼 같이 있는게 즐거운 사람들과 일하는게 축복이라는걸 느꼈다. 2주동안 팀원들에게 함께 해줘서 너무 고맙게 생각한다.🙏
앞으로 진행할 프로젝트 또한 이번처럼 다같이 긍정적인 분위기로 진행할 수 있도록 노력해야겠다. 화이링💪
To-do List / refactoring
- carousel 자동 재생 및 드래그 기능
- carousel 페이지 끝에 갔을때 기능이 정지(구현완료) + 버튼 사라짐(추가!)
- 카트 컴포넌트 기능 재구현 (복습)
- 로그인/로그아웃 시 토큰을 인지하여 상태 변경 / 리덕스 학습 후 추가 예정
classname을 삼항연산자로 활용한 리팩토링
