[in process]Project Convention Rules

[argon1025]

Tilog-Server저장소 토론섹션에서 코드 컨벤션 규칙을 정하고 있습니다 윤곽이 잡힌 후 이곳에 문서가 작성될 예정입니다.

[MINJE-98]

네이밍 컨벤션

파일 이름

tsx,jsx 파일은 파스칼 케이스를 준수합니다.

그밖의 다른 파일들은 카멜 케이스를 준수합니다.

폴더 이름은 케밥케이스를 준수합니다.

코드

코드의 네이밍 컨벤션은 airbnb naming convation을 준수합니다.

[MINJE-98]

Import 정렬

next, react → 외부 정의 라이브러리 → 내부 정의 라이브러리 → 컴포넌트 → 타입 순으로 정렬합니다.

import/order를 사용하여 위와같은 정렬을 유도합니다.

[MINJE-98]

컴포넌트 구조

@common

@common은 Atomic Design을 이용하여 구성하며, 내부 컴포넌트에서는 SideEffect가 발생하지않는 순수 함수로 작성되어야한다.

❗단 컴포넌트 내부 리스너 같은 SideEffect가 존재할 수 있지만, 서버 관련 hooks는 절대 존재해서는 안된다.

Atom

Atom은 컴포넌트의 가장 작은 단위이다.

현재 프로젝트에서 CSS in JS를 적용하지 않고 Tailwind를 100% 사용하여 구현하고 있기 때문에 대부분의 button, input의 디자인이 여기서 결정된다.

Atom 컴포넌트는 내부에 어떠한 SideEffect가 존재해서는 안된다.

Atom 컴포넌트는 button, input과 같은 기본적인 HTML 테그로 분류한다.

Atom 컴포넌트의 네이밍은 자신의 관심, HTMLTag를 조합하여 컴포넌트 이름을 지정한다.

비슷한 관심사끼리 묶어 하나의 폴더에 구현한다.

• atom
  • buttons
    | PrimaryButton.tsx
    | SecondaryButton.tsx
  • input
    | FileInput.tsx
    | TextInput.tsx
  • image
    • avatars
      | EmptyAvatarsImage.tsx
      | AvatarsImage.tsx
    • thumbnail
      | EmptyThumbnailImage.tsx
      | ThumbnailImage.tsx

Molecules

Atom을 구성하여 Molecules를 구성하거나, HTML테그 자체를 사용하여 구성한다.

Molecules에서부터 어떤 도메인의 컴포넌트에서 사용될 것인지 결정된다.

Molecules 컴포넌트는 내부에 어떠한 SideEffect가 존재해서는 안된다.

Molecules 컴포넌트의 네이밍은 자신의 도메인과 관심사를 포함하여 컴포넌트 이름을 지정한다.

비슷한 도메인끼리 묶어 하나의 폴더로 구현한다.

컴포넌트 이름을 보고 어떤 역할을 하는 컴포넌트인지 알 수 있어야한다.

• molecules
  • profile
    | UserProfile.tsx
  • image
    | PostThumbnail.tsx

organisms

Atom, Molescules을 사용하여 Organisms를 구성한다.

비동기 통신 후 일어나는 SideEffect는 모두 Other에서 처리하고 넘겨주는 것을 원칙이다.

Organisms 컴포넌트는 내부에 어떠한 SideEffect가 존재해서는 안된다.

Organisms 컴포넌트의 네이밍은 자신의 도메인과 관심사를 포함하여 컴포넌트 이름을 지정한다.

• Organisms
  • list
    | PostCardList.tsx

@Hocs

High Order Component를 관리한다.

@layout

동일한 Layout 자주 사용하거나, 어디든 똑같은 레이아웃을 적용한다면 이곳에 생성하여 적용하는 것이 원칙이다.

Other

Other는 컴포넌트 집합들은 SideEffect를 발생 시킨다.

프론트엔드에서 더러운 작업은 여기서 맡기로 하였다. 또한 특정 하나의 페이지만 바라보는 컴포넌트일 경우 여기에 관리된다.

[MINJE-98]

Props Types

props의 Type은 컴포넌트 선언구 위에 선언하여 해당 컴포넌트 props의 Type을 정의합니다.