[Lululemon 클론 프로젝트] 회고


프로젝트명 'luluisher'

  • 스포츠웨어 브랜드 'lululemon'의 기획, 디자인 클론
  • 2주간 Front-end/Back-end 개발 진행


제작 기간 / 인원

2022년 5월 23일 - 2022년 6월 3일
Front-end 4명 & Back-end 2명


적용 기술 / 협업 도구

HTML, CSS, React
Notion, Github, Trello, Slack


코드 컨벤션

  1. 들여쓰기는 tab, 혹은 공백 문자 2개를 사용한다.
  2. 변수와 함수, className 명명 규칙은 Camel Case를 사용한다.
  3. 값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언하고 var는 사용하지 않는다.
  4. 함수 선언시 arrow function(() => {}) 위주로 사용한다.
  5. 주석은 코드 설명보다는 수정 사항이나 미구현 사항을 기재할 때 사용하기로 한다.
  6. 함수 네이밍 규칙은 해당 함수의 동작을 앞에, 동작이 적용될 태그를 뒤에 위치하게 작명한다. ( ex) handleInput )
  7. component의 전체를 감싸는 최상단 태그의 className은 컴포넌트 이름으로 명명한다. ( ex) product, productlist )
  8. scss 파일명은 컴포넌트 이름과 동일하게 한다.
  9. 인라인 스타일링은 지양한다.


프로젝트 구현 목표

  1. 로그인/회원가입 페이지
  2. 메인 페이지
  3. 상품 목록 페이지
  4. 상품 상세 페이지
  5. 리뷰창
  6. 장바구니 페이지


시연 영상



내가 구현한 부분

  1. 로그인/회원가입 페이지

    • 로그인/회원가입 양식 컴포넌트 조건부 렌더링
    • Jason Web Token을 이용한 로그인 인증 방식 구현
    • 기능 구현 상세 및 회고
  2. 장바구니 페이지

    • 장바구니 상품 개수에 따른 상품 목록/빈 장바구니 페이지 조건부 렌더링
    • 상품 추가/삭제/숨기기 기능 구현
    • 상품 수량 조절/합계 가격 변동 기능 구현
    • 기능 구현 상세 및 회고