[ Review ] 1차 프로젝트 후기 - 디스커버리 클론코딩

_dodo_hee·2021년 4월 25일

>wecode

목록 보기

5/7

🙋‍♀️ 프론트엔드 깃헙 주소
🙋‍♂️ 백엔드 깃헙 주소

# 프로젝트를 마치며

2주간 진행했던 1차 프로젝트가 끝났다.
진행했던 사이트는 디스커버리 익스페디션 공식 홈페이지였다.
공식홈페이지 자체에 부족한 부분들이 많아서 클론코딩하면서 부족한 부분들을 보완하고 싶었지만,
생각보다 2주라는 시간은 너무 짧았고 내가 맡은 담당 페이지 외에 구현하기엔 시간이 부족했다.

인스타그램 클론코딩 할때만 해도 깃헙,리액트에 대한 개념도 너무 부족했었는데
이번 프로젝트를 경험하면서 깃헙,리액트에 대한 개념도 잡고 예전엔 못했던 기능들을 구현하고,
새로운 기능들을 넣기 위해 스스로 찾아보면서 기능 구현을 했던 과정들을 생각해봤을때
스스로 많이 성장했다고 느끼게 된 계기였다.

# React로 디스커버리 익스페디션 클론하기

백엔드와 협업하고 백엔드 데이터를 fetch 해오는 첫 프로젝트
(드디어 백엔드가 무슨말을 하는지 이해하게 된 계기!)
공통으로 사용하게 되는 컴포넌트와 scss를 사용
git-hub를 이용한 프론트엔드 협업
라이브러리 사용을 안하고 진행한 기능 구현

작업 기간

2021.04.12 - 2021.04.23 (2주)

기술 스택

🙋‍♀️ 프론트엔드 3명
React
SASS
HTML
JAVASCRIPT
🙋‍♂️ 백엔드 3명
Django
Python
MySQL
AWS

우리팀 짜란다 짜란다 짜란다~

최대한 비슷하게 구현하려고 노력한 메인페이지

히키커버리팀이 직접 구현한 사항

token를 활용한 로그인, 회원가입 기능
NAV api 주소 연결
NAV 애니메이션
플러그인 사용 안한 슬라이드 구현
query string url 을 사용한 상세페이지 연결 구현
상세페이지의 레이아웃 구현
리뷰 점수 높은순 낮은 순 sorting 기능
상품리스트 query string 페이지네이션 기능
장바구니 기능
상품 리스트 api 데이터로 메인,상세페이지 데이터로 사용
상품 리스트 상품 호버시 이미지 변화 구현
컬러 선택시 품절,이미지,상품정보 변경 구현

# 세부적인 화면 설명

✅ : 내가 구현한 부분

1. 메인페이지 - 레이아웃 ✅

상품리스트 api를 가져오고 해당하는 컨텐츠 클릭시 api 데이터에 해당되는 url 연결
api 데이터 리스트에 따라 새로운 컨텐츠 박스 생성

2. 메인페이지 - 슬라이드

메인 상단의 slide 배너를 플러그인 없이 구현

3. 카테고리 - 페이지 연결

메뉴 카테고리 선택시 해당하는 상품 리스트 페이지 이동

4. 상품리스트 페이지 - 이미지 호버

이미지 호버시 사이즈와 해당 상품의 다른 이미지를 보여줌

5. 상품리스트 페이지 - 페이지네이션, filtering

query string url을 사용한 페이지네이션
filtering 된 데이터로 상품별 필터 구현

6. 상품 상세페이지 - 기능 ✅

query string url을 사용하여 리스트페이지와 상세페이지 연결 (동적라우팅)
상품 id에 맞는 api를 데이터를 가져오기
컬러 상품부분 사진 클릭시 상품정보,상세페이지 이미지,품절 정보가 변경
카운트 초과시 경고 알림창 발생 수량 미만시에도 적용
좋아요 토글버튼 구현

7. 상품 상세페이지 - 상품 리뷰 ✅

리뷰 필터링 된 api를 사용하지 않고 sorting 으로 점수별로 정렬
mock 데이터 사용으로 리뷰 제작
- 버튼 클릭시 후기 사진 보이게 구현

8. 장바구니

상품이 담겼을때 갯수별 가격 변경
상품 삭제 기능

9. 로그인

POST 방식으로 계정을 확인하고 메인페이지로 연결.
access token이 local storage에 저장.

# 우리팀이 잘한 점

데일리 미팅

데일리 스탠드업 미팅을 통해
아직 트렐로로 정확하게 소통을 못하는 경우가 있을 수 있어서
매일매일 아침 미팅을 통해

어제 했던 일
오늘 해야할 일 (목표)
막혔던 부분
회의록에 적어서 기록했다.

