관심사 분리 연습

:: 서버 요청 클라이언트 생성 로직

// api/index.js

import axios from 'axios';

const sharedConfig = {
  timeout: 10000,
  validateStatus: (status) => status === 200,
};

const movieApi = axios.create({
  baseURL: 'http://localhost:8000/movies',
  ...sharedConfig,
});

const memberApi = axios.create({
  baseURL: 'http://localhost:8000/members',
  ...sharedConfig,
});

export { movieApi, memberApi };

• 각 API의 특화된 설정에 공통 설정을 추가하여 axios 클라이언트를 생성한다

::: axois 설정 검토

url: 기능에 따라 다름 => 매개변수 처리
method: 기능에 따라 다름 => 매개변수 처리
data: 요청 바디로 전송될 데이터, 기능에 따라 사용 여부 갈림
params: url 매개변수, 기능에 따라 사용 여부 갈림

transformRequest: 요청 가공, 미사용
transformResponse: 응답 가공, 미사용
headers: 커스텀 헤더, 미사용
paramSerializer: url 매개변수 직렬화, 미사용
withCredentials: cross-site access control 요청이 필요한 경우 사용하지만 미사용
adapter: 응답을 커스터마이징, 미사용
auth: 인증 헤더 사용 여부, 미사용
responseType: 응답할 데이터 타입, 기본값인 json 사용
responseEncoding: 응답을 디코딩 할 때 사용할 인코딩 스펙, 기본값인 utf8 사용
xsrfCookieName: xsrf 토큰 값으로 사용할 쿠키 이름, 미사용
xsrfHeaderName: xsrf 토큰 값을 운반하는 헤더 이름, 미사용
onUploadProgress: 업로드 프로그레스 이벤트 처리, 미사용
onDownloadProgress: 다운로드 프로그레스 이벤트 처리, 미사용
maxContentLength: 응답 콘텐츠의 바이트 크기 제한 설정, 미사용
proxy: 프록시 서버 설정, 미사용
cancelToken: 요청 취소 토큰 설정, 미사용
maxBodyLength: 요청 콘텐츠의 크기 제한 설정, 미사용(node 전용)
maxRedirect: 리디렉트 제한 설정, 미사용(node 전용)
socketPath: unix 소켓 설정, 미사용(node 전용)
httpAgent: 커스텀 http 요청 에이전트 설정, 미사용(node 전용)
httpsAgent: 커스텀 https 요청 에이전트 설정, 미사용(node 전용)
decompress: 응답 바디 자동 압축 풀기 설정, 미사용(node 전용)

:: 서버 요청 비즈니스 로직

// hooks/useMovies.js

import { useState } from 'react';
import { movieApi } from '../api';

const useMovies = () => {
  const [movies, setMovies] = useState([]);

  const getAllMovies = async () => {
    const { data } = await movieApi.get('');
    setMovies(data);
  };

  const toggleLikeById = async ({ id, like }) => {
    const { data } = await movieApi.patch(`/${id}`, {
      like: !like,
    });
    const newMovies = movies.map((movie) =>
      movie.id === data.id ? data : movie
    );
    setMovies(newMovies);
  };

  return { movies, getAllMovies, toggleLikeById };
};

export default useMovies;

• 생성된 axios 클라이언트로 서버에 보낼 요청을 기능별로 구현

:: 개선할 점

• 오류 처리 관심사만 분리하고 싶은데 좋은 방법이 떠오르지 않는다