HIT 코드 컨벤션

네이밍

• 상수: 대문자 + 스네이크 네이밍 방법론
• 줄임말 쓰지 않고 풀 네임으로 이름을 작성한다.(btn말고 button으로)
• 함수 네이밍은 동사 + 명사 → getValue | getRandomNumber | fetchUsers | onChangeInput
• 이벤트 핸들러
  • 현재 컴포넌트 이벤트 핸들러 - on + eventName : onChangeInputValue
  • props로 받는 이벤트 핸들러 - ~handler : changeInputValueHandler
  • 함수 네이밍 규칙 동일하게 동사 + 명사 규칙을 따릅니다.

타입관리

• 타입 별칭을 사용해서 컴포넌트 props Type을 지정합니다.
  • 코드의 통일성을 위해 interface 키워드를 사용하지 않습니다. 인터페이스 vs 타입 별칭)
• 재사용할 타입만 분리하여 전역으로 관리 (index.d.ts파일에서) - 재사용안하는 건, 해당파일의 최상단에 정의
• 타입 별칭 네이빙 방법론으로는 파스칼 케이스 방법론을 따른다.

스타일

• z-index는 100단위로 만약 사용했다면 꼭 말하기!!!

• emtion props스타일 가이드 (object 스타일 사용하기)

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

컴포넌트

• type -> style -> component 순서
• 컴포넌트 정의를 함수 표현식 (arrow)
• <></>
• rendering 관련 return문 생략 or 작성(map, filter, etc…) / 일단 보류
• 각 컴포넌트 파일은 하나로 분리한다. 자식 컴포넌트를 컴포넌트화 시키게 된다면 새로운 파일로 분리해서 작업을 진행한다. (논의 필요)

경로

• alias 절대 경로 이름 지정(@: src는 엣@ 사용)
• 같은 폴더 위치라면 상대경로로 그 외에는 절대경로 사용