2주차 리팩토링

리팩토링 개발 2주차

Type ( 타입 정리 )

• type으로 선언한 것도 있고 interface로 선언한 것도 있는데 이거 통일해야 할듯 => interface 쓰는 이유가 뭐임??? 상속때문인가?? 확장 그런느낌?? => 확장성떄문에 interface 쓰는거 같음
  => 굳이 type이랑 interface를 통일하지 않아도 될거 같음
• type 겹치는거 정리

Atomic ( 파일 / 폴더 관리 )

• 같은 주제들 폴더로 구분하기 but 너무 깊이가 깊어지지 않도록
• template에 atom으로 도배된 애들 molecules나 organism으로 분리

TeamSettingTemplate

• TeamButtonContainer -> organism(props : {type})으로 분리
  • TeamCreatePage도 같은부분 수정

State ( 상태 관리 )

• 모달(DropDown) 상태관리

• 유저 정보 "{ id:string; image:string; location:string; sex : string; age : number; info : string; }"

• 팀 정보 "{ id:string; image:string; location:string; sex : string; age : number; info : string; member : {user[]} }"

• 소개 데이터 "{ user[] or team[] }"

• 채팅 정보 "[{ chatRoomID:number, member : user[] chatMessage : [{ from : string; message: string; read: boolean; source : string; }] }]"

• 요청 정보 "{ from:string; to : string; info: user; state : string; }"

• 참여 메세지방 정보 "{ joinChatRooms : [{ chatRoomID : number; notReadNum : number; }], }"

eslint

• /* eslint-disable comma-dangle */

  • prettier("trailingComma": "es5",로 후행콤마 설정)과 eslint("comma-dangle": ["error", "never"])로 후행컴마가 적용이 안됐다.
  • eslint에서 "comma-dangle": "off", 를 적용하여 에러 처리하였다.

• /* @jsxImportSource @emotion/react */

  • cra는 babel설정을 막아뒀기 때문에 customizer-cra를 설치하여 수정해주었다.
  • 참고 사이트
  • CRA에서 /** @jsxImportSource @emotion/react */ 요놈 없애려고 해봄
  • 링크에서 말하는 대로 모듈 설치하고 바벨 설정 다 따라했지만 적용되지 않음

• /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

  • a tag 나 Button 태그를 제외한 태그에 onClick 이벤트 같은 interactive한 요소가 있을 시 발생하는 에러

• /* eslint-disable react/destructuring-assignment */

  • props.test 와 같이 구조분해 하지 않은 부분에 대해서 에러 발생,, ex) const { test } = props 로 구조분해를 해야 에러 발생하지 않음

• /* eslint-disable no-unneeded-ternary */

  • const test = a ? a : 1 과 같은 경우 const test = a || 1 로 바꾸라함.

---

import 순서 정리

경로 처리

Route URL 네이밍

cloud mysql db 테스트

Styled

• 비슷한 것들 props로 type같은거 받아서 중복을 좀 제거할 수 있도록
• 스타일 확장