기간 : 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
느낀 점
아쉬운 점
- 소셜로그인을 진행하면서 뭔가 정석인 방법이 아닌 우선 급한 상황에 가능한 방법을 찾아서 진행하여서 다음 기회에는 제대로 한 번 구현해보고싶다!
- 카트를 구현하며 카트 페이지와 스토어페이지에서 금액적인 부분에서 많이 어려웠다.
각각 금액이 더해졌을 때의 가격과 각각 메뉴의 수량에 따른 가격 등 변화할 수 있는 부분이 너무 많아서 시간이 오래 소요된 것 같다.
좋았던 점
- 많은 페이지와 많은 기능들을 구현하다보니 스스로 기능들이 돌아가는 것을 더 많이 이해할 수 있게 된 것 같다. 스코프가 워낙 넓었다보니 해도 끝이 없고 중간에 조금 지치기도 하였지만 결론적으로는 한층 더 성장한 기분이 들기도 하고 실제로도 정말 성장했..겠지..?ㅎㅎ 로고도 직접 만들고 아직은 부족한 점이 더 많지만 현 상태에서는 뼈를 갈아넣은 내 손으로 낳은 자식같은 항해이츠..❣️