[1차 프로젝트] 모나미몰(monami mall) 클론 후기

✅ 모나미 웹페이지 클론 프로젝트 소개

국민 볼펜 모나미의 쇼핑몰 ‘모나미몰’ 클로닝에 도전해보았다. 모나미몰을 선택한 이유는 1) 쇼핑몰이라 로그인, 회원가입, 장바구니 등 다양한 기능구현을 해볼 수 있을 것 같았고, 2) 생각보다도 애니메이션이나 이미지들이 넘나 감각적이었기 때문이다. React와 CSS를 공부하기에 밸런스가 딱 맞는 좋은 사이트란 생각이 들어 선정하게 되었다.

✅ 사용한 기술 Stack

👉 GitHub 보러가기

Front-end

• React.js(Class)
• React-router
• React-slick
• Sass

Process

• github
• Postman
• Trello

✅ 재현한 기능

• 회원가입, 로그인/로그아웃
• 메인페이지(MyCurator, 상품 검색기능, 디자인 요소)
• 리스트페이지 (신상품/가격순 필터기능 및 페이지네이션)
• 상세페이지 (장바구니추가, 찜목록추가, 상품댓글)
• 마이페이지(최근본상품/장바구니/배송지관리)

내가 재현한 부분

• 로컬스토리지를 이용한 로그인 기능 구현
• 정규표현식, 동적 ClassName을 활용한 회원가입 Validation 구현
• React State/Props를 활용하여 장바구니 추가, 삭제, 수량변경 구현
• React-Slick 라이브러리를 사이트에 알맞게 커스텀 적용

✅ 가장 기억에 남는 코드

  removeCnt = productNum => {
    this.setState(
      prevState => ({
        cartList: prevState.cartList.map(el =>
          el.product_option_id === productNum
            ? { ...el, product_amount: el.product_amount - 1 }
            : el
        )
      }),
      () => this.calPrice()
    );
  };

장바구니에 담은 상품의 수량을 하나씩 줄이는 코드이다.
코드를 작성하기에 앞서 아래 세가지가 잘 되지 않아 많은 고민 + 구글링을 했던 것 같다.

1) 여러 상품 중 내가 클릭한 상품의 count만 줄이는 법
2) carList라는 데이터에서 product_amount만 변경하는 법
3) setState가 완료된 후에 calPrice() 함수가 실행되도록 하는 법

⏩ 내가 클릭한 상품의 count만 줄이는 법

el.product_option_id === productNum? 

product마다 가지고 있는 고유 index값을 활용했다. 마이너스 버튼을 클릭할 때 index(productNum)를 인자로 넘겨줬고, 여러 상품 리스트 중 해당 index와 일치하는 상품일 경우에만 카운트를 조절하도록 했다.

⏩ cartList라는 데이터에서 product_amount만 변경하는 법

나는 cartList라는 데이터에서 product_amount라는 key의 value만 수정하고 싶은데, 다른 key값을 처리하는 것이 애매해서 골치였다.
구글링을 해보니 setState함수에 prevState라는 인자를 사용하는 것이 가능해서, 이것과 spread 연산자를 함께 사용해 product_amount에 접근할 수 있었다.

⏩ calPrice() 함수 비동기 처리

() => this.calPrice()

상품의 수량이 변경되면, 변경된 수량만큼 다시 총 금액을 계산해서 보여주고 싶었는데, calPrice()가 먼저 실행된 후 setState가 실행되는 에러가 있었다.
원인은 setState가 비동기함수였기 때문이었고, setState의 두번째 파라미터에 콜백함수로 등록하여 실행순서를 정리해주었다.

✅ 프로젝트 동안 좋았던 점

• 처음에 팀이 발표되었을 때, 각 팀에 대한 각기 다른 기대감 같은게 알게모르게 조성되었다. 그 중 우리 팀은, 솔직히 말해서 어벤져스 팀도 아니었고, 한명의 아웃라이어의 캐리가 기대되는 팀도 아니었던 듯 싶다. 그래서였는지 우리 팀은 서로가 가진 1의 능력이라도 공유하기 위해 더욱 애썼던 것 같다. 뭔가 안 풀려서 고민하고 있으면 2시간이고 3시간이고 함께 고민해준 팀원들이 있어서 너무 든든하고 고마웠다. 그리고 나 역시 다른 팀원의 고민을 같이 고민하면서 내가 맡은 부분이 아닌 다른 기능을 함께 공부할 수 있어서 좋았다.

• 배운게 도둑질이라고,, 탈광고를 외치며 코딩을 시작했건만 웹 클론을 하면서도 마케팅적 의구심을 버릴 수가 없었다. 모나미에서 2년 전부터 반려동물 용품으로 사업 포트폴리오를 확장하고 있는데, 그 이유가 궁금해서 기업 조사도 뜨문뜨문 해봤다. 모나미의 사업 방향을 알고 클로닝을 진행해보니, 왜 웹페이지를 이렇게 구성했는지 이유를 알 것 같아 클로닝도 더 재밌게 할 수 있었던 것 같다.

• 모나미몰을 클로닝하면서 계속 ‘배달의 민족’앱이 오버랩 됐었다. 배민 단골로써 항상 불편함을 느끼던 부분이 있는데, 바로 검색 탭이 앱 하단에 위치해있다는 것이다. 가끔은 음식 카테고리 별로 들어가지 않고, 내가 원하는 식당을 검색해서 바로 주문하고 싶은데 검색 탭을 한번에 찾을 수가 없어 불편했다. ‘왜 배민 같은 대기업이 이런 포인트를 놓치지?’라고 생각했었는데, 최근 들어서 찾은 나름의 답은 ‘광고비’ 다. 배민은 가맹업주들에게 받는 광고비가 가장 큰 수익원이기 때문에, 음식 카테고리별 탭으로 많은 유저들을 유입시키는게 더 중요한 것이다.

• 그런 의미에서 모나미몰도 상단 Nav bar의 순서를 조금 변동시켜 모나미펫 탭을 메인으로 이동시켜도 좋을 것 같다는 생각을 했었다. 모나미몰에 접속하는 사람 중 대부분이 문구류를 구입하기 위해 접속한 사람들일텐데, 그들에겐 약간의 불편함이 될지라도 모나미펫 서비스에 대한 자연스러운 유입 효과를 노려볼 수 있을 것 같았다.

✅ 프로젝트 동안 아쉬웠던 점

• 백엔드와의 소통이 처음이어서 불필요한 커뮤니케이션 과정을 만든 것 같아 아쉬웠다.
  예를 들어, 데이터 포맷을 정하는 과정에서, 처음부터 프론트-백 끼리 확실히 정해두고 프로젝트를 진행했으면 더 빠르게 끝낼 수 있었을 텐데, 우리도 백엔드도 각자의 영역에 대한 이해도가 부족하다보니 2-3번의 수정 과정을 거쳐야만 했다. 2차 프로젝트에서는 이런 부분을 보완해보고 싶다.