서버요청 최소화 - dltmdrbtjd/HANG GitHub Wiki

서버에 요청을 줄일수있는 방법은 뭐가 있을까?

• 혹시 코드중에 서버에 불필요한 요청을 계속 부르는등의 요청을 하고있는게 없나 고민해보고 어떤식으로 개선하면 좋을지에 대해서 고민하다가 수정을 진행해도 될것같은 부분들은 요청을 최소화하면서 리팩토링을 진행하였습니다.
• 마이 페이지 및 차단목록 그리고 로그인 검증과정등등에서 최대한 서버요청을 줄이려고 노력했었다.

로그인 상태 검증

• 리팩토링전 로그인 상태 검증은 App.js에서 즉 컴포넌트 최상단에서 항상 api를 통신하면서 로그인 상태를 매번 검증했었는데 애당초 서버에서 구지 api를 따로 만들어서 사용하지 않아도 알아서 검증이 이루어지고 검증되지 않았을시에는 에러를 보낸다고 알게되었다. 그래서 구지 매번 이런 쓸데없는 통신은 필요없다고 판단이 되었고 이 검증과정을 axios의 미들웨어에서 처리하면 훨씬 깔끔하지 않을까? 라는 생각이들어 axios의 interceptors를 활용하여 로그인검증을 처리하였다.

instance.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json; charset=utf-8';
  config.headers['X-Requested-With'] = 'XMLHttpRequest';
  config.headers.token = getToken();
  config.headers.Accept = 'application/json';
  return config;
});

instance.interceptors.response.use(
  (response) => {
    return Promise.resolve(response);
  },
  (error) => {
    const path = window.location.pathname;

    if (error.response.status === 307) {
      setToken(error.response.data.newAccessToken);
      setUserInfo('userInfo', jwtDecode(getToken()));
      history.go(0);
    } else if (
      error.response.status === 401 &&
      !['/signup', '/signin', '/onboarding'].includes(path)
    ) {
      window.alert('토근이 만료되었습니다. 다시 로그인해주세요.');
      delToken();
      delUserInfo('userInfo');
      history.push('/signin');
    }
    return Promise.reject(error);
  },
);