저렇게 미팅을 하면서 각 팀원들의 속도를 체크할 수 있었고
속도가 느린 팀원은 다른 팀원들의 도움을 받아 뒤쳐지지 않게 도와주었고,
막혔던 부분들을 말하면서 각 포지션 팀원이 도와줄 수 있는 부분은 같이 고민해주고
문제를 해결해주는 과정이 굉장히 인상깊었던 것 같다.

# 컴포넌트 분리를 너무 좋아하는 나;

레이아웃 구조를 짜게 되면서 컴포넌트 분리를 심각해버린 나
컴포넌트를 잘게 잘게 분리하면서 얻은 지식들도 있다.

너무 이해하기 어려워했던
props와 state의 개념에 대해서 정말 빠삭하게 익혔고
리액트의 단방향성의 장점과 단점!
컴포넌트 연결해줄때 발생되는 에러는 아주 척척박사처럼 해결한다는 점!

다음 프로젝트때는 정말 필요로한 컴포넌트 분리만 해서 파일을 관리해보고싶다!

# 아쉬웠던 점

기본기

코드리뷰를 받으면서 정말 주니어 개발자가 지켜야 할 부분이라도 지키고
기능구현에 몰입해야했는데 욕심이 많은 나머지 기본기도 제대로 지키지 못한 채
기능구현에만 집중 한 것 같아 클린코드하지 못한 점..
좀 더 간결한 코드로 작성하지 못한 점이 후회된다.

PM이 없다

우리 팀은 PM이 따로 없었다. 부담감을 주기 싫었던 부분도 있었고,
프론트와 백에 대해서 두분야에 대해 원활하게 소통할 수 있는 사람도 없었고,
다들 원하지 않아하는데 강제로 PM을 시키는 것도 아니라고 생각했다.

어쩌다보니 회의록을 정리하는 내가 제일 팀원들의 상황을 제일 잘 알고 있었고
PM 아닌 PM도 하고 있었던 것 같다ㅎㅎ

내가 아예 PM을 맡았더라면
더 팀원들이 힘들어할때 잘하고 있다고 격려해주고
우리 팀을 적극적으로 이끌어 나갈껄이란 생각이 들었고
그게 프로젝트를 하면서 제일 아쉬웠던 점이었다.

# 멘탈아 힘내

중간발표 이후 사실 멘탈이 바사삭했다ㅎㅎ..
다른 팀원들이 너무 잘해보였고, 아직 우리팀은 그때까지만해도 완성된 페이지가 없었다..
우리팀이 잘하고 있는 줄 알았는데 다른팀들은 더 잘하고 있는 것 같아서
기능구현 하는 걸로 벅차서 할건 많은데 내 스스로 속도가 너무 느리다고 생각해서
멘탈이 와르르 깨져버렸다는 것..

다음부턴 팀 속도에 맞게 내 스스로의 투두리스트로 내 할일을 관리하면서
체크하면서 다른사람과 비교하지 않고 느리단 생각하지 않고
내 페이스만 유지하면서 작업해야겠단 생각이 들었다.

(다음부턴 느리단 생각으로 좌절하지 말기!)

멘토님들의 도움과 격려

멘토님들의 격려에 얼마나 울컥한 적이 많은지..😂
머리 붙잡고 코드와 싸우고 있을때마다

멘토님 : "잘하고 계세요?"
나 : "꾸에에에ㅔㅇㅇ/..."

그럴때마다 정말 침착하게 내가 어려워하는 부분을 같이 해결해주시는 부분들이
멘탈 잡는데 도움이 됐던 것 같다.
느리다고 낙심하고 있을때 정말 울고싶을때마다

정말 빠른시일안에 이렇게 성장한 것만으로도 잘한거라며 다독여주셨을때
멘토님들의 소중함을 다시한번 느꼈다.

(코드리뷰 해주시느라 고생하셨던 멘토님들 담부턴 더 깨끗한 코드로 찾아뵙겠습니닷..ㅎ)

# 뿌듯했던 기능

정렬된 api를 안받고 직접 조건을 줘서
sort 메서드를 사용해서 클릭시 정렬되는 기능을 구현했다.

코드를 치고 나서 이게 맞게 쓴건가.. 이렇게 하는게 맞는건가 했는데
정확하게 잘 작동해서 너무 기분좋았고 뿌듯했던 코드 중에 하나이다.

handleChange = event => {
    const value = event.target.value;
    const { reviewList } = this.state;


    if (value === '최고평점순') {
      this.setState({
        reviewList: reviewList.sort((a, b) => {
          return a.score > b.score ? -1 : a.score < b.score ? 1 : 0;
        }),
      });
    }

    if (value === '최저평점순') {
      this.setState({
        reviewList: reviewList.sort((a, b) => {
          return a.score < b.score ? -1 : a.score > b.score ? 1 : 0;
        }),
      });
    }
  };