🔨 개요
💻 클론 사이트
📅 프로젝트 기간
2021.10.18 ~ 2021.10.23 (5일)
👨👨👧👧 프로젝트 참가 인원
프론트엔드 3명, 백엔드 3명
🛠 주요기능
- 로그인 회원가입 + 소셜 로그인
- 상품 리스트 출력
- 장바구니 기능 (품목 추가, 수량 변경, 품목 삭제)
💻 페이지
1. 상품리스트 출력
2. 로그인 + 소셜 로그인
3. 모달 + 장바구니 추가
4. 상세 페이지 + 장바구니 추가
5. 장바구니 품목 수량변경, 삭제
🔨 프로젝트 회고
하고싶은 말
미니프로젝트와 클론코딩을 진행하였는데 정말 정신없이 지나간것같다. 코드작성 및 문제고민 문제해결로 인해 따로 공부할 내용들을 정리만 해놓고 보지못했다.
5일 동안 뭘 했을까?
- 첫날 프론트엔드 백엔드 인원들이 모여 와이어프레임, API 작성을 하였다.
- 첫날에 localhost:3000에서 서버와 요청,응답 시도하여 성공하였다!
- 프론트엔드 기준 첫날과 둘째날 까지 화면 view를 작성했다. (생각보다 너무길어졌다)
- 셋째날 부터 프론트엔드 팀원들이 기능을 구현하며 서버와 통신하여 요청 응답을 받기 시작하였다.
- 동시 다발적으로 맡은 기능들을 구현해 나갔다.
- 상세페이지 연결 및 리덕스만으로 장바구니 페이지를 구현하기 시작했다.
- 넷째날 오후 서버와 장바구니 페이지를 연결하여 새로고침해도 장바구니 데이터가 날아가지 않게 구현하였다.
- 마지막날 부족한 CSS 및 팀원들과 함께 UX개선 및 detail 처리를 진행하였다.
🥲 아쉬웠던 점
1. API 회의 및 설계
미니 프로젝트때는 백엔드 팀장님께서 주제 정할때 API 설계를 이미 해놓으셔서 크게 API 요청 데이터 및 응답데이터에 중요성을 못느꼈는데, 이번에는 어떤 데이터를 요청해야하는 것인지 그리고 어떤 데이터를 응답받아야 하는 것인지 프로젝트를 시작하지도 않았는데 파악하는 것이 어려웠다. 일단 해봐야 알 것같다는 말은 하지 않았지만, 어떤 데이터를 주고 받아야할지 감이 안잡혔다. 그리고 응답데이터를 받을때 이런 형식으로 받는게 나은건지 말을 할 수가 없었다.
2. styled-components
저번 주 차부터 계속 발목을 잡고있는 styled-components 이녀석은 친해질래야 도대체 친해질 수 없다. 특히 최소단위 컴포넌트중 Grid component는 props가 무려 20개가 넘었다.. 쓰면서도 이게 맞는건지 혼동이 왔고 나중에는 Grid component를 쓰지않고 각 컴포넌트에서 Container를 만들어서 쓰고 있었다. styled-components는 스타일 작성방식중 하나이지만 뭔가 사용법대로 쓰지않는 느낌을 받았다.
3. 개인의 욕심
팀프로젝트는 팀으로 진행되고 일정에 맞춰 진행되는데 장바구니 기능을 오직 리덕스로만 구현하려는 개인의 욕심으로 백엔드 분들에게 죄송했다. 장바구니 페이지 역시 서버에서 데이터를 받아와서 구현을 해야하는 부분인데 처음에 그러지 않았다. 결국 장바구니 페이지를 리덕스로만, 서버와 함께 2번 구현하여 이틀이라는 시간이 소요되었다. 그로 인해 좀 더 구현해야할 댓글 CRUD를 구현하지 못했다. xx튜너님께서 모든 작업은 팀 위주로 진행하고 거기서 개인이 더 하고싶은 부분이 있다면 새로운 브랜치를 파서 그날의 팀 일정을 다 마친후에 진행하라고 하신 말씀을 명심해야겠다.
4. 문제 해결 시간
3번의 연속이지만 장바구니 기능을 구현하면서 어떻게든 완성을 시키고 싶어 그 문제에만 계속 몰입하여 시간을 오래 보낸것이 아쉬웠다. 어떻게든 혼자 힘으로 구현해보려는(또 욕심) 고집으로 시간이 계속 흘러갔고 결국은 구현을 했지만 많은 시간을 소요했다.
😄 잘했던 점ㅎ
1. 문제를 해결하려는 노력
잘했던 점이자 못했던 점이지만 문제를 계속 보면서 해결하려는 노력을 하였다. 그리고 디버깅?같은 것도 시도 했다. 문제를 쪼개서 단계별로 확인하여 확실히 오류가 없는 부분은 체크하여 다시 보지 않아도 되도록 하였다.
장바구니 기능에 경우의 수가 어느정도 존재해 그 부분을 체크하고, 노트에 써가면서 다시한번 체크 했던것 같다. 예전 같았으면 그냥 구글링하여 복사 붙여넣기를 했겠지만 이번에는 어떻게든 해결해 보려는 노력을 하였고 구현하였을때의 기쁨도 너무 컸다.(정말 소리지를 뻔했다.)
2. 적극적인 소통
일단 프론트엔드 팀원들과 소통을 하려고 노력했다. 어디까지 진행했는지 어려운게 무엇인지 그리고 잘 안되는 문제들은 같이 보면서 해결하려고 노력하였다. 이를 통해 서로서로 배우는것이 많았다. 그리고 나는 어떤 방식으로 코드를 작성하는지 상대방은 어떤방식으로 작성하는지도 파악 할 수 있었다. 추가로 백엔드 분들과도 계속해서 이야기를 하면서 요청데이터, 응답데이터를 어떻게 수정하면 좋을지 그리고 데이터 형식에 대해서도 많은 이야기를 했던것 같다. 제일 중요한 것은 너무 요구만 하지말고 백과 프론트가 잘 조율해서 의견을 맞춰나가는게 팀 프로젝트가 원만히 진행되는 방법인것 같다.
3. 마지막 detail 파악
일단 프로젝트를 다 만든후 다시 한번 만든 사이트를 하나하나 돌며 빠진부분은 없는지 그리고 클론코딩이지만.. 좀 더 나은 UX 디테일에 신경썼다. 어떻게 하면 좀 더 사용자가 편하게 느낄지 3명이서 이야기를 하며 만들어나갔고 이 부분이 너무 유익하고 재미있었다.
🧐 개선해야할 점
1. 팀 프로젝트
혼자만을 생각하지말고 팀의 일정에 맞춰 일을 진행하자!
2. 문제 해결 시간
어떤 기능을 구현하다가 일정시간(팀 일정기준)넘어가고 다음 기능에 영향을 미친다고 생각하면 구글링 및 이전에 구현했던 다른 분들의 코드를 보면서 이해하고 그것을 적용하는 방향으로 진행 해야겠다고 느꼈다. 어떤 기능을 구현하는데는 많은 방법이 있고, 내 방법이 꼭 맞는 것은 아니기 때문에 문제 해결에 일정 시간이 오버 된다고 느낀 다면 source를 찾아서 그것을 적용해보자
3. 상대방 코드 다른분들의 코드 읽기
뭔가 남의 코드를 잘 읽지 않는 것같다.. 그러다보니 상대방의 코드를 읽는게 어려워졌고 이부분은 빨리 개선해야겠다고 생각했다. 나만의 사고에 갇혀 더 발전 할 수 없는 그런 상태가 될 것이 확실하다. 많은 사람들의 코드를 뜯어보고 읽어보고 하는 노력을 해야겠다.
(추가) 이번 프로젝트에서 짚고갈 내용
- Axios interceptor
- useState 작동방식
- 소셜로그인 흐름 (리다이렉션 페이지를 꼭 만들어야하나?)
- status 값이 200으로 들어오는데 에러 발생시 분기처리를 어떻게 할건지?
- useEffect 안에서 async, dependency array 등 3가지기능
- map 돌릴때 key값에 index 넘기면 안되는 이유
<Switch>의 역할이 무엇인지?- history객체 메소드들
goBack(),push(),replace() - reducer에서 draft는 state의 복사본으로 알고 있는데, state를 직접조작하는게 아니면, state로 접근하는게 맞는건지?!?!
멘토링내용
- 큰 프로젝트일 수록 s3 파이어베이스 사용이유 : 클라우드 스토리지 용량, 데이터 관리를 우리가 하지 않아도됨 , 주의사항 : 해당 서비스 사용시 APIKEY 노출 되지않게 만들자.
프론트엔드에서 이미지 입력을 받고 서버에 전달하면 서버에서 S3에저장후 서버에서 url을 받아서 데이터베이스에 저장. - 데이터 전달받는 양은 서비스 마다 다르고 필요할때마다 서버에 요청해서 받아쓰는게 나을 수 도있고 전체데이터를 받아서 프론트에서 필터 처리하는게 나을 때도있다.
- CRUD의 흐름을 파악하는게 좋다. (그림으로 그리자)
