고기각 (정육각 클론 프로젝트) 리뷰

• 개발 기간 : 2021년 7월 5일 ~ 7월 16일

• 개발 인원 : 프론트엔드 3인, 백엔드 3인

• 사용 기술 :

  Front-End : React, SASS
  Back-End : Python, Django
  

• 깃허브 : https://github.com/wecode-bootcamp-korea/22-1st-Gogigak-frontend

메인페이지

componentDidMount() {
  fetch(API.SLIDE, {
    method: 'GET',
  })
    .then(res => res.json())
    .then(result => this.setState({ mainSlideImage: result }));

  fetch(`${API.LIST}?sort=sales`)
    .then(res => res.json())
    .then(result => this.setState({ items: result.results }));

  setInterval(this.slideNext, 3000);
}

slideNext = () => {
  if (this.state.slideIndex < 4) {
    this.setState({ slideIndex: this.state.slideIndex + 1 }, () => {
      this.slideContainer.current.style.transition = '  transform 2s';
      this.slideContainer.current.style.transform = `translateX(-${
        1184 * this.state.slideIndex
      }px)`;
    });
  } else {
    this.setState({ slideIndex: -1 });
  }
};

• React에서 제공하는 생명주기 중에서 componentDidMount를 사용하여, 사용자가 페이지에 접속했을 때, 서버와 통신하는것을 통해서, mainSlide에 표시될 이미지들을 받아온 뒤, setInterval을 걸어주어 3000ms마다 슬라이드의 이미지가 변경되도록 구현했습니다.

장바구니 페이지

  quantityPlus = (cartItemId, cartIndex, stock) => {
    const newCartData = [...this.state.cartData];
    if (newCartData[cartIndex].quantity < stock) {
      newCartData[cartIndex].quantity = newCartData[cartIndex].quantity + 1;
      this.setState({ cartData: newCartData });

      const authToken = localStorage.getItem('token');

      fetch(`${API.CART}/${cartItemId}`, {
        method: 'PATCH',
        headers: {
          authorization: authToken,
        },
        body: JSON.stringify({
          changeQuantity: this.state.cartData[cartIndex].quantity,
        }),
      });
    } else if (newCartData[cartIndex].quantity === stock) {
      alert('구매할 수 있는 최대수량입니다.');
    }

• 품절된 제품인 경우, 불투명하게 블라인드 처리를 해주어 품절인 것을 쉽게 알아 볼 수 있도록 처리했으며, 품절된 상품이 있는채로 구매를 시도하면 경고창이 나타나도록 구현했습니다.

• 장바구니 내부에서 수량을 변경할 경우, 변경될 때마다, 최종적으로 변경된 수량이 몇개인지 서버와 통신하도록 구현했습니다. 서버측에 기록되있는 총 재고 이상으로 수량을 변경할 경우 최대 수량이라는 경고창이 나타나도록 구현했습니다.

프로젝트 후기

함께 일한다, 협업이란 이런 것이 아닐까? 하는 것을 몸으로 느끼며 배울 수 있었던 소중한 프로젝트였습니다.

프로젝트를 시작하며 가장 중요한 것은, 하나의 팀이 되어 원활할 소통을 하는 것이라고 생각했기 때문에 저는 Back-End 분들의 언어를 이해하려고 노력했습니다.

서버와 HTTP 통신을 사용해 데이터를 전송하는 과정에서 배열이나, 객체에 대한 이야기를 많이 하게 되었습니다. {key : value, ...} 형태의 자료형을 Back-End분들은 딕셔너리라고 한다는 것을 알고 있었기 때문에, 비록 익숙하지 않은 용어였지만 딕셔너리라는 용어를 사용하는 것을 통해, 좀더 원활히 대화를 할 수 있었다고 생각합니다.

개인적으로 맡았던 부분 중 기억에 남는 것은, 처음엔 장바구니페이지에서 주문할 제품의 수량을 변경할때마다 매번 Body에 증가버튼을 눌렀다는 신호를 보내는 방식을 이용했으나, 문제가 있어 수량이 증가되거나 감소된 이후 최종 수량을 통신하는 방식을 사용해서 문제를 해결했던 부분입니다. Back-End분과 함께 생각하고 고민했었기 때문에, 해당 문제가 해결됬을때 서로가 큰 성취감을 느낄 수 있었던 것 같습니다.

처음으로 진행한 프로젝트여서 부족한점도 많았지만, 함께하기 위해서 필요한 것들에 대해 배울 수 있었던 정말 소중한 프로젝트경험이었다고 생각합니다!