[문서] 컨벤션 정하기 (커밋, 변수명 등)

[areumsheep]

🌟 커밋 컨벤션

✨ feat: 파일, 폴더, 새로운 기능 추가
🐛 fix: 버그 수정
💄 style: 코드 스타일 변경 + UI 변경
📝 docs: 문서 생성, 추가, 수정 README.md
♻️ refactor: 코드 리팩토링
💩 chore: 수정 (JSON 데이터 포맷 변경 / css 변경 등)

🌟 코딩 컨벤션

📁 디렉토리 구조

• @types
• pages
• components
• constants (상수)
• utils (서비스 로직)
• api
• hooks
• style
• assets

파일명

공통 컴포넌트는 @#$.tsx
페이지 컴포넌트는 페이지명 > @#$.tsx

Function

// rafce
import React from 'react'

const Untitled-1 = () => {
  return (
    <div>Untitled-1</div>
  )
}

export default Untitled-1

// React.FC (X))
const Slide = ({ movies }: SlideProps) => {
}

Variable

• 카멜 케이스

const passwordErrorMsg = 'hello';

url = ''
// 타입 추론을 사용하여 url = ''

date: string[] = [];

Contant

• 전체 대문자, _로 구분

// 비밀번호 검사 관련
export const PASSWORD_ERROR_MSG = [
  '비밀번호는 8글자 이상',
  '영문 대문자 최소 1글자 이상 포함',
  '특수문자 최소 1글자 이상 포함',
];

Interface

• 사용처: 객체 타입 정의
• props 의 Interface 를 선언할때 : [컴포넌트명]Props ( ex : ChatProps )
• props 의 Interface 의 경우 해당 컴포넌트 파일 상단에 Interface 정의
• 기본 Interface 의 경우 : [이름]Interface ( ex: UserInterface )
• 앞글자는 대문자로

interface MovieProps {
    id: string;
    title: string;
    year: string;
    type: 'movie' | 'series';
    poster: string;
    like: boolean;
  }

Type

• 사용처: 단일 타입 정의
• 앞글자는 대문자로

type MovieType = 'movie' | 'series';

CSS

• 폰트 단위: rem

🌟 이슈

• 기능 추가 전 어떤 식으로 작업할 지 정리 및 팀원들에게 하고 있는 일 알림

🌟 브랜치

• develop 브랜치가 기본 브랜치로 pr 보낼 때 main 브랜치가 아닌 develop 브랜치로
• 기능 추가의 경우 feature/ 를 붙이고 그 뒤에 소문자로 브랜치이름을 작성
• 단어를 두개이상 써야하는 경우에는 대시(-)로 구분

ex) feature/login-page , feature/main-page, style/font, refactor/modal