[TIL] 0102

axios추상화와 interceptor설정

1. axios instance를 만들어 공통 속성을 모듈화한다(공통 속성이 적용된 axios함수라고 할 수 있다)
2. 만든 instance에 interceptor를 설정한다
3. 요청/응답의 성공/실패 직전의 처리의 대한 로직을 작성할 수 있다
   -> callback함수로 작성하는데 들어오는 값을 인자로 받아 그대로 반환하는데,
   return문 전에 중간 로직을 작성할 수 있다
4. interceptor를 적용한 instance를 export한다.
5. instance실행 시 인자로 url, 메소드, data를 넣어서 서버 요청을 할 수 있다.

emotion에 반응형 적용하기

공통 스타일 폴더에 디바이스 사이즈와 미디어쿼리 속성 값을 객체로 정의해준후
컴포넌트 파일 내에서 import해서 사용하는 게 themeProvider를 사용하는 것보다 더 간단한 방법같다.

// theme.jsx

const deviceSizes = {
  mobile: "375px",
  tablet: "768px",
  laptop: "1024px",
};

const device = {
  mobile: `screen and (max-width: ${deviceSizes.mobile})`,
  tablet: `screen and (max-width: ${deviceSizes.tablet})`,
  laptop: `screen and (max-width: ${deviceSizes.laptop})`,
};

출처