프로젝트 영상 보러가기 - https://www.youtube.com/watch?v=PQmu5MozO7w
🔶 프로젝트 후기
나의 첫 팀 프로젝트이다.
여태까진 혼자 공부하는 느낌으로 코드를 짜왔는데, 이렇게 협업으로 진행하는건 또 느낌이 달랐다.
더 책임감이 느껴졌고, 서로 무게를 느끼고 진행하다보니 더 상대를 배려하는 식으로 말하고자 노력했다.
1차 프로젝트 발표를 맡기로 자원해서 마지막까지 긴장의 끈을 놓칠 수 없었다.
나는 평소에 어떻게하면 말을 잘 전달 할 수 있을지 고민이 많다.
때문에 말하는 연습을 해보고 싶어서 이런 발표 기회가 있으면 도전하는 편이다.
새벽까지 연습해서 발표를 했고, 그 결과 '제일 기억에 남았다'는 후기를 들었다.
이런 작은 발표 기회가 내게 큰 자신감을 얻게해준 것 같아 뿌듯하다.
🔶 회고
1. 소통의 중요성
백엔드와 통신을 하며 코드를 짠 경험은 처음이다.
서로 본인 영역만 알다보니 얘기할 때 같은 얘기를 하더라도 다른 식으로 말해서 정말 많은 대화가 필요했다.
이렇게 나와는 다른 상대와 협업을 해야하기 때문에 많은 대화를 해야 소통의 오류가 없을 것 같다는 생각이 들었다.
2. 우선순위 파악
레이아웃 구현에 많은 시간을 소요해서 기능 구현시 촉박했었다.
또한 처음에 해야할 일을 페이지 단위로 정해서 해야할 일의 단위가 너무 컷다.
다음 프로젝트 때는 페이지 내에서 기능을 더 상세히 쪼개보고, 그 기능을 하나하나 구현하고 끝내는 식으로 해야 할 것 같다.
3. 남이 봐도 깔끔한 문서 만들기
혼자 코딩할 땐 내가 기억하고 싶은 부분에 주석을 달아주거나, 폴더명이나 변수명도 내 방식으로 짓곤 했다.
그러나 프로젝트는 혼자 진행하는게 아니고, 내 코드가 전체를 위해 쓰이기 때문에 공통의 컨벤션을 세워서 통일해야 하는 점을 배웠다.
앞으로 다른 사람이 보더라도 한눈에 파악될 수 있는 깔끔한 코드를 쓰고싶다.
🔶 폴더 규칙
1. Components폴더 - 여러 페이지에서 중복적으로 사용되는 공통 컴포넌트 관리
: 예를들면, Toast 컴포넌트 는 로그인, 회원가입, 장바구니 페이지에서 이용된다.
이렇게 여러 경로에서 사용되는 것들은 Components 폴더에 두었다.
2. Pages폴더 - 페이지 폴더들 > 해당 페이지 하위 컴포넌트
🔶 기억하고 싶은 기능들
1. Toast기능을 전역에서 사용하기
👩🏻💻 구상
회원가입과 로그인 성공,실패시, 장바구니 창에서 결제버튼 클릭시 알림을 표시하고 싶었다.
alert로 처리하기엔 너무 간단한 것 같아서 toast기능을 추가해보고자 했다.
이 toast기능이 여러 페이지에서 사용되야 하기 때문에 전역에서 사용하면 좋을 것 같아 useContext를 활용하였다.
하위 컴포넌트에 prop을 계속 전달해서 받지않고도 props 을 전역에 두고 바로 사용할 수 있어서 정말 편했다!
🔆 useContext 코드 사용예시
2. Hook은 무조건 한번은 실행되야 한다.
👩🏻💻 구상
로그인 성공시 toastMessage 값이 바뀌면 Toast 컴포넌트가 리렌더링 된다.
이때 toastMessage의 배열에 값이 없으면 Toast 컴포넌트를 리턴하여 끝내고,
배열에 값이 있다면 jsx가 렌더된다.
이후 1초 뒤에 toastMessage배열에 값을 없애주어 toast 팝업창이 사라지게 한다.
🔆 Hook은 무조건 한번은 실행되야 함.
3. 예외처리
👩🏻💻 구상
1) 로그인 실패시
: 401번 오류, 에러응답만 있고 데이터가 없음
: 따라서 로그인 실패시는 응답객체의 ok가 false 이니까 → throw catch로 에러처리
2) 회원가입 실패시
: 400오류, {message: "Email Already Exists"} 에러응답 데이터까지 있음.
: 따라서 응답 데이터를 통해 에러처리함.
💡느낀점
처음엔 회원가입 실패시 이메일에 대한 에러응답 데이터만 나왔고, 닉네임과 핸드폰번호 중복일시는 그냥 400오류만 나왔다.
그래서 어떤 사항이 중복된건지 프론트에서도 알고 화면에 알림 띄어줘야 한다고 생각했고,
백엔드에게 다른 중복사항도 에러 데이터 받고싶다고 요청하였다.
이런식으로 어떤 사항을 에러처리하고, 에러응답과 에러응답의 데이터를 어떻게 할 것인지도 백-프가 서로 맞춰야 하는 사항이라는 것을 알았다.
4. state로 써야할것 vs 변수로 쓸 수 있는것
👩🏻💻 구상
리팩토링 전엔 totalPrice, duscountPrice, deliveryFee를 모두 별도의 state로 만들었다.
그러나 이 state들은 모두 cartData를 활용한 값이므로 변수로 만들어 사용할 수 있었다.
리팩토링을 통해 불필요한 state를 보두 변수로 만들었다.
cartData가 변경되면 이 컴포넌트 전체가 재실행 되면서 변수의 값도 바뀌게된다.
🔆 불필요한 state 줄이기
<state가 아닌 사항들>
- 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
- 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.
👉 리팩토링 후
: 이렇게 기존에 사용하고 있는 state값을 활용하면 불필요한 state를 만들지 않을 수 있다.
5. 장바구니 - 수량변경 버튼을 연속해서 눌러도 한번에 POST요청하기
🔆 setTimeout과 clearTimeout을 이용하여 마지막 post 요청만 실행되게 됨.
장바구니 수량변경 또는 삭제 버튼 클릭시마다 post 요청을 한다면, 수량변경을 연속으로 할 때마다 불필요하게 많은 api호출이 일어날 것이다.
따라서 setTimeout을 이용해, 최종 변경된 데이터만 post요청하게 처리했다.
6. 금액 천단위 구분
toLocaleString 메서드를 이용하여 상품 가격에 천단위 콤마를 나타내었다.
> toLocaleString() 포트팅 보러가기
