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

마켓컬리 클론 프로젝트

위코드 1차 프로젝트로 신선식품 새벽배송 플랫폼인 '마켓컬리' 클론 프로젝트를 진행하게 되었다. 이 프로젝트를 통해 나는 처음으로 다른 사람들과 함께 소통하고 협업하며 결과물을 만들어 내는 경험을 할 수 있었다.
비로소 개발자들의 업무방식을 이해할 수 있게 되었고, 개발자라는 직무가 그 어떤 직무보다 원활한 소통이 밑바탕이 되어야만 더 나은 결과물이 나온다는 사실을 배울 수 있었다.

작업기간🔥

2021.08.30 ~ 2021.09.10

기술스택 ⚙️

FE : 3명

• HTML/CSS
• Javascript(ES6+)
• React
• SASS

BE : 3명

• Django
• Python
• PyJWT

구현 사항

상품상세페이지

메인페이지에서 상품 이미지를 클릭하면 query string url로 상품 상세페이지로 이동한다. 이때 클릭된 상품의 정보를 백엔드에서 json 형태의 data로 전달받고, 이 값을 각 컴포넌트에 props 값으로 전달하여 자동으로 해당 상품의 정보가 출력된다.

1. 수량 증감버튼
초기 구매수량은 state 값을 1로 주었고, 구매수량 양측의 버튼에 onClick 이벤트를 걸어서 해당 버튼이 클릭될때마다 setState를 사용하여 state 값이 업데이트 되도록 하였다. 총 상품 금액은 state와 props 값을 사용하여 계산하였고 toLocaleString을 통해 금액 형태로 표현되게 하였다.

2. 캐러셀 기능
본래는 각 상품별로 연관품목을 추천해주는 캐러셀이지만, 10개의 품목을 랜덤으로 출력하도록 기능을 구현하여 아쉬운 부분이다.
각 상품별로 연관 품목의 수가 다르기 때문에 동적으로 캐러셀이 동작하도록 연관품목 data의 length를 기준으로 연관품목의 갯수가 6개 이상일 때, 그 이상의 갯수만큼만 버튼이 동작하도록 기능을 구현하였다.

3. 버튼 스크롤 기능, 펼치기 기능
상품 상세정보 탭을 클릭하면 해당하는 내용으로 스크롤이 이동하도록 했고, 클릭 된 탭은 글씨, 배경의 색을 변경하여 하이라이팅하였다.
하단의 고객센터 안내메뉴는 버튼을 클릭하면 펼치기, 감추기 기능을 구현하였다.
처음 기능을 구현했을 때는 Javascript를 사용하여 직접 DOM을 수정하는 방식으로 React의 state를 사용하니 더 간결하게 기능을 구현할 수 있었다.
이 과정에서 React가 얼마나 편리한 도구인지 깨닫게 되었고 아는 만큼 보인다는 말을 새삼 느꼈다.

펼치기 기능 첫번째 구현

  unfoldBtn = e => {
    const happyUnfold = document.querySelector(".fst").querySelector(".asked");
    const faqList = document.querySelector(".happyFaqList");
    e.preventDefault();

    if (happyUnfold.innerText === "닫기") {
      faqList.classList.add("close");
      happyUnfold.innerHTML =
        "<span class='txt detail'>자세히보기</span><i class='fas fa-chevron-down' />";
    } else {
      faqList.classList.remove("close");
      happyUnfold.innerHTML =
        "<span class='txt'>닫기</span><i class='fas fa-chevron-up' />";
    }
  };

React state 기능을 사용하여 refactoring

unfoldBtn = () => {
    const { isUnfold } = this.state;
    this.setState({ isUnfold: !isUnfold });
  };

장바구니 페이지

상품 상세페이지에서 구매수량을 선택하고 장바구니 담기를 선택하면 로그인 된 user table에 해당 상품의 id와 수량이 전달되게 하였다.
동시에 장바구니 페이지로 이동하는데, 이때 백엔드에서 로그인 된 user table의 제품의 정보와 사용자가 담은 수량을 받아와서 해당 페이지에 목록으로 출력되도록 하였다.

프로젝트 후기📖

2주간의 짧은 프로젝트였지만 많은 생각을 하게 했던 기간이었고, 스스로 부족한 부분에 대해서 깨달을 수 있었던 시간이었다.
익숙치 않은 React를 다루기 어려워 그나마 익숙한 JavaScript를 사용하여 구현했던 기능은 오히려 번잡한 코드를 만들었다. "아는 만큼 보인다."는 말을 생각하게 만들었던 경험이었다.

아쉬웠던 점

내가 맡은 기능 구현에만 몰두하여 초반에 팀원들과 소통을 등한시 했던 탓에 공통된 스타일링 요소는 리팩토링 하는 과정에서 수정하자고 했지만, 기능이 구현된 뒤에 스타일링을 수정하니 각자 레이아웃이 너무 뒤틀려 제대로된 common.scss도 작성하지 못했다.
뿐만 아니라 백엔드와 Postman 명세를 공유하고 그에 맞는 mock data를 만들지 않고 혼자만의 mock data를 만들어 기능을 구현하여 일정 막바지에 백엔드와 데이터 연결을 할때 사소한 에러들로 인해 일정을 낭비했다.

잘했던 점

빠르게 이전의 잘못을 인정하고 개선하기 위해 팀원들과 소통했고, Trello, Slack 과 같은 협업도구를 더욱 적극적으로 사용하여 부족한 부분을 빠르게 채워나갔다.
매일의 stand up meeting 내용을 정리하여 공유했고 일정 진행 현황표를 만들어 진행상황을 한 눈에 볼 수 있도록 함으로써 불필요한 업무로스를 방지할 수 있었다.

마무리

본격적으로 리액트를 공부하면서 그동안 생각없이 클론 코딩만 하면서 스스로 어느정도 코드를 짤 수 있다고 생각한 것이 얼마나 큰 착각이었는지 깨달았는데, 프로젝트를 진행하면서 한번 더 이런 감정을 느꼈다.
분명 짜본 적이 있고 배운 기능인데 혼자 생각하고 코드를 짜려고 하니 생각보다 쉽게 코드를 짤 수 없었다. 많은 시간을 이렇게 낭비하느라 장바구니 페이지에 기본적인 기능도 추가하지 못해 너무 아쉬웠다. 남들이 짜놓은 코드를 복붙하고 싶은 마음이 굴뚝같았지만, 지금은 내가 배우는 시간인만큼 이런 감정에 휘둘리지 않고 스스로 생각할 수 있는 개발자가 되기 위한 시간이라고 생각하고 느리더라도 천천히 포기하지 않고 성장하는 개발자가 되어야겠다.
2차 프로젝트 때는 더 나은 코드를 위해서 오늘도 리액트 공부하러 총총총...