기여 가이드

기여 과정

• 프로젝트 보드에서 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 키워드를 사용하기

관련 링크

• https://github.com/DaleStudy/leaderboard/pull/18#pullrequestreview-2377895806