TIL / 20210812

✍ 오늘한 일

1.최근 검색 내역 보이기
2.axios 모듈화 고민

Search 기능에 최근 검색 내역 보이기

최근에 검색한 내역을 localstorage에 보관하여 사용자가 쉽게 재검색할 수 있도록 하였다.
수입 맥주 중에 길고 어려운 이름이 많아 이 기능을 꼭 넣고 싶었다.

loacaStorage에 단어들을 배열형태로 담으려 했는데 localstoraged에 있는 값을 제거할 때는 key값으로 접근하기 때문에 결과적으로 객체 형태로 저장해야한다.

처음부터 localStorage.removeItem을 좀 더 찾아봤더라면 두번 작업하지 않았을텐데
작업을 두번했다.. 새로운 것을 적용할 때는 자세히 찾아보고 적용하자.

적용 전(배열로 저장)

//로컬스토리지에 값 저장하기
localStorage.setItem("recent_words",recent_words.concat(search_beer[0]?.name_korean));
//저장한 값 불러오기
const [recent_words, setRecent_Words] =useState(localStorage.getItem("recent_words").split(','));
//값 제거하기
localStorage.removeItem(`${word}`);

axios interceoptors 사용

axios를 모듈화해서 사용하는데 token을 가지고 있음에도 불구하고, 새로고침 전까지 axios 모듈화한 파일의 함수들이 바로 동작을 안하는 문제가 있었다.

이 때문에 header가 필요한 API 요청들이 모두 거절되는 상황이 발생했다.

결론적으로 같은 파일 내에서 비동기 함수의 값을 꺼내 쓰기 위해 interceoptors를 사용하였고, axios 생성, 요청과 응답에 대한 전 후 처리가 가능해졌다.

headerAxios.interceptors.request.use(
axiosInstance.interceptors.request.use(
    function (config){
        const token = getCookie("_osid");

        config.headers.common["Authorization"] = `Bearer ${token}`;

        config.headers.common["Secretkey"] = key;
        return config
);