[수풀] 메인 프로젝트 변경점

1. TypeScript로 마이그레이션

• 리팩토링을 진행했을 때 시간을 제일 많이 잡아먹었다. jsx에서 tsx로 파일명을 바꾸는 순간 수많은 에러가...
• 잘한다고는 말 못하지만 꽤나 친해진 느낌이다.

2. src 속(상단) 폴더 구조

• 더미 데이터, 상수 값들을 다루는 폴더를 만들어 따로 관리하도록 수정했다.
• styles에 전역적으로 관리하는 스타일 값들을 넣어 관리하도록 수정했다(Global style, Theme).
• TypeScript로 마이그레이션 하면서 자주 사용하거나 공통으로 사용하는 타입들을 저장하는 폴더인 types를 추가해줬다.
• utils 폴더를 만들어 재사용하는 함수, 로직이 긴 함수들을 빼주었다.

 

3. Components

• components에 구분 없이 종류별로 넣었다가 기능별로 나누는 게 좋을 것 같아 기능별로 feature, layout, shared 폴더를 만들었다.
• feature - page에서 직접적으로 사용되는 컴포넌트들의 모임. 기능들이 모여있다.
• layout - 여러 페이지에서 공통으로 사용되는 컴포넌트. 주로 UI 축을 담당한다(header, sidebar, footer 등등...)
• shared - 얘도 여러 페이지에서 공통으로 사용되는 컴포넌트지만 비교적 작은 UI이며 하나의 기능을 담당 
• 따라서 shared는 어디에나 있는 재사용 가능한 UI들. layout은 여러 페이지의 주축을 이루는 UI를 담당. feature는 한 페이지의 주축을 이루는 기능의 집합을 담당한다.

 

4. apis

• requester 컴포넌트에서 기본적인 모듈을 만들어 api 관련 컴포넌트를 만들 때 requester를 사용 => 새로운 CRUD를 만들 때 코드를 간결하게 만들어준다.
• interceptors를 이용해 401 error가 났을 때, 로컬에 있는 token을 제거하여 에러를 미연에 방지해준다. 

• common에 method, path, token, nickname 등을 변수 할당해서 이게 정확히 무슨 역할을 하는 것인지 한눈에 보기 쉽도록 만들어주었다. 

5. hooks

• 커스텀 훅을 관리하는 폴더다. useQuery 관련 폴더와 useMutation을 만들어 공통적으로 만들어 사용할 수 있도록 했다. 마감일, 외부 클릭 시 창이 닫히는 커스텀 훅을 만들었다.

•  useQuery는 로직이 거의 비슷해서 하나의 컴포넌트로 재사용이 가능할 것 같은데 아직 구현을 못 한 상태다.. type 때문에 구현을 못하고 있다. mutation은 성공 시 useQuery의 key를 넣어줘서 리페칭 되도록 만들었다.