컨벤션

목차

1. Commit
2. PR
3. Branch
4. Code

📌 Commit

• Commit template

  타입

  • feat: A new feature 새로운 기능 추가
  • fix: A bug fix 이슈나 애러 해결
  • docs: Changes to documentation 문서 수정(리드미, ignore)
  • style: Formatting, missing semi colons, etc; no code change 코드와 관련 없는 코드 포맷팅 변경
  • refactor: Refactoring production code 리팩토링
  • test: Adding tests, refactoring test; no production code change 테스트코드와 관련된 부분
  • chore: Updating build tasks, package manager configs, etc; no production code change
  • layout: 스타일 코드 작성 및 수정

  내용

  제목
  type: Subject [#이슈번호]
  
  본문
  body: what과 why

  • https://udacity.github.io/git-styleguide/

🔔 PR

• PR 컨밴션
  • 제목 : 테스크이름
  • 작업요약: 이 PR 이 무엇을 나타내는지
  • 특이사항

🌿 Branch

• 브랜치 이름
  • feature/story-name/backlog-number
  • ex. feature/login/12A
• 브랜치 관리 프로세스
  1. develop에서 feature 브랜치를 따고
  2. release 로 merge
  3. release에서 문제가 생기면 hotfix 브랜치에서 해결
  4. 오류가 모두 제거된 완전한 소스코드를 main에 merge
  5. release에서 다시 develop 브랜치를 따서 1부터 반복

👔 Code

• 네이밍 (변수, 함수, 파일명)

  • 변수, 함수명: camelCase
  • 컴포넌트 파일명: PascalCase
  • 일반 파일명: kebab-case
  • 클래스명: PascalCase
  • 상수명: UPPERCASE_SNAKE_CASE
  • 컴포넌트 폴더명: PascalCase
  • 일반 폴더명: snake_case

• import 순서

  • NPM Module
  • Utils (다른 함수)
  • 컴포넌트
  • 스타일

• css 순서

  • group 1: 레이아웃 관련 ( position, top, bottom ..., display, justify-content ...)
  • group 2: 수치 관련 ( width, height, margin, padding ... )
  • group 3: 박스 스타일 관련 ( background-color, border, border-radius ... )
  • group 4: 내용물 관련 ( color, font-size, font-weight ... )
  • group 5: 다른 나머지
  • 그룹 별로 \n로 분리

  .box {
  	display: flex;
  	justify-content: center;
  
  	width: 100px;
  	height: 560px;
  
  	border-radius: 8px;
  
  	@media ...{
  
    }
  }