✂️ 분배된 이슈

• eject 되돌리기
• apis 개선 (axios 타입, 인스턴스)
• 로딩 jotai suspense

🚩 구현 목표

• eject 되돌리기
• 로딩 jotai suspense로 변경
• apis 모듈 개선

🍀 세부 목표

• eject 되돌리기
• jotai suspense 학습 및 로딩 구현
• apis 모듈 개선
  • axios interceptor 적용
  • axios response 타입 적용

🖥️ 구현 내용

Axios interceptor 적용

• 현재 코드

  // apis.ts
  import axios from 'axios';
  
  const request = async (
    path: string,
    method: 'get' | 'post' | 'delete',
    data?: Record<string, unknown> | undefined
  ) => {
    const apiServerURL =
      process.env.REACT_APP_CLIENT_ENV === 'development'
        ? process.env.REACT_APP_API_SERVER_URL_DEVELOPMENT
        : process.env.REACT_APP_API_SERVER_URL_PRODUCTION;
  
    try {
      const response = await axios({
        url: `${apiServerURL}${path}`,
        method,
        withCredentials: true,
        data
      });
  
      ...
    } catch (error) {
      console.warn(error);
    }
  
    return { ok: false };
  };
  
  export default {
    getAllArea: () => {
      return request('/seoul', 'get');
    },
    ...
    addBookmark: (areaName: string, userId: string) => {
      return request(`/auth/${userId}/bookmark/${areaName}`, 'post');
    },
    deleteBookmark: (areaName: string, userId: string) => {
      return request(`/auth/${userId}/bookmark/${areaName}`, 'delete');
    }
  };
  

  • 바닐라 자바스크립트에서 썼던 fetch 모듈을 조금 변경해서 그대로 적용했다.

• 변경 코드

  const apiServerURL =
    process.env.REACT_APP_CLIENT_ENV === 'development'
      ? process.env.REACT_APP_API_SERVER_URL_DEVELOPMENT
      : process.env.REACT_APP_API_SERVER_URL_PRODUCTION;
  
  const axiosInstance = axios.create({
    baseURL: `${apiServerURL}`,
    withCredentials: true
  });
  
  const request = async (
    path: string,
    method: 'get' | 'post' | 'delete',
    data?: Record<string, unknown> | undefined
  ) => {
    axiosInstance.interceptors.request.use(
      config => {
        config.method = method;
        if (data) {
          config.data = data;
        }
  
        return config;
      },
      error => {
        console.log(error);
        return Promise.reject(error);
      }
    );
  
    try {
      const response = await axiosInstance(path);
  
      return response.data;
    } catch (error) {
      console.warn(error);
    }
  
    axiosInstance.interceptors.response.use(
      response => {
        return response.data;
      },
      error => {
        console.log(error);
      }
    );
  
    return { ok: false };
  };
  

📖 학습 내용

eject 되돌리기

eject 왜 했는가?

• CRA와 타입스크립트가 어떻게 동작하는지 궁금해서 뜯어봤다.

  관련 링크

  • 타입스크립트 컴파일 결과물이 어디에 생성되는가?
  • 타입스크립트 컴파일과 번들링 순서는 어떻게 되는가?
  • bundle.js 는 어디에 있는가?

왜 되돌리는가?

• 궁금한 점이 어느정도 해소되었고 더이상 eject된 파일들을 건드릴 필요가 없기 때문에 되돌리려 한다.
• eject를 쓰면 안 되는 이유에 대해 학습
  1. Webpack, Babel 등 CRA의 모든 설정을 직접 유지보수 해야 한다.
  2. CRA의 장점인 One Build Dependency를 잃게 된다. 패키지를 설치할 때 다른 패키지들과의 의존성을 신경써야 한다.

되돌리는 방법

• 없다. 대신 일일이 삭제/설치를 통해 복구

1. srcipts , config , node_modules 디렉토리 삭제
2. react-scripts 모듈 설치
3. package.json 에서 scripts 속성 수정

   • 수정 전 코드

     "scripts": {
       "start": "cross-env REACT_APP_CLIENT_ENV=development node scripts/start.js",
       "build": "cross-env REACT_APP_CLIENT_ENV=production node scripts/build.js",
       "test": "node scripts/test.js"
     },
     

   • 수정 후 코드

     "scripts": {
       "start": "cross-env REACT_APP_CLIENT_ENV=development react-scripts start",
       "build": "cross-env REACT_APP_CLIENT_ENV=production react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
     },
     

참고 사이트

• 되돌리는 방법 참고
  • 링크
  • 링크
• eject 사용 시 단점 참고
  • 링크

Axios interceptor

axios

🚧 Trouble Shooting

jotai suspense 에러

🎸 기타

• suspense
  • 링크
  • 링크
  • 링크
  • 링크
• jotai suspense
  • 링크
  • 링크