파펨 클론 1차 프로젝트

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들을 피할 수 있다는 점. 이부분은 경험이 쌓여가면서 채워질것이라 믿는다.
• 다른 팀원들의 진행사항도 파악을 잘해야 중간에 발생할 수 있는 병목현상을 막을수 있다.

다음 프로젝트에 반영하고 싶은점

• 처음이라 조금 쫄아서 진행했던점이 있어 더 즐거울수 있었던 부분들을 놓친 것 같다. 책임을 다하는 한도내에 즐기면서 진행하자 :)
• 팀원과 진행사항에 대한 소통을 더 늘리자.
• 막연히 기능구현을 하는건 의미가 없는것 같다. 더욱 이쁜 코드로 내가, 남이 잘알아 볼수있게 더욱 명확하고 깔끔한 코드를 짜보고 싶다.
• Style-Component, Hook을 이용해 더욱 발전된 코드를 짜고싶다.

*GitHub Link

Frontend : https://github.com/wecode-bootcamp-korea/fullstack1-1st-BaseNote-frontend
Backend : https://github.com/wecode-bootcamp-korea/fullstack1-1st-BaseNote-backend