- 기본 설정
- 브랜치 설정
- 프로젝트 자동화
- 커밋 메시지
- 브랜치 명
- Issue
- Pull Request
- Merge
- 디렉토리 구조
- 변수, 함수, 컴포넌트명칭
- Github Actions
- Windows에서 Github Desktop 사용 시
해당 프로젝트의 Settings -> General로 이동합니다.
Pull Request 항목의 옵션을 다음과 같이 설정합니다.
해당 프로젝트의 Settings -> Branches로 이동합니다.
Add branch protection rule 버튼을 누른 후, 다음과 같이 설정합니다.
원활한 자동화를 위해 다음과 같은 설정을 해주세요!
해당 프로젝트의 Settings -> Secrets and variables -> Actions로 이동합니다.
New repository secret 버튼을 눌러 발급받은 토큰을 입력후, Add secret 버튼을 눌러 줍니다.
Name: TOKEN
Secret: 발급받은 토큰
필요한 토큰의 권한은 다음과 같습니다!
그 다음, Variables 탭으로 이동하여 다음과 같이 Repository variables를 추가해 주세요!
Name: PROJECT_URL
Value: https://github.com/orgs/wanted-pre-onboarding-team-12th-7/projects/프로젝트번호
Name: REVIEWERS
Value: wisdomin121, anyl92, SeungrokYoon, 5unk3n, salmontaker, JangHyunjeong
모든 커밋 메시지는
prefix: 메시지의 형식에 따라 작성해 주세요!
feat: Todo 리스트 구현
| prefix | 설명 |
|---|---|
| feat | 새로운 기능을 추가, 기존 기능을 수정 |
| refactor | 리팩토링 |
| fix | 버그 수정 |
| style | 기능에는 영향을 주지 않는 CSS, 레이아웃 개발 |
| config | 환경설정, 환경변수, 패키지 인스톨 |
| docs | README.md등의 문서수정 |
| chore | 불필요한 파일 삭제, 파일 디렉토리 이동 등의 잡다한 일 |
커밋 메시지의 prefix를 동일하게 사용합니다!
브랜치 명은
prefix/#이슈번호-브랜치이름으로 작성해 주세요!
feat/#1-todo-list
이슈 작성시 연관된 브랜치를 연결해 주세요!
Asignee, Project 연결은 Github Actions가 자동으로 처리 해줄거에요!
커밋 메시지의 prefix를 동일하게 사용합니다!
PR 작성시
prefix: #이슈번호 제목의 형식을 지켜주세요!prefix에대문자는 사용하지 않습니다!
Asignee, Reviewers, Project 연결은 Github Actions가 자동으로 처리 해줄거에요!
새로운 PR이 올라왔을 때, 되도록이면 3시간 안에 코드리뷰를 해주세요!
다른 사람의 PR이 main에 merge되었을 때, 반드시 rebase하도록 해요!
# 작업중인 브랜치에서...
git rebase origin/main
git push -fmerge전에 rebase, 꼭 잊지 말도록 해요!
# merge할 브랜치에서...
git rebase origin/main
git push -f이 외에도 추가하고 싶은 요소가 있다면, 모두와 의견을 나눠봐요!
src/
├── apis/
│ ├── instance.ts
│ └── todo.ts
├── assets/
│ └── 이미지, 아이콘등의 리소스 파일
├── components/
│ ├── common/
│ │ └── 공통 컴포넌트
│ └── 일반 UI 컴포넌트/
│ └── 컴포넌트/
│ ├── 컴포넌트명.tsx
│ ├── 컴포넌트명.styled.tsx
│ └── types.ts
├── hooks/
│ └── 커스텀 훅
├── pages/
│ ├── HomePage
│ └── TodoPage
├── store/
│ └── 전역으로 관리하는 데이터
└── styles/
├── base/
│ ├── DefaultTheme.ts
│ └── GlobalStyles.ts
└── constant/
├── colors.ts
├── flex.ts
└── fontSize.ts
변수와 함수는 반드시 camelCase로 작성해 주세요!
// snake_case나 PascalCase로 변수와 함수를 작성하지 말아주세요!
const is_correct_var_name = false
const IsCorrectVarName = false// 다음과 같이 camelCase를 사용하도록 해요!
const isCorrectVarName = true컴포넌트는 PascalCase + function 키워드로 작성해 주세요!
// 컴포넌트라는 것을 알아보기 쉽도록 function 키워드를 사용하도록 해요!
function TodoList() {
...
}함수는 동사로 시작해요!
// 컴포넌트와의 구분을 위해 Arrow Function 사용을 권장드려요!
const getTodo = () => {
...
}
// 단, 커스텀 hook 작성시에만 use라는 키워드를 사용해 주세요!
const useTodo = () => {
const [todoList, setTodoList] = useState([])
...
}이슈와 PR 작성시의 피로도를 줄이기 위해, 다음과 같이 자동화를 했어요!
이슈와 PR 작성 이외의 작동 조건을 알고싶다면 이 문서를 참고해 주세요!
# .github/workflows/main.yml
on:
issues:
types: [opened]
pull_request:
types: [opened, ready_for_review]
jobs:
assign:
runs-on: ubuntu-latest
steps:
- if: ${{ github.event.issue }}
uses: actions-cool/issues-helper@v3
with:
actions: 'add-assignees'
assignees: ${{ github.event.issue.user.login }}
token: ${{ secrets.TOKEN }}
- if: ${{ github.event.pull_request }}
uses: hkusu/review-assign-action@v1
with:
assignees: ${{ github.event.pull_request.user.login }}
reviewers: ${{ vars.REVIEWERS }}
github-token: ${{ secrets.TOKEN }}
project:
runs-on: ubuntu-latest
steps:
- uses: actions/add-to-project@main
with:
project-url: ${{ vars.PROJECT_URL }}
github-token: ${{ secrets.TOKEN }}Windows 버전 Github Desktop에 내장된 Git에는 cygpath가 포함되어 있지않아, pre-commit시 다음과 같은 에러가 발생할 수 있습니다.
이 경우, git이 설치된 경로/usr/bin/cygpath.exe를 GitHub Desktop이 설치된 경로/bin 에 복사하면 해결할 수 있습니다.
