[TIL] 0102

yooon26·2022년 1월 2일
0

2022 - TIL

목록 보기
2/90

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})`,
};

출처

profile
#프론트엔드

0개의 댓글