개발규칙: 코딩컨벤션

• 폴더구조 → 프로젝트 세팅하면서 정하기

/src
│ App.tsx
│ Index.tsx
│ react-app-env.d.ts
│ Routes.tsx
├── /@type
│ └── index.d.ts
├── /assets
│ ├── Images
│ └── Svgs
├── /components
│ ├── /Commmon
│ ├── /Direct
│ ├── /Home
│ ├── /Login
│ └── /Signup
├── /pages
│ ├── /Direct
│ ├── /Home
│ └── /Login
├── /styles
│ ├── /UI
│ ├── globalStyles.ts
│ ├── styled.d.ts
│ └── theme.ts

• js, ts, style (네이밍)

네이밍

• 상수: 대문자 + 스네이크 네이밍 방법론 중복 상수 폴더로 관리?
• 줄임말 쓰지 않기 풀 네임 (btn말고 button으로)
• 동사 + 명사 → getValue | getRandomNumber | fetchUsers | onChangeInput
• 이벤트
• 현재 컴포넌트 내 이벤트 - on + eventName : onChangeInputValue
• props로 받는 것 - ~handler : changeInputValueHandler
• 함수 네이밍 규칙 동일하게 따르기
• 상태관리
• 2 depth이상 넘겨줄 때, 형제 컴포넌트는 전역 상태로 관리하기
• 타입관리
• type 키워드를 사용해서 타입을 정의한다.(interface X, https://hanpur.notion.site/ts-interface-type-2645a8c776b44902aca57d8225f75401)
• 재사용할 타입만 분리하여 전역으로 관리 (index.d.ts파일에서) - 재사용안하는 건, 해당파일의 최상단에 정의
• 타입 별칭 네이빙 방법론으로는 파스칼 케이스 방법론을 따른다.
• 스타일
• z-index는 100단위로 만약 사용했다면 꼭 말하기!!!
• emtion props스타일 가이드 (object 스타일 사용하기)

// Or with object styles
const Image1 = styled('div')<ImageProps>(
  {
    backgroundSize: 'contain' // props가 안들어가는 속성들
  },
  props => ({ // props가 들어가는 속성들을 처리
    width: props.width,
    background: `url(${props.src}) center center`
  })
)

• 주석달기 !! tsdoc → 설명이 필요한 부분에서 주석달기(모든 건 x)
• 작업용 주석(각자 TODO, userID, 언제할거다)
• 설명용 주석: 설명이 필요한 부분
• vscode todo tree

/*
* 어떤 일을 하는지 
* 매개변수
* 리턴값 
*/

• 주석을 전역 타입에서 사용해보고, 추후 논의
• 컴포넌트
• type -> style -> component 순서
• 컴포넌트 정의를 함수 표현식 (arrow)
• <></>
• rendering 관련 return문 생략 or 작성(map, filter, etc…) / 일단 보류
• 각 컴포넌트 파일은 하나로 분리한다. 자식 컴포넌트를 컴포넌트화 시키게 된다면 새로운 파일로 분리해서 작업을 진행한다. (논의 필요)
• 경로
• alias 절대 경로 이름 지정
• @: src는 엣@ 사용
• 같은 폴더 위치라면 상대경로로 그 외에는 절대경로 사용