프로젝트: React(TypeScript) 기반의 동적 UI 개발(7)-axios interceptors, kakao 주소 API, <React.Fragment key={id}>

장바구니 목록

1. 사용자가 장바구니에 담은 내역을 확인
2. 선택한 도서 아이템의 수량과 가격 합계를 표시
3. 장바구니 담은 도서 아이템을 삭제
4. 각 도서 아이템을 선택하여 주문서 작성

---

💢작성중 ERR_CONNECTION_REFUSED 에러가 뜸💢

찾아보니 HTTP 응답을 클라이언트에 전송한 후, 다시 헤더를 설정하려고 할 때 발생하는 오류와 관련이 깊다고 했다.

 

문제는➡️로그인 후 토큰이 로컬 스토리지에 잘 저장이 되지만, 저장이 되기 전 서버로 요청을 보냈기 때문에, 토큰이 제대로 전송되지 않고, 코드를 다시 저장하거나, 새로고침시 토큰을 제대로 헤더로 보내는 상황이었다.

 

지금 새로고침없이 headersㅇ의 Authorization에서 토큰이 반영되지 않는 이유는

Axios 인스턴스가 처음 생성될 때만 토큰을 가지고 오기 때문에 interceptors를 통하여

토큰 리프레쉬를 해주면 해결이 된다.

 

추가한 코드

	axiosInstance.interceptors.request.use(
		(config) => {
			config.headers.Authorization = getToken() || '';
			return config;
		},
		(error) => {
			console.log(error);
			return Promise.reject(error);
		}
	);

createClient 함수가 처음 생성될때만 authorization에 토큰을 넣기 때문에

지금과 같은 코드로 사용하면 문제 없이 사용가능하다.

 

💢장바구니에서 모든 리스트를 삭제했을때 empty 컴포넌트가 보이지않음❗💢

새로고침을 하면 보여지지만, 당장 적용이 되지않아 코드를 살펴봤다.

커스텀 훅인 useCart에서 isEmpty로 boolean값을 받아와서 사용중이었는데,

useCart.ts

Cart.tsx

 

useEffect안에 isEmpty를 set하고 있어서 즉각 반영이 되지 않는것이었다.

그래서 처음에 carts로 디펜던시를 넣어서 처리했다.

💢이상하다.. 속도가 좀 느린 것 같다.

➡️➡️➡️알고보니 carts는 useEffect에서도 처리하고 있는데, 디펜던시를 carts로 주었더니 carts가 바뀌니 다시 useEffect이 실행되고, useEffect에서 carts를 set해주니 다시 useEffect이 실행되어 무한 반복이 되었다.🤣🤣

그래서 carts.length로 조건을 처리하였더니 즉각적으로 empty 컴포넌트가 보여지게 되었다.

 

✨✨그리고 하나 더 찾은 방법

Cart.tsx에서 isEmpty를 받아서 조건을 사용하는 코드를 그대로 두고,

커스텀 훅인 useCart.ts에서 useState로 관리하던 isEmpty를 없애고

return해줄때 isEmpty: carts.length === 0 의 boolean값을 보내줘도 해결이 된다.

isEmpty: carts.length === 0

---

주문서 작성

1. 장바구니로부터 넘어온 정보를 화면에 표시하고 보존
2. 주소, 수령인, 전화번호를 입력 및 검증
3. 데이터를 가공하여 서버에 전달

kakao 주소 API 사용하기

주문서에서 사용하는 주소검색 버튼을 사용하여 API 연결하기

yarn react-daum-postcode

react-daum-postcode와 같은 외부 모듈을 사용하여 구현하면 깔끔하게 사용이 되지만

강의에서는 kakao에서 제공하는 API를 그대로 가지고와서 사용하기로 하였다.

 

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

FindAddress.tsx

window.d.ts

주문내역

1. 저장된 주문 내역을 목록(table)로 표시
2. [자세히] 버튼으로 상세 정보 패널을 토글

💢<></> fragment에 직접 키값 넣어주기

💢그냥 빈 태그 생태에서는 key 값을 넣을 수 없어서 <React.Fragment key={id}></ React.Fragment > 값으로 넣어주면 키값이 들어가진다❗❗❗