Skip to main content

Command Palette

Search for a command to run...

[Lululemon 클론 프로젝트] 회고

Updated


프로젝트명 '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. 장바구니 페이지

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

1차 프로젝트 정말 열심히 하셨군요!!

7

More from this blog

[Kream 클론 프로젝트] 상품 더보기 기능

목표 offset/limit parameter를 사용한 상품 더보기 기능 구현 과정 1. 상품 더보기 기능 상품 목록 하단의 더보기 버튼을 누를 때마다 상품을 8개씩 더 로딩해오는 기능을 구현하기위해 예전에 배웠던 query parameter와 offset/limit 개념을 활용했다. offset과 limit을 설정해두면 데이터 요청 후 받아온 결과값에 순서를 부여해서 offset부터 limit까지의 데이터만 보여줄 수 있도록 페이징 처리...

Jul 22, 2022

[Kream 클론 프로젝트] 상품 검색 & 정렬 기능

목표 상품의 검색과 옵션별 정렬이 가능한 상품 목록 페이지 구현 과정 1. 상품 목록(메인) 페이지 UI 1) Kream이 상품 거래 사이트이다보니 각 상품마다 동일하게 반복되는 양식들이 많았는데, 이 부분들을 전부 컴포넌트로 만들고 재사용함으로써 코드의 길이를 많이 줄일 수 있었다. 특히 2차 프로젝트에서는 styled components를 사용하면서 각 페이지마다 js파일의 코드 양이 두배로 많아지는 바람에 한번 작성하고나면 알아보기가...

Jul 22, 2022

[Lululemon 클론 프로젝트] 장바구니 페이지

목표 상품 추가 / 삭제 / 수량 변경이 가능한 장바구니 페이지 구현 과정 1. 상품 데이터 받아오기 1) 사용자가 장바구니에 넣은 상품들의 목록을 렌더링하기위해 fetch 함수로 서버에서 데이터를 받아온 후 'itemList' 변수에 저장해두었다 . 2) 사용자를 식별한 다음 그에 맞는 데이터를 불러와야하기때문에 request header에 로그인시 발급했던 토큰 인가 과정을 추가했다. 코드🔻 const Bag = () => { co...

Jun 11, 2022

[Lululemon 클론 프로젝트] 로그인/회원가입 페이지

목표 JWT 인증방식을 활용한 로그인/회원가입 페이지 구현 과정 1. 로그인/회원가입 페이지 UI 1) lululemon의 사이트는 로그인 페이지에서 회원가입 버튼 클릭시 양식이 슬라이드로 올라와 한 페이지에서 로그인과 회원가입을 모두 진행할 수 있는 방식으로 되어 있었다. 이를 구현하기 위해 로그인 양식과 회원가입 양식을 각각 컴포넌트로 만든 뒤 'modal' 변수의 상태값이 true인지 false인지에 따라 적절한 컴포넌트가 렌더링될 수 ...

Jun 11, 2022

Rey's Blog

49 posts