React | 마켓컬리 클론 프로젝트

kim seung chan·2021년 9월 12일
8

Project

https://github.com/wecode-bootcamp-korea/24-1st-WoowahanSiblings-frontend

Project Overview

내 인생에 첫 web 프로젝트를 시작하게 되었다. 사이트는 마켓컬리였는데 이 사이트를 이용하지 않는 나에게는 생소한 부분이 많았지만, 사이트를 하나하나 보면서 식품을 판매하는 커머스 사이트라는 것을 알았다.
마켓컬리 같은 경우 레이아웃이 반복되는 부분이 많았는데 이 부분에서 리액트를 활용하기 좋은 사이트라고 생각이 들었다. 첫 프로젝트인 만큼 프론트엔드와 백엔드 소통이 쉽지는 않았다. 하지만 한 목표를 향해 달려와 준 팀원분들 덕분에 기한 안에 팀 프로젝트를 성공적으로 끝낼 수 있었다.

React를 사용한 마켓컬리 클론

첫 React를 이용한 프로젝트였다. 혼자 자바스크립트를 이용하여 클론사이트를 만들어는 보았다. 이때마다 자바스크립트도 충분히 편한데 굳이 리액트를 사용해야 할까? 라는 생각이 들었다. 하지만 프로젝트를 하면서 왜 React를 사용하는가를 알게되었다. 그 이유를 몇가지로 나누어 볼 수 있을꺼 같다.

  • 백엔드에서 데이터 fetch를 사용할 수 있다.
  • 팀프로젝트 중의 공동의 public 폴더 및 scss를 사용하여 관리
  • 리액트 컴포넌트를 공유하여 효율을 높일 수 있었다.
  • state, props를 통해 데이터 변경
  • 라이프사이클를 통해 실제 데이터를 나타내고 사라지는 타이밍을 통한 데이터의 효율적인 관리

작업기간

2021.08.30 ~ 2021.09.10

기술 스택

프론트엔드 3명

  • HTML/CSS
  • JavaScript(ES6+)
  • React
  • SASS
  • AWS

백엔드 3명

  • Django
  • Python
  • Postman
  • MySQL
  • AWS

협업도구

  • Git
  • Github
  • Trello
  • Slack
  • Notion
  • Zoom

주요 구현 사항

🛒 하이라이트 => 내가 구현한 기능 & 참여한 기능

  • access token를 활용한 로그인,회원가입,로그아웃 기능
  • Main 페이지 구성
  • 상세페이지 구성
  • 장바구니페이지 구성
  • Main창 슬라이더 컴포넌트화
  • Main창 setInterval
  • Mock 데이터를 이용한 인스타그램 창
  • Nav bar 2단 hover 기능
  • 사이트 API를 이용한 Nav bar 구성
  • 상세페이지 슬라이더 기능 구현
  • 상세페이지 버튼 클릭에 따른 가격 변동
  • 상세페이지에서 장바구니 담기 기능
  • 장바구니 수량 변경 기능
  • 상품별 동적 Router 기능 구현
  • access token를 활용한 Router 이동 기능

결과 화면

1. Main 화면

반복적인 레이아웃 구성을 컴포넌트화 시켜 구성하였다.

또한 데이터에 따른 슬라이드 창 개수가 달라질 수 있는데 이 부분도 고려하여 코드를 만들었다. 데이터가 몇 장이 들어와도 슬라이드 끝에 간다면 슬라이드가 멈출 것이고 진행 방향 버튼도 사라질 것이다.

2. Main - 2단 hover 기능

이 코드는 기억에 남는 코드 부분에서 따로 설명을 하려는 기능이다. 간단한 설명을 하자면 전체 카테고리에 마우스를 올리면 해당하는 데이터가 표시되고 그 후에 카테고리별 데이터에 마우스를 올리면 sub 카테고리들이 나온다. 간단한 기능으로 보이지만 나한테는 쉽지 않았다.

3. 동적 라우터를 이용한 데이터 접근

