해결했던 과정들을 기억하고, 해결 방법을 기억하고, 그렇게 한층 성장하고!
▶ 공통된 useState를 커스텀 훅으로 분리해 재사용성과 코드 효율성 향상
🙋🏻문제 : 공통적으로 useState가 과도하게 많이 사용되어 코드 효율성 저하되는 것에 대해 고민하였다.
🏃🏻♀️해결 과정 : 재사용성을 높이기 위해 커스텀 훅으로 useInput을 만들자고 결심!
⚒️해결 : 커스텀 훅으로 useInput 컴포넌트를 만들고, useState대신 useInput으로 사용해주어 코드의 재사용성을 높이고 코드 효율성을 향상 시켰다.
hooks/Useinput.js
import { useState } from "react";
const useInput = () => {
const [value, setValue] = useState("");
const handler = (event) => {
setValue(event.target.value);
};
return [value, handler];
};
export default useInput;
▶ 적절한 시간 내에 콘텐츠를 로드 할 수 있도록 스켈레톤으로 UI 개선
🙋🏻문제 : 로딩시간 동안 컨텐츠를 미리 예고하는 사용자 친화적 웹사이트에 대한 고려
🏃🏻♀️해결 과정 : 스켈레톤 컴포넌트를 만들기는 했으나, 어떻게 적용해야할지를 몰라 구글링을 많이 했다. 또한 위치도 처음엔 쉽게 감이 잡히지 않았다. 적합하다고 생각되는 위치에 넣어가면서 구현해갔다.
⚒️해결 : 스켈레톤 컴포넌트를 만들고, 리액트쿼리의 isloading과 isfetching, 조건문을 활용해서 해결하였다.
▶ axios통신시, 백엔드에서 만든 response의 값은 뽑히지만, error값은 뽑히지 않는 오류
🙋🏻문제 : axios에서 response의 값은 then으로 뽑히지만, error값은 catch로 출력되지 않는 오류가 발생했다.
🏃🏻♀️해결 과정 : 1. error를 console에 찍어보며 계속 값을 객체나나 배열로 구해보려고 했다 ⇒ “error”가 계속 string으로 찍히기만 했다.
2. error.response / error.data 값들이 모두 찍히지 않아서 백엔드 측 문제가 아닐까 생각하게 되었다.
⚒️해결 :
여기서 return Promise.reject(”error”,error) 로 막혀있었다. 이 코드 때문에 계속해서 error일때 우리가 만들어 놓은 “error”만 스트링 값으로 찍히게 되었다. Promise.reject()안에 들어가는 인자의 순서에 따라 기능을 몰랐기 때문에 발생한 오류였다고 생각한다.
instance.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
const OriginRequestError = error.config;
console.log(OriginRequestError);
if (error.response.status === 401 && !OriginRequestError._retry) {
OriginRequestError._retry = true;
const refresh_token = getCookie("refresh_token");
if (refresh_token) {
try {
console.log("재발급중...");
const response = await axios.get(
`${process.env.REACT_APP_SERVER_URL}/token`,
{
headers: {
Refresh_Token: `${refresh_token}`,
},
}
);
const access_token = response.headers.authorization;
setCookie("access_token", access_token);
OriginRequestError.header.Authorization = `${access_token}`;
console.log("재발급 완료, 재실행");
return baseURL(OriginRequestError);
} catch (error) {
//두가지 토큰 모두 만료시
removeCookie("access_token");
removeCookie("refresh_token");
alert("세션이 만료되었습니다. 다시 로그인해주세요!");
window.location.href("/");
return Promise.reject(error);
}
}
}
return Promise.reject(error);
}
);▶ map 좌표를 구할 때, maps와 Geocoder를 불러오지 못하는 오류
🙋🏻문제 : 위치에 따른 좌표(위도,경도)를 구하는 과정에서 maps와 Geocoder를 불러오지 못하는 오류가 발생했다.
🏃🏻♀️해결 과정 : 1. 필요한 라이브러리를 설치했다. ⇒ 라이브러리와 관련이 없었음
2. kakao map API_KEY를 발급하는 과정에서, web platform등록을 localhost:3000이 아닌, localhost:8080으로 들어가 있었다. ⇒ 설치 후 maps는 해결이 되었으나, Geocoder는 해결이 되지 않았다.
⚒️해결 : public/index.html에 script를 추가해주었다. 이 때 API_KEY를 넣어주었다.
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?{APP_KEY}"
></script>