https://oasis-pocket-331.notion.site/16a98af60a814a94b829c5d432e68875

feature 브랜치 예시 : feature-login-api

commit 예시 : [feat] 로그인 API 추가

📌 Commit

• Commit template

  타입

  • feat: A new feature 새로운 기능 추가 [feat]
  • 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-만드는 기능
• 브랜치 관리 프로세스
  1. develop에서 feature 브랜치를 따고
  2. 오류가 모두 제거된 완전한 dev를 master에 merge
  3. develop 브랜치를 따서 1부터 반복

👔 Code

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

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

• import 순서

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

• css 순서

  • HTML 순서대로 작성
  • abcd-edfg 형태로
  • 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 ...{
  
    }
  }