query string url 을 사용한 상세페이지 연결 구현하였다. 이 부분은 라우터를 통해 데이터를 접근 할때 아주 유용한 기술 이였다.

4. 토큰 권한에 따른 라우터

만약에 로그인 되어있지 않으면 토큰이 없기 때문에 로그인페이지로 넘어가게 구성하였다.

5. 회원가입 기능

마켓컬리 회원가입 유효성 검사에서 생각보다 까다로웠다. 이 부분 팀원들과 상의한 끝에 정규표현 식으로 해결을 하여 프론트쪽에서 1차 검사를 하여 양식에 맞지 않으면 회원가입을 불가하게 만들었고
탄탄한 코드를 위해서 백엔드 쪽에서도 한 번 더 유효성 검사를 하도록 요청하였다.

6. 상세페이지 수량 조절 기능 & 장바구니 담기 기능

상세페이지에서 수량 조절을 하면 로그인 access token이 있다면 장바구니에 수량에 맞게 담는 기능을 구현하였다.

7. 로그아웃 기능

access token을 없애 다시 로그인을 해야만 장바구니다 구매를 할 수 있게 만들었다.

8. AWS 배포

프로젝트를 최종적으로 Merge한 후 AWS에 프로젝트를 배포하였는데, 추가적으로 수정해야할 부분을 발견하였다. 프로젝트를 배포한 후의 수정과정에 대한 정보를 찾아보고 공부하면서 최종 수정을 마쳤다.
마지막 수정 및 배포를 끝낸 이후 팀원들과 많이 기뻐했던게 아직도 기억에 남는 일 중 하나이다.

기억하고 싶은 코드

3일 고생한 2단 hover

처음 마켓컬리 사이트에 들어갔을 때 이게 어려운 이유가 있을까? 라는 생각을 했었다. 나의 어리석은 생각이었다. 데이터를 안 불러오고 하드코딩으로 넣었을 때는 쉬울 수 있다. 하지만 데이터를 불러오고 메인 title 부분을 눌렀을 때 sub 카테고리들이 나와야 했기 때문에 쉽지 않았다. 어떻게 하면 불러올 수 있을까 3일을 고민 끝에 onMouseEnter 기능과 onMouseLeave기능을 알 수 있었다. 코드를 통해 설명하겠다.

  this.state = {
      currentno: "772",
      
    };

초기 currentno은 기본값으로 넣어두었다.

 findSubCategories = no => {
    const subCategory = this.state.itemList.find(
      category => +category.no === +no
    );
    if (!subCategory) return [];
    return subCategory.categories;
  };

