파펨 클론 1차 프로젝트

김민성·2021년 7월 26일

WeCode 위코드 위코드풀스택 클론코딩 프로젝트

1차프로젝트의 목표

프로젝트 시작전 나의 목표는 다음과 같았다. 특히 전체적으로 결과물에 대한 기대보다는 실제로 동료랑 협업하면서 개발하는건 어떨까? 가장 대표적인 웹사이트인 쇼핑몰의 사이클은 어떨까? 라는 궁금증이 컸었다.

이때까지 배운부분에서 조금이라도 나은 결과물을 만들것
개발에서의 협업이랑 어떤것일지 느껴보기
특정 업무/기능을 받았을때 어떻게 헤쳐나갈지 깊게 고민 해보기

프로젝트 내 역할 / 목표

Main Page, Detail, Navigation을 구현하면서 이때까지 배웠던 기능을 총 복습하고 Props,State를 완벽 숙지하는것을 목표로 했고, 백엔드와의 전체 흐름을 파악하려고 노력하였다.

BASENOTE Front-end/Back-end 소개

Find Your Scent, 가장 나다운 향을 찾아드립니다.

향수 판매 사이트 파펨 클론 프로젝트

💁‍♀️💁‍♂️ 팀원

📆 프로젝트 기간

2021.07.05 ~ 2021.07.23 (19일)

🔑 Skills

FrontEnd : React, ReactRouter, SASS, Javascript

BackEnd : Node.js, Nodemon, Express, Prisma, Bcrypt, JSWONWebTokens, Babel, MySQL

공통 : GIT, ESLint, Prettier

🛠 Tool

Working Tools : Trello, Slack, GitHub, Postman

💎 필수 구현 사항

■ 공통
- 네비게이션
- Footer

■ 메인 페이지
- 메인 페이지에 나타나는 동영상
- 메인 비주얼 이미지 슬라이드 기능

■ 상품 리스트 페이지
- 상품 리스트의 상품 필터링 기능
- 상품 리스트의 상품 카테고리 탭 기능

■ 상품 상세 페이지
- 상품 이미지 슬라이더 기능
- 상품 상세정보 출력
- 상품 수량 변경
- 장바구니에 담기 기능

■ 장바구니 관련
- 장바구니에 담은 상품 조회
- 장바구니 내 상품 수량 변경 기능
- 장바구니 내 상품 삭제 기능
- 장바구니 내 상품이 3만원 이상일 때, 배송비를 0원으로 출력

■ 로그인/회원가입 관련
- 로그인 기능
- 회원가입 기능

구현 기능 상세

1. 메인페이지 구현 사항

메인 레이아웃
사진보다 직관적으로 원하는 바를 전달할 수 있는 동영상을 이용한 UI에 항상 관심이 많아 구현할수 있어 기뻤다. 보다 다채롭게 브랜드의 이미지를 보여줄 수 있어 파펨에 가장 맞는 상쾌하고 감각적인 영상을 삽입했다.
- 동영상 삽입
- Review - 상품 연동
네비게이션바
마우스 Hover시 메뉴별로 다르게 썸네일을 나오게 하기위해 배열로 데이터를 담아 State를 이용하여 구현하였다. State기능에 대해 한층 깊게 이해할 수 있어 좋았다.
또한, 용량별로 다른 end-point를 주기위해 동적 라우팅 기능을 사용하였다.
- 카테고리 hover시, 썸네일이 나오는 기능
- react-Router을 사용한 동적 라우팅 구현

2. 상세페이지

백엔드와 어떠한 방식으로 연결되는지 알게 된 좋은 기회였다. 시간이 촉박해 백엔드 작업에는 참여하지못한것이 아쉽지만, 프론트엔드도 백에서 어떻게 값을 받아와야할지 알아야한다는 점에서 백엔드도 놓아서는 안될것 같다. 차차 백엔드도 공부해 나가야지.

수량을 변경할 시 가격도 동시에 변경
드랍다운을 이용한 추가 옵션 선택
react-router를 사용해 상품 용량에 따른 동적 라우팅 구현

기억에 남기고 싶은 Code

코딩을 하는 기본이유 : 중복하는 일을 줄이기 위해
-> 기본적인 이유를 망각한채 기능 구현에만 매달려 함수를 중복해서 사용하였다. 리팩토링 기간을 가지면서 더욱 효율적인 코드로 변모 시키기 위해 같은 기능을 하는 함수들을 하나로 묶어 중복을 없앴다.
2D --> 3D코드로 변신
-> 단순히 State-> Set state라는 관점에서 벗어나 인덱스를 활용해 중복되는 함수를 줄일 수 있었다.

class TopNavHiddenMenu extends Component {
  constructor() {
    super();
    this.state = {
      index: -1,
    };
  }
  showThumbnail = index => {
    this.setState({
      index,
    });
  };
  //Index를 인자로 이용하여 콜백함수에 접근
  hideThumbnail = () => {
    this.setState({
      index: -1,
    });
  };
  render() {
    const { hiddenCard, index } = this.state;
    return (
      <>
        <div className={hiddenCard ? 'hiddenCard cardInactive' : 'hiddenCard'}>
          {index >= 0 && (
            <>
              <img
                className="hiddenCardImage"
                src={sideMenuImageTitles.images[index]}
                alt="참고사진"
              />
              <span className="hiddenCardDescription">
                {sideMenuImageTitles.titles[index]}
              </span>
            </>
          )}
        </div>
      </>
    );
  }
}
export default TopNavHiddenMenu;

느낀점

--> Nav구현시 Nav레이아웃 부터 장바구니 아이콘 연결/ 썸네일 표시 추가구현 기능까지 한호흡에 끝까지 완성하려고하니 다른 팀원들과의 업무와 병목현상도 생기고, 데드라인에 쫓기는 와중에 일을 빨리빨리 쳐내기가 힘들었다.

Agile의 필요성을 절실히 느꼈다. 마음은 모든 기능을 구현하고싶지만, 많은 기능을 구현하기보다 빨리 구현하고 보완하고 아니면 버리고 다시 시작할수 있는 Agile의 힘을 느꼈다.
Agile하게 진행하면서도 전체적인 그림을 잘그려 나가야 중간에 숨어있는 Blocker들을 피할 수 있다는 점. 이부분은 경험이 쌓여가면서 채워질것이라 믿는다.
다른 팀원들의 진행사항도 파악을 잘해야 중간에 발생할 수 있는 병목현상을 막을수 있다.