24.11.07 FE 리팩토링

[DeveloperRyou]

24.11.07 FE 리팩토링 1차

우선순위 상

1. prettier 를 개선하자

• import 자동정렬 + classname 자동정렬 도입

2. lint를 개선하자

• 개선점이 있으면 찾고, 필요없는 lint는 disable한다

3. import 절대경로 방식으로 통일 필요 (일부 상대경로로 작성된 부분 있음)

• 상대경로는 모두 절대경로로 통일

우선순위 중

우선순위 중을 작업하면서, 200줄 넘어가는 파일은 쪼개자

1. 공통 컴포넌트 관리
   카드 컴포넌트에서 주로 중복해서 사용하는 컴포넌트들을 공통 컴포넌트로 묶어서 관리하자

• 프로젝트 전반적으로 사용하는 모달 컴포넌트 관리 (Modal / Dialog 이름 통일) - 정원님 대응중
• 매도, 매수 등에서 사용하는 chip 컴포넌트 공통관리
• Icon 공통 컴포넌트로 관리
• textfield, select, autocomplete 등 input 태그들을 더 이쁘게 개발 (지금은 투박한 느낌이 있음)

2. 테이블 컴포넌트 분리
   root/tables 디렉토리에 테이블 관련 파일을 관리하자

• 컬럼 파일은 root/tables/...Columns.tsx 로 관리하자
• 컬럼에 들어가는 Cell이 3줄 이상일 경우 (스타일 소요가 많다면) 컴포넌트로 분리하고 root/tables/row-cell/...Cell.tsx 로 관리하자

3. api 관리방식 개선
   네트워크 호출 구문을 useQuery에 직접 넣어 불필요하다고 느껴지는 네트워크 함수를 제거하자

• 네트워크 함수를 useQuery안에 넣어버리자 (경량화) - 류성민 진행중
• select option으로 데이터를 가공하는 함수를 사용하자
• useQuery 여러개를 커스텀 훅으로 묶는 과정에서 개선점을 찾아보자
  I. query를 직접 return 하지말고 필요 데이터만 return하자 (useMemo로 추가적인 개선도 가능할듯)
  ii. 가능하다면 mutation만 리턴하자? (mutation만 리턴하는것이 더 좋다고 판단된다면)
  iii. 커스텀 훅으로 묶는 도메인에 대한 분류 기준을 명확히 세워보자
• useQuery를 거치지 않는 api호출은 없게 하자

4. 전역변수 관리방식 개선

• 전역변수 관리방식 개선을 위한 초기 작업으로 jotai 선언문을 파일 하나로 묶어두자

우선순위 하

• 헥스코드를 전부 삭제하고 토큰으로 관리하자

• readme 작성하자

• 프로젝트 전반적으로 사용하는 type(특히 데이터 타입 등)을 index.d.ts로 관리하자

• component -> shared로 이름을 변경

[nrudev]

우선순위 상: import 절대경로 방식으로 통일 , 우선순위 중: 2. 테이블 컴포넌트 분리 작업했습니다. #123