[React] RAWROW Clone

enjoywater·2020년 9월 27일
4

이야기

목록 보기
3/5
post-thumbnail

Hell Row World

가방, 신발, 안경 등을 만들고 판매하는 rawrow사이트를 클로닝했다. - RAWROW
Back-end와 함께하는 첫 프로젝트여서 지난번 instagram 클로닝보다 훨씬 재미있게 했던것 같다.

Introduction


Stack

  • Javascript
  • React
  • SASS

주요 기능

( Bold - 직접구현 )
  1. 회원가입 / 로그인

    • Validation
    • token을 활용한 Login-Logout
  2. Product List

    • Category / Sub-Category 제품 정렬
    • 가격기준 filtering
    • 상세페이지로 Link
  3. Product Detail

    • 각 제품별 상세페이지
    • 색상 옵션 Link
    • 연관 상품 Link
    • 원하는 수량만큼 카트에 담기
    • 페이지 내에서 좌/우 분리 후, 각각 scroll 적용

  4. Home

    • Nav bar
    • Footer
  5. Cart

    • 상품 추가 및 삭제
    • 수량 변경
  6. Search

    • 어디서든 Nav bar 속 메뉴로 제품 검색
    • 결과에 따라 Dropdown
    • 상세페이지로 Link

기록하고 싶은 부분


1 - Nav

메인화면 접속 시, 최상단에 위치하는 메뉴와 검색창을 On / Off 할 수 있는 함수이다.
Boolean으로 state를 설정해 놓고, 값을 반대로 바꿔주는 로직을 사용했다.


2 - Search

복잡한 로직은 아니지만, 원래 기존 사이트에는 없던 기능을 추가해서 넣은 부분이다.
fetch()글자를 입력하는 순간마다 요청을 보낸 후, 실시간으로 결과를 보내주는 검색창이다.
간단한 디자인 및 실시간 로직을 구현해서 뿌듯한 부분이었다😁


느낀 점

위에서도 잠깐 얘기했듯, Front-end + Back-end로 프로젝트를 진행하는 첫 프로젝트여서 시작하기 전부터 재미있을 것 같았다.
실제하는 데이터를 가지고 서로 통신하며 만들어간다는 자체로 큰 의미가 있다고 느껴졌다.

또한, 이제까지 혼자서 진행하던 코딩을 파트별로 나누어 진행한 후에 합치는 과정도 재미있었다.
나를 제외한 다른 분들과의 소통과 배려, 협동 등 많은 요소가 필요한 과정이었다.

나 하나의 문제가 Project전체의 문제가 될 것이라는 생각때문에 더 열심히 할 수 있었던 것 같다.
같이 고민하고, 같이 기뻐할 수 있는 순간에는 더욱 더 힘이 나기도 했다.

프로젝트도 수월하게 진행이 되었고, 생각보다 결과물도 잘 나온것 같아서 전체적으로 만족했다.
하지만 원하는 애니메이션과 디테일한 부분을 완전하게 살리지는 못한 것 같아서 조금 아쉽기도 했다.

7개의 댓글

comment-user-thumbnail
2020년 9월 27일

굳굳 헬로우월드 짱👍🏻

1개의 답글
comment-user-thumbnail
2020년 9월 27일

이열

답글 달기
comment-user-thumbnail
2020년 9월 28일

이번 플젝을 계기로 흥수님은 찐 프론트인게 밝혀졌습니다

답글 달기
comment-user-thumbnail
2020년 9월 28일

찐 프론트 흥수님

답글 달기
comment-user-thumbnail
2020년 9월 28일

잘보고갑니다

답글 달기
comment-user-thumbnail
2020년 11월 14일

짧은 글이지만 흥수님의 개발자로써의 자세가 느껴져서 많이 배우고 갑니다.
소주 한 잔 따라드린다는 걸 깜빡했습니다. 다음 번엔 꼭 한 잔 드리겠습니다.
취업도 다 같이 화이팅합시다. 고생하셨습니다.

답글 달기