📖 프로젝트 폴더구조 및 설명

1. 프로젝트 폴더구조

📷 focal
├─ .github
│  └─ PULL_REQUEST_TEMPLATE.md ────── ⚙️ PR 템플릿
│─ .gitignore
│─ .prettierrc   ──────────────────── ⚙️ prettier 설정 파일
│─ .eslintrc     ──────────────────── ⚙️ eslint 설정 파일
├─ 📂 public
│  ├─ favicon.ico
│  └─ index.html
└─ 📂 src
  ├─ 📂 api     ─────────────────────  Axios 인스턴스 및 API 관련 모듈 함수
  ├─ 📂 assets  ─────────────────────  아이콘, 이미지 등 정적 리소스
  ├─ 📂 states ─────────────────────── 리코일 관련 폴더
  ├─ 📂 components
  │  ├─ 📂 common ─────────────────── 공통 컴포넌트
  │  ├─ 📂 Chat ───────────────────── route path가 chat인 페이지에서 사용되는 컴포넌트 
  │  ├─ 📂 Follow ─────────────────── route path가 follow인 페이지에서 사용되는 컴포넌트
  │  ├─ 📂 Login ──────────────────── route path가 login인 페이지에서 사용되는 컴포넌트
  │  ├─ 📂 Post ───────────────────── route path가 post인 페이지에서 사용되는 컴포넌트
  │  ├─ 📂 Product ────────────────── route path가 product인 페이지에서 사용되는 컴포넌트
  │  ├─ 📂 Profile   ──────────────── route path가 profile인 페이지에서 사용되는 컴포넌트
  │  ├─ 📂 Search ─────────────────── route path가 search인 페이지에서 사용되는 컴포넌트
  │  └─ 📂 Signup ─────────────────── route path가 signup인 페이지에서 사용되는 컴포넌트
  ├─ 📂 layouts   ────────────────────  공통으로 사용되는 레이아웃
  ├─ 📂 pages   ───────────────────── 라우팅이 적용된 페이지들을 모아놓은 폴더
  ├─ 📂 routes ───────────────────── 라우트와 관련된 파일들을 모아놓은 폴더
  │  ├─ PrivateRoute.js
  │  ├─ PublicRoute.js
  │  └─ Router.js
	├─ 📂 states ──────────────────── Recoil 관련 폴더
  ├─ 📂 hooks ─────────────────────── 커스텀 훅 폴더
  │  ├─ useDebounce.js
  │  ├─ useHandleResizeHeight.js
  │  ├─ useModal.js
  │  └─ useScrollBottom.js
  ├─ 📂 constants   ───────────────── 상수
  ├─ 📂 utils    ──────────────────── 공통으로 사용되는 유틸 함수
  │  ├─ converTime.js
  │  ├─ getDate.js
  │  ├─ getProperImagSrc.js
	│  └─ handleImageError.js
  ├─ App.js
  ├─ index.js
  └─ GlobaledStyled.js

---

2. 전역상태관리 라이브러리로 Recoil을 선택한 이유

• 저희는 전역상태관리 라이브러리로 Redux와 Recoil 중 선택하고자 하였습니다.
• 먼저 Redux는 상태, 액션, 리듀서로 구성되며 엄격한 패턴을 따르는 상태관리 라이브러리입니다. 대규모 애플리케이션의 복잡한 상태 관리에 적합하며, 많은 상태 변화가 필요할 때 유용합니다.
• 하지만 저희 프로젝트는 비교적 소규모 프로젝트여서 복잡한 상태관리가 필요하지 않았으므로 Redux는 배제시켰습니다.
• 반면 Recoil은 상대적으로 간단하고, React 문법 친화적인 라이브러리입니다. 전역상태를 손쉽게 관리하자는게 주된 목표였기때문에 여러기능을 필요로 하진 않았고, 그 때문에 비교적 간단한 Recoil을 선택하게 되었습니다.

---

3. 반복되는 코드를 제거와 코드 효율을 위해 Axios Instance 사용

1) Axios Instance를 만들어 쓰기전

const token = localStorage.getItem('token')
await axios({
    url: `${process.env.REACT_APP_BASE_URL}post/${post_id}`,
    method: 'PUT',
    data: {
      post: {
        content,
        image: image.join(),
      },
    },
    headers: {
      Authorization: `Bearer ${token}`,
  },
});

• api 요청을 할 때마다 해당코드를 일일이 다 써야해서 코드가 반복되고, 길어진다는 단점이 있었습니다.

2) Axios Instance와 Interceptor 사용

• ./api/instance/authInstance.js

  import axios from 'axios';
  
  const authAPI = (url, options) => {
    return axios.create({ baseURL: url, ...options });
  };
  
  const authInstance = authAPI(process.env.REACT_APP_BASE_URL);
  
  authInstance.interceptors.request.use(
    (config) => {
      const token = localStorage.getItem('token');
      config.headers['Content-Type'] = 'application/json';
      config.headers['Access-Control-Allow-origin'] = '*';
      config.headers['Authorization'] = `Bearer ${token}`;
  
      return config;
    },
    (error) => {
      console.log(error);
      return Promise.reject(error);
    },
  );
  
  export default authInstance;

  • Axios interceptor는 애플리케이션에서 처리하기 전에 Axios라이브러리에서 수행한 HTTP 요청 또는 응답을 가로채고 수정하는 데 사용할 수 있는 기능입니다. 요청에 인증 헤더 추가, 오류 처리 또는 요청 및 응답 로깅과 같은 다양한 용도로 사용할 수 있습니다.

• 실제 사용시

  await authInstance.put(`/post/${post_id}`, {
    post: {
      content,
      image: image.join(),
    },
  });

  • baseUrl, headers, timeout 등을 여러 곳에서 반복해서 작성할 필요가 없어 코드 효율을 높일 수 있게 되었습니다.