저희팀은 만료되었을 때, 재발급을 받는 방식을 시간상 구현하지 못했어서, 추가적으로 리팩토링을 진행하였습니다. import axios, { AxiosRequestConfig } from 'axios'; import { postTokenRefesh } from '@/api/queryfn'; import { RefreshToken } from '@/types/tokenApiType'; export const EXPIRED_TIME = 1000 * 60 * 60 * 23; export const refreshInterceptor = async ( config: AxiosRequestConfig, ): Promise => { const expiresIn = window.localStorage.getItem('e..
분류 전체보기
메인 프로젝트 리팩토링을 하면서 axios 인터셉터에 대해 접하게 되었는데, 저는 아직 axios 인스턴스에 대해서도 잘 모르는 것 같아 인스터와 함께.. 나아가 인터셉터도 알아볼까합니다. ● 🥹 Axios 인스턴스가 뭔데..? 일반적으로 쓰는 axios에서 더 나아가 instance를 설정해줄 수 있습니다. 즉, 기본 값을 설정해줄 수 있는게 인스턴스라고 생각하면 됩니다. const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); const instance = axios.create({ withCredentials: true })..
포트폴리오를 만들면서 지금까지 참여했던 프로젝트에 대한 내용을 소개하는 페이지를 만들었는데 각자 좀 구성이 달라서 페이지별로 파일을 만들었는데, 스터디를 하면서 여러 사람들이 재사용성을 고려해서, 본문에 대한 내용 파일과 디자인 틀만 만들어 놓고 불러오면 되지 않냐는 말을 들었습니다. ● dynamic import를 해야했던 과정 말로 설명하기 애매한데, 수정하기 이전에 저는 코드에 직접적으로 텍스트를 주입하면서 렌더하고 있었습니다. import { ReactComponent as Github } from '../../../public/icon/github.svg'; import { ReactComponent as Web } from '../../../public/icon/link.svg'; import..
코드 분할이나, 리팩토링을 마친 이후에 오늘은 앞으로 최적화를 어떻게 할건지에 대해서 회의를 마쳤습니다. 앞으로 최적화할 부분 예시 이미지 요소에 [alt] 속성 없음 사진 webp로 변환 시맨틱 태그도 수정 오늘 포스팅은 이전에 준석님께서 리팩토링해주셨던 부분이 잘 이해가 가지 않았어서 오늘 설명을 듣고 올리는 포스팅입니다. ● React-Router Loader 설정 이전에 저희팀은 accessToken이 없으면 다른 페이지 이동 되게 설정했었는데요. 코드는 아래와 같습니다. useEffect(() => { if (!accessToken) { navigate(Path.Login); } }, [accessToken, navigate]); useEffect를 사용해서, 렌더 이후에 없는지 판단하고 다시 ..
오랫동안 포스팅을 하지 못했었는데,, 준석님의 예비군과 + 저의 알바 근무 때문에 시간이 잘 안맞았던 관계로 포스팅을 길게 하지 못했었습니다. 그래도 각자 작업을 했었고, 또 대체로 3차 목표로 잡았던 리팩토링은 대부분 로직분리가 많았으므로, 딱히 포스팅할 내용도 없었네요. ● 3차 목표 ❍ Page CopyPopUp 페이지 삭제하기 query 관련 함수 useQuery, useMutation 모두 훅으로 처리하기 ESC 버튼 누를시 이전 페이지로 이동 함수 util로 빼기 중복으로 사용되고 있습니다. 추가로 다른 PopUP 페이지 혹은 PopUp Component에도 적용하면 좋지 않을까요? ❍ FeedPopUP(다은) isSucess와 getGuestFeed.isSucess 일 때 컴포넌트 구성이 완..