findSubCategories 만들어 find 메서드를 통해 title에 맞는 no을 찾아 주는 함수를 만들었다.

 <div
     className="dropDownMenuList"
     onMouseLeave={() =>
     this.setState({
       currentno: 0,
     })
  		}
          >
     {this.state.itemList.map(item => {
        return (
           <p
              className="dropDownMenuListMain"
              key={item.no}
              onMouseEnter={() =>
              this.setState({
                 currentno: item.no,
                 isDropDownNext: true,
              })
                  }
                >

onMouseEnter 통해 main tilte을 찾아준 후에

{this.findSubCategories(currentno).map(subList => {
              return (
                <p
                  className="dropDownMenuListSub"
                  key={subList.no}
                >
                  {subList.name}
                </p>
              );
            })}

다시 findSubCategories 을 통해 sub 카테고리를 찾아주었다. 이 부분이 힘들었던 이유는 데이터에 어떻게 접근하고 불러와야 되는지 몰랐기 때문이라고 생각한다. 3일 고민한 시간이 아깝지 않다. 그 이유는 이 코드를 생각하는 과정에서 데이터 가공 능력 및 마우스 이벤트들에서 엄청나게 많이 공부할 기회가 있었기 때문이다.

Project Review

프론트 - 백엔드의 Communication

프론트엔드, 백엔드 등 다양한 분야의 사람들이 프로젝트를 하는 첫 경험이었다.
백엔드 분야의 팀원들은 프론트에서 데이터를 어떤 방식으로 사용하는지 몰랐고, 마찬가지로 프론트 분야의 팀원들은 백엔드에서 어떤 방식으로 데이터를 넘겨주는지에 대한 지식이 너무 부족한 상황이었다.
프로젝트를 진행하는 과정에서 프론트엔드 - 백엔드의 팀원들이 어떤 방식으로 데이터를 주고 받아야하는지에 대한 대화가 많이 이루어졌다.
이 과정에서 시간적인 낭비가 분명히 있었기 때문에 더 간결하고 가독성이 좋은 코드나 기능구현 부분에서 미흡했을 수 있지만, 팀원들 간의 의사소통이 얼마나 중요한 첫 단추인지를 충분히 배우는 시간이 되었다고 생각한다.

실수를 통해 배워가는 Git

개인 프로젝트에서 Git을 활용할 때와 팀 프로젝트에서 Git을 활용할 때 많은 차이가 있다는 것을 배우는 시간이었다.
혼자 프로젝트를 관리할 때는 코드가 꼬인다거나 컨플릭이 발생하는 일이 없었지만, 팀 프로젝트는 코드가 꼬이는 경우도 잦았고 크리티컬한 컨플릭을 발견하여 초반에 상당한 시행착오를 겪었다.
issue를 해결하기 위하여 팀원들과 소통을 통해 Git에 대한 활용법을 많이 배우는 시간이었다.

시간관리

프로젝트를 진행하는 2주라는 기간 중 실질적으로 프로젝트에 집중할 수 있는 시간은 매우 한정적이었다.
팀원들과 함께 작업의 중요도, 우선도 등을 정하여 확실하게 진행할 수 있는 작업 등을 우선적으로 진행하였다. 이 때 기간 내 작업 등을 효율적으로 관리하기 위해 사용했던게 Trello였다. 내가 계획하였던 작업의 진행도 등을 객관적으로 판단하고, 더디 진행되고 있는 부분을 보완하여 좀 더 탄탄하게 프로젝트를 마무리 할 수 있게 일정 관리를 한 것이 많은 도움이 되었다.

아쉬운 부분

한정적인 기간내에 더 간결한 코드, 더 가독성이 좋은 코드로 리팩토링 하지 못한 부분이 아쉬움으로 남았다. 실수도 잦고 시행착오가 많아 시간에 많이 쫓기는 프로젝트였다고 느꼈다.
하지만 처음부터 잘 하는 사람은 없듯이 지금 느낀 아쉬운 부분을 다음 프로젝트에서 보완하여 더 성숙한 모습으로 팀원들과 프로젝트를 진행하면 될 것이라고 생각한다.
오늘의 실수가 내일의 나의 탄탄한 기반이 될 수 있도록 더 많이 공부하고, 많은 경험을 쌓다 보면 미생에서 완생이 되는 날이 오지 않을까 생각이 든다.

팀 프로젝트 후기

촉박한 기간내에 예상보다 좋은 결과물을 낼 수 있었음에 굉장히 만족한다.
처음 팀을 만났을 때 낯설고 어색했던 기억이 돌이켜보면 나 스스로를 돌아보게 만들었다고 생각한다. 팀 구성원들과 소통하는 과정에서의 어려움이나 성격 차이로 인한 오해 등에 대한 걱정으로 인해 두려움이 앞섰지만 서로 양보하고 맞춰가면서 하나의 팀으로 점점 발전해나가는 '우리'를 보게되었다.
프로젝트가 끝난 지금 코드 리뷰를 하며 오류를 해결하던 모습, 열정적으로 코딩을 하던 모습, 배포에 심장이 떨리던 모습, 프로젝트를 발표하던 모습 등이 주마등처럼 지나간다.
이렇게 즐거운 첫 팀 프로젝트 기억을 남겨운 별빛마켓 팀원들과 다음번엔 더 성숙하고 성장한 모습으로 만나고 싶다.

0개의 댓글