마켓컬리 클론 1차 프로젝트 회고

고객에게 신선한 식자재를 새벽배송하는 이커머스 플랫폼 마켓컬리 클론 프로젝트입니다.
개발은 초기 세팅부터 필수 구현 사항 위주로 직접 구현했으며, 프론트와 백을 연결해 실제 사용 가능한 수준으로 개발했습니다.

팀명
우아한 남매들 (WoowaHan Siblings)👨‍👧‍👦

사이트명
별밤마켓 (ByeolBam-Market)🌠

프로젝트 기간
2021.08.30 ~ 2021.09.10

기술 스택

Front-End(3명)

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

Back-End(3명)

• Django
• Python
• Postman
• MySQL

협업 도구

• Github
• Trello
• Slack
• Notion
• Zoom

구현 사항

Signup page (✅기능 구현)

• 회원가입 페이지 레이아웃
• 아이디, 비밀번호 정규표현식을 통한 validation 검사
  • 각각의 조건 충족 여부에 따라 조건문 ✔통과/❌통과못함 색상 부여
• 서버에 저장된 데이터와 비교하여 아이디 중복체크

Login page (✅기능 구현)

• 로그인 페이지 레이아웃
• Access Token을 활용한 로그인, (로그아웃) 기능

Main page

• 메인 페이지 레이아웃
• 페이지 공통으로 쓰이는 Nav, Footer
• 상위 카테고리 hover 시 하위 카테고리가 보이는 이중 Nav bar
• setInteval을 통해 일정 시간 이후 자동으로 넘어가는 배너
• carousel 기능이 적용된 슬라이드 배너

Detail page

• 상품 상세 페이지 레이아웃
• carousel 기능이 적용된 슬라이드
• 상품 정보를 나타내는 Menu Tab에서 특정 Tab 클릭 시 자동으로 scroll 이동
• query parameter을 이용한 해당 상품 상세 페이지로 이동
• Detail page에서 원하는 상품 장바구니 담기
  • Login 된 경우, Cart page로 이동
  • Login 되어있지 않은 경우, Login page로 이동

Cart page

• 장바구니 페이지 레이아웃
• Detail page에서 담은 상품 데이터 받아와 장바구니 목록 조회
• 구매 원하는 상품 선택/해제
• 구매 상품 수량 업데이트

내가 직접 구현한 부분

회원가입을 위해 필요한 필수입력사항인 아이디와 비밀번호를 정규식 표현을 통해 유효성 검사를 하였다.
각각의 항목 입력창을 클릭하면 항목에 맞는 입력 조건문이 보여진다.
입력 값이 해당 조건에 충족하면 통과, 충족하지 못하면 가입이 불가능하도록 결과에 따라 조건문 색상이 변경되어 표시되도록 구현하였다.

아이디는 새로 입력한 값과 서버에 저장된 데이터와 비교하여 중복되지 않은 경우에 사용 가능하도록 중복확인 기능을 추가로 구현하였다.

프로젝트를 통해 내가 얻은 것들

• Trello를 활용한 프로젝트 진행
  매일 Daily Standup Meeting을 했지만 초반에는 '한 일/할 일' 정도로만 공유했었다. 진행 중에 전체적인 프로젝트 현황을 파악하기가 어렵다는 점을 파악하고, PR에 review 반영 후 merge 되기까지의 과정에 대한 리스트를 추가함으로써 흐름을 좀 더 쉽게 파악할 수 있었다.

• fetch 함수를 이용해 서버에 HTTP 요청

  • body의 key 값은 백엔드에서 설정한 값으로 입력
  • 연결은 되었지만 원하는 응답이 오지 않고 에러가 났다면 제대로 작성했는지 확인 필요

• Access Token을 통한 로그인 기능 구현

  • 장바구니 페이지 등에서 로그인된 사용자임을 나타내는 (로그인 여부에 대한 정보가 들어있는) 토큰을 localStorage 메서드를 통해 localStorage에 저장

handleLogin = () => {
    fetch(LOGIN_API, {
      method: "POST",
      body: JSON.stringify({
        account_name: this.state.id,
        password: this.state.password,
      }),
    })
      .then(res => res.json())
      .then(res => {
        const messages = {
          LOGIN_SUCCESS: `로그인을 성공했습니다. ${this.state.id}님 반갑습니다!`,
          INVALID_USER: "잘못된 회원정보입니다. 아이디를 다시 입력해주세요.",
          INVALID_PASSWORD:
            "잘못된 회원정보입니다. 비밀번호를 다시 입력해주세요.",
        };
        alert(messages[res.message]);

        if (res.Token) {
          localStorage.setItem("token", res.Token);
          this.props.history.push("/");
        }
      });
  };

➕ 개선해야할 점

• res(result) 객체의 key 값(message, Token)이 제대로 작성되었는지 console.log를 수시로 확인하여 출력되는 값과 비교
  (작성한 값이 맞는지 백엔드에 계속 물어보지 않아도 된다!)

프로젝트를 하며 아쉬웠던 점

1. 소통의 어려움
프로젝트를 처음 해보다보니 초기 세팅해야할 부분과 사용해야 할 툴을 사용하지 못한 점이 아쉬웠다. 먼저 (common.scss를 설정하는 등) 디테일하게 틀을 잡고 기능 구현에 들어갔더라면 좀 더 깔끔한 코드가 됐을 것 같다. 프론트엔드와 백엔드 간 소통하는 방법이 부족했던 점이 아쉬웠다. 서버와 데이터 연결하는데 백엔드에서 설정한 key 값이나 Error 메시지가 어떻게 설정되어있는지 매번 물어보며 진행했고 Postman을 백엔드 API 호출 테스트에 그치지 않고 프론트엔드에서 함께 사용하지 못한 점이 아쉬웠다.
결과물을 내는 것이 당연히 중요하지만 프로젝트를 진행하는 과정에서 얻을 수 있는 것이 많은데 다소 시간적 여유가 없어 소통이 부족했다. 프로젝트를 통해 무엇보다 FE-FE, FE-BE 간의 소통의 중요성을 알게되었다.

2. 리팩토링의 어려움
프로젝트 기한은 다가오고 촉박한 시간에 각자 맡은 페이지에 대한 기능을 구현하는 것에 몰두하느라 중간중간 리팩토링하는데 시간을 내지 못했다. 서로 작성한 코드를 리뷰함으로써 미처 생각하지 못하고 놓친 부분을 보완하여 작은 기능 하나라도 퀄리티를 높일 수 있도록 했다면 좋았을 것 같다.