[Project] - 항해99 React 클론코딩 과제 회고

니나노개발생활·2021년 7월 25일
0

🦾성장통

목록 보기
41/60
post-thumbnail

기간 : 2021.07.16 - 2021.07.22
항해이츠_FE 깃허브 주소
항해이츠 youtube

기획

기획 figma
'클론코딩'이라는 단어를 떠올렸을 때 흔히들 진행하는 넷플릭스, 배달의 민족, 마켓컬리, 당근마켓 등 익숙한 사이트들이 떠오른다.
뭔가 우리의 생활에 익숙하고 어느정도의 기능이 들어가있지만 클론코딩으로는 익숙하지 않은 것을 해보고자 하였고 많은 후보들 중 '쿠팡이츠'를 클론코딩 해보고자 하였다.
쿠팡이츠는 웹 사이트가 아닌 앱으로만 이루어진 서비스라 데이터를 크롤링 할 수 없고 참고할 수 있는 부분이 없기 때문에 완전 도전일 수 있지만 그래도 도전해보기로 하였다!

진행

  • 함께 진행하는 프론트엔드분이 협업 프로젝트는 처음이셔서 우선 지난 미니프로젝트를 토대로 진행하기로 했다.

view

  • Main : react-slick
  • AllStores / Stores
  • StoreDetail : modal(mobile)
  • MyEats / Favorites / Order / AboutUs
  • Reviews / ReviewWrite
  • Header : (login/register)에서는 미노출

func

  • Social Login(Kakao / Google)
    ->정석인 방법으로 소셜로그인을 구현하자면 먼저 해당 사이트에서 로그인 시 받은 유저의 인가코드를 백엔드로 전달하여 토큰을 전달받아야하지만 이미 백엔드쪽에서 작업이 다 끝난 후 프론트에서 소셜로그인 구현이 진행되어 인가 코드를 넘기는 방식이 아닌 유저가 로그인을 하면 백에서 작업 후 토큰만 프론트로 전달해주는 방식으로 진행하게 되었는데 문제는 인가코드를 전달하는 통신이 없기 때문에 화면을 이동시키기도 토큰을 받을 방식도 어떻게 진행해야하는지 정확히 할 수 없어 백엔드에서 작업이 완료되면 홈화면으로 이동시켜주고 이동하면서 토큰을 주면 프론트에서 해당 부분을 가공하여 토큰을 저장하고 다시 reload 시켜주는 방식으로 진행하였다.
  • Maintain is_login
  • GET stores / GET menus
  • Cart(save to Redux) : 카트는 카트 담기/빼기를 조금 더 가볍게 할 수 있기 때문에 매번 데이터로 넘기기보다 우선 리덕스에 저장해두고 주문이 이루어졌을 때 한번만 데이터에 전달하는 것이 더 나을 것 같다고 생각하여 리덕스에 저장하여 사용했다.
  • Order
  • Favorite
  • Copying to clipboard : react-copy-to-clipboard
  • MediaQuery(Mobile) : 500px
  • Search : enter로 검색 가능하도록
onKeyPress={(e) => {
            if(e.key === "Enter"){
              onSubmit(e);
            }
          }}
  • Pagination : react-js-pagination

느낀 점

아쉬운 점

  • 소셜로그인을 진행하면서 뭔가 정석인 방법이 아닌 우선 급한 상황에 가능한 방법을 찾아서 진행하여서 다음 기회에는 제대로 한 번 구현해보고싶다!
  • 카트를 구현하며 카트 페이지와 스토어페이지에서 금액적인 부분에서 많이 어려웠다.
    각각 금액이 더해졌을 때의 가격과 각각 메뉴의 수량에 따른 가격 등 변화할 수 있는 부분이 너무 많아서 시간이 오래 소요된 것 같다.

좋았던 점

  • 많은 페이지와 많은 기능들을 구현하다보니 스스로 기능들이 돌아가는 것을 더 많이 이해할 수 있게 된 것 같다. 스코프가 워낙 넓었다보니 해도 끝이 없고 중간에 조금 지치기도 하였지만 결론적으로는 한층 더 성장한 기분이 들기도 하고 실제로도 정말 성장했..겠지..?ㅎㅎ 로고도 직접 만들고 아직은 부족한 점이 더 많지만 현 상태에서는 뼈를 갈아넣은 내 손으로 낳은 자식같은 항해이츠..❣️
profile
깃헙으로 이사중..

0개의 댓글