[Wecode] 1차 프로젝트 후기

link717·2020년 11월 1일
2

Wecode

목록 보기
7/9

MONAWE PRJ 소개

  • 국내 문구 Commerce 사이트 모나미 클론 프로젝트
    (짧은 기간, 개발에만 집중하기 위해서 디자인/기획 부분만 클론하였습니다.)

  • 모나미 클론 영상자료

개발 기간 및 인원

  • 개발 기간: 2020/10/19 ~ 2020/10/30 (2주)
  • 개발 인원
    Fontend: 김수연(🦸‍♀️PM), 김한나, 백경민, 이지영 (+ 쩜오론트 민경민님👍)
    Backend: 민경민, 황채영

적용 기술

  • Frontend: React.js(Class), React-router, React-slick, Sass
  • Backend: Django, MySQL, bycrypt, PyJWT, cors-headers
  • 공통: git / github, Postman, Trello

구현 기능

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

✨Team Rules✨

  • 어? 하지말기
  • 최종발표 날 모나미룩 입고오기!
  • PM님을 마음 속에 품고살기

🎪 프로젝트 영상

기억에 남는 코드

1) NavBar Transition 효과

: Menutab 마우스 hover시 디자인 요소가 변경되면서 site의 category 정보가 drop down

React를 사용하여서 구현하려다보니 처음에는 MouseOver된 MenuTab의 idx를 state에 넣고 idx 정보가 update되면 category 정보가 rendering되는 형태로 초기에 구현을 하였는데... 아무리 transition 효과를 줘도 1도 안먹는게 문제였다.

이후에 멘토님과 이야기해보니 물리적으로 html 구조가 없다가 생길때, transition 효과를 줄 수 있느냐?에 대한 답은 없다였다. (혹시 있다면 누가 좀 알려주세요!)

그래서 그 이후에 구조를 변경해서 html 구조는 물리적으로 있는 상태로 height를 초기값 0 → 기존 높이(px)로 변화하는 transition을 주었고, 다른 메뉴탭으로 이동할 때는 그 전효과가 닫힐때까지 기다려야 하므로 transition-delay를 적용하여 조금 더 부드럽게 구현하였다.

2) NavBar 사용자 정보 Update

: Login 성공시, 해당 사용자에게만 유효한 icon 생성

우리는 로그인을 성공하면 localStorage에 userName과 Token을 저장하고 메인 페이지에서 key를 가져오는 형태로 코드를 작성했는데 login 페이지에서 메인 페이지로 push시, localStorage의 값을 바로 못 가져오는(?)게 문제였다. (처음에 해당 페이지를 rendering 할 때는 없고, 새로고침을 하면 페이지가 re-render되면서 업데이트 됨.. JavaScript 비동기적 처리 특성?)

그래서 componentDidUpdate lifeCycle로 이전 url과 지금 url이 다를 경우, localStorage의 name 값을 State에 Update하는 것을 시도했다. 하지만 그 때 문제점은 NavBar가 모든 페이지에 공통적으로 있는 요소라서 Switch문 밖에 기본형으로 import를 하였더니 Route의 기본 props(match, location, history)를 이용하지 못하는게 문제였다. 그래서 멘토님께 SOS 요청해서 찾은 방법이 해당 component를 withRouter로 감싸서 export 하는 것이었고 이 방법으로 path에 접근할 수 있었다.

  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({ userName: localStorage.getItem("name") });
    }
  }

느낀점

운이 좋게 내가 추천했던 사이트가 1차 프로젝트로 뽑혀서 자연스레 PM이 되었는데 PM으로 가진 나의 가장 큰 목표는 PRJ의 Backend/Frontend 사이 혹은 각각의 팀원들과의 소통이었다.

처음 멘토님들께 프로젝트에 대해서 설명을 들을 때 개인의 목표를 달성하는 것도 좋지만 기간내에 이루지 못했다고해서 그 프로젝트가 끝난것이 아니기 때문에 좋은 관계를 유지하면 그 이후에도 얼마든지 유지보수를 할 수 있다고 하셨다. 나는 그 말에 크게 공감했고 팀원들과 최대한 좋은 분위기를 유지하기 위해서 노력했던 것 같다. (실제로도 너무 좋았다! 🤗)

그리고 각자 맡은 부분은 다르지만 코드가 막혔을 경우, 팀원들과 공유하고 해결하는 과정을 통해 내가 구현하지 않았던 페이지도 기본 원리에 대해서는 어느정도 윤곽이 잡힌 상태에서 1차 프로젝트를 마무리 할 수 있었던 것 같다. 그래서 2차 프로젝트 때는 어떤 부분을 맡더라도 어렵지 않게 진행 할 수 있을 것 같은 자신감이 장착되었다.

마지막으로 끝까지 본인이 맡은 부분을 구현하기 위해 늦게까지 고생해준 우리 멋진 모나위 팀원들께 정말 고마웠다고 전하고 이 글을 마치겠다.

profile
Turtle Never stop

0개의 댓글