Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

기여 가이드

Dale Seo edited this page Dec 1, 2024 · 9 revisions

기여 과정

  • 프로젝트 보드에서 To Do 상태의 티켓에 자신에게 할당합니다.
  • 디폴드 브랜치로 부터 피쳐(feature) 브랜치를 하나 따고 그 안에서 코드를 작성하고 커밋합니다.
  • 피쳐 브랜치를 원격 저장소에 올린 후 Pull Request을 엽니다. (이슈에 PR을 연결하는 것을 잊지 마세요).
  • 코드 리뷰 후 최소 한 개의 승인을 받은 후 PR을 디폴트 브랜치에 병합합니다.
  • 디폴트 브랜치에 병합된 코드는 GitHub Pages에 즉시 배포됩니다.

품질 검사

디폴트 브랜치에 품질 기준에 미달하는 코드가 유입이 되지 않도록 PR을 올리시면 자동으로 품질 검사가 진행되고 실패할 경우 병합이 불가능합니다. 각 품질 검사는 개발자가 로컬 환경에서 직접 진행하실 수도 있습니다.

Formatting

Prettier를 통해서 일관적인 코드 포멧팅을 유지하고 있습니다. 코드 포멧팅이 깨진 코드가 있는지 확인하려면 다음 명령어를 실행합니다.

$ bun run format:check

VSCode 사용자 분들은 Pretteir 익스텐션을 쓰시면 코드를 작성하면서 자동으로 코드를 포멧팅할 수 있어서 편하니 추천드립니다.

Linitnig

ESLint를 통해서 잠재적인 문제를 발견하고 보범 사례를 따르고 있습니다. 린팅 규칙을 위반하고 있는 코드가 있는지 확인하려면 다음 명령어를 실행합니다.

$ bun run lint

Type Checking

TypeScirpt를 통해서 정적 타입 검사를 하고 있습니다. 타입 오류가 있는지 확인하려면 다음 명령어를 실행합니다.

$ bunx tsc

Test Coverage

Vitest를 통해서 테스트 커버러지를 검사하고 있습니다. 테스트 커버리지를 확인하려면 다음 명령어를 실행합니다.

$ bun run coverage

프로젝트 구조

  • src/components 아래에 폴더를 만들고, 그 안에 컴포넌트 파일, 스토리 파일, 테스트 파일을 위치시킵니다.
  • 폴더 이름, 파일 이름, 컴포넌트 이름은 모두 PascalCase로 letter case를 통일합니다.
  • 변수 이름, 함수 이름, prop 이름은 모두 camelCase로 letter case를 통일합니다.
  • index.tsx 파일을 통해서 re-export하지 않습니다.
├── src
│ ├── components
│ │ ├── Certificate
│ │ │ ├── Certificate.story.tsx
│ │ │ ├── Certificate.test.tsx
│ │ │ └── Certificate.tsx

테스팅

  • 테스트 파일은 별도의 디렉토리에 중앙화 하지 않고 애플리케이션 파일 바로 옆에 둡니다.
  • 단순한 테스트 구조를 위해서 테스트 대상 모듈의 구조가 복잡하지 않다면 describer()-it() 대신에 test()를 씁니다.

컨벤션

  • 함수를 작성할 때는 가급적 화살표 문법보다는 function 키워드를 사용하기

관련 링크

Clone this wiki locally

AltStyle によって変換されたページ (->オリジナル) /