Skip to content

Coding Conventions

Jump to bottom
Jua Jang edited this page Feb 2, 2021 · 6 revisions

1. Structure

  • src/ - Contains all of our react codebase.
  • index.tsx - Base react component.
  • routes.tsx - App navigation.
  • pages/ - Pages (container들을 단순히 감싸는 역할, routes.ts에서 렌더링할 각각의 페이지들)
  • containers/feature/ - component들을 감싸서 레이아웃을 만드는 역할, Atomic Design에서 organisms 정도의 단계
  • components/feature/ - 실제 기능을 담당하는 컴포넌트들, Atomic Design에서 molecules 정도의 단계

    ex) components/main/UserProfile/index.tsx / components/main/UserProfile/style.tsx

  • components/common/ - Shared components
  • lib/ - libraries
  • lib/hooks/ - React Custom Hooks.
  • lib/api/ - Api call related functions.
  • lib/graphql/ - Graphql functions.
  • lib/util/ - 기타 개발에 도움이 되는 함수들

2. Coding Conventions

2.1 Typescript

  • tsx 파일 (pages, components, container 안의 React components) -> PascalCase로 작성 ex) HeaderUserMenu.tsx
  • 나머지 ts 파일들 (hooks, api, graphql...) -> camelCase로 작성 ex) useUploadImage.ts

type / interface 는 다음과 같은 형식으로 사용합니다. 여러개의 타입들을 포함하고 있을 때는 interface로 작성합니다.

export type TooltipType = 'none';

export interface Coordinate {
  x: number;
  y: number;
}

2.2 Styled Components

wrapper vs container

2.3 Iterator

실수를 줄이고, 가독성을 높이기 위해서 for, while 등을 이용해서 직접 반복문을 도는게 아니라 가급적 Array Iteration Methods 이용합시다.

2.4 Hooks

컴포넌트의 복잡도를 낮추기 위해서, custom hooks를 적극적으로 사용할 것을 권장합니다.

3. Git

3.1 Commit Message Conventions

  • add : 새로운 기능을 추가
  • modify : 기존 기능을 수정
  • fix : 버그 수정
  • docs : 문서의 수정
  • style : (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)
  • refactor : 코드를 리펙토링
  • test : Test 관련한 코드의 추가, 수정

3.2 Pull Request

각각 branch를 나눠서 개발을 진행하고, 개발을 마친뒤 dev branch로 pull request를 올립니다. (dev branch로 올리기 전에 가능한 한 모든 eslint error를 잡아주세요.) 이때 한 명 이상의 리뷰어가 코드리뷰를 하고, 해당 branch에서 테스트를 해본 뒤 dev에 병합하도록 합시다!
주요 기능이 완성되고, 모든 테스트를 거친 뒤에는 master에 올려 배포합니다.

3.3 Issues

버그가 생겼을 때 바로 고칠 수 있다면 좋겠지만, 당장 고칠 수 없는 버그라서 다른 사람에게도 알려야 한다면 Issues에 올립시다! 스크린샷과 함께 버그가 일어난 상황을 구체적으로 서술하면 더 좋습니다. 후에 이 버그를 고쳤을 때는 해당 Issue의 고유 번호를 태그하여 commit 합니다. ex) fix: #24 굳이 버그가 아니더라도, UX적으로 개선되었으면 하는 부분 등을 제안할수도 있습니다.

Clone this wiki locally