[항해 99] 클론코딩 후기

첫 클론 코딩 사이트에 대해서 사람들이 많이 하는 인스타, 에어비앤비 말고 다른 사이트를 하고 싶어서 pickle plus라는 웹 사이트를 클론 코딩하기로 했다.

간단하게 pickle plus 소개를 하자면 왓챠, 넷플릭스, 디즈니 등과 같은 ott 플랫폼을 다른 유저들과 함께 사용할 수 있도록 하는 공유 시스템을 가지고 있는 웹사이트다.

 

 

배운 점

 

일주일간의 클론 코딩을 하기에 사실 페이지 수가 굉장히 많았고, css는 정말 장난 아니었다.

페이지 수가 많다 보니 BE 쪽에서 한 페이지마다 계속 데이터를 보내는 것은 비효율적인 움직임이라는 말에 데이터를 어떻게 하면 한 번에 보낼 수 있을지에 대해서 많이 고민을 해보았고, 결론은 우선 로그인하기 전에 사용자가 선택한 데이터를 세션 스토리지에 넣어 보관하였다.

이제 플랫폼을 선택한 사용자가 로그인을 하면 쿠키로 토큰이 날아와서 마지막에 이 모든 데이터를 백앤드에 POST로 보내면서 파티 리더인 사용자에 대한 데이터를 서버에 저장했다.

 

요약 

1. 로그인하기 전에 사용자가 선택한 ott 세션에 저장

2. 로그인 후에 사용자의 쿠키에 토큰 저장

3.  쿠키에 저장한 데어터 JSON stringfy로 변환 

4. 위 데이터 백에 포스트로 전달

 

아쉬운점

 

아래 엑셀과 같이 어떤 부분을 누가 할지 구역을 정하고 실행하였는데 내가 담당한 뒷부분이 앞사람이 구현을 해야지만 데이터가 받아와 지는 구조라서 코딩을 하는데 시간이 오래 걸렸다.

다음 프로젝트를 진행할 때는 겹치지 않는 부분을 생각하고 팀원과 잘 나누어서 분배를 해야겠다고 생각했다.

그래도 이렇게 엑셀에 vs코드 폴더 구조를 정리하고 현재 작업을 하고 있는 부분이 어디인지 서로 표시하면서 깃의 충돌 부분을 최소화할 수 있었다는 것은 몹시 좋았다.

https://docs.google.com/spreadsheets/d/1YNO9Ue4cjtfq9VTMaNii7eUuTUp1ngd7Yn2vEe5Bt5E/edit#gid=0

 

 

완성된 작품은 아래와 같고 기능이 조금 더 있어서 이건 맨 밑에 깃 링크를 올려두겠다.

https://youtu.be/rmI8KEP2viQ

피클플러스 클론코딩 완성작 동영상

깃허브 링크 :

https://github.com/sooyeon29/Clone_ReactW7