깃헙 컨벤션
브랜치명
<!-- 컨벤션 --> 타입/#이슈번호/세부내용 <!-- 예시 --> feat/#27/Button
이슈 제목
<!-- 컨벤션 --> [타입] 내용 <!-- 예시 --> [feat] Component Base - Button
PR 제목
<!-- 컨벤션 --> 타입 : #이슈번호/내용 <!-- 예시 --> feat : #27/Component Base - Button 기능 개발
이슈 템플릿
## 🚅 Issue 한 줄 요약 이슈를 한줄로 요약해주세요. ## 🤷 Issue 세부 내용 무슨 이슈인가요? ## ✨ 기대 결과 어떤 결과물을 원하시나요? ## 📸 스크린샷 이슈에 해당하는 부분을 보여주세요.
PR 템플릿
## 🚅 PR 한 줄 요약 PR을 한줄로 요약해주세요. ## 🧑💻 PR 세부 내용 수정/추가한 내용을 적어주세요. ## 📸 스크린샷 스크린샷을 첨부해주세요.
코딩 컨벤션
기본적으로
eslint 의 react-app, prettier 의 설정 규칙을 따릅니다.주석
- 주석은 가급적 남기지 않도록 합니다.
- 필요하다면 JsDoc형식을 활용하여 작성합니다.
import
craco.package.js 에서 정의되어있는 alias 를 활용합니다.
import CustomComponent from '@component/...'
import CustomHooks from '@hooks/...'
import CustomContext from '@contexts/...'
import CustomPage from '@pages/...'
컴포넌트
- 스타일은
@emotion/styled를 활용합니다.
proptypes를 활용합니다.
- 태그는
시멘틱하게 작성합니다.
참고 컨벤션 by 지은 멘토님
네이밍 컨벤션
- 함수(CRUD) → 동사 + 명사
- 생성 : create, or add
- 가져오기 : get,
- 수정 : update,
- 삭제 : remove, delete
- 데이터 → (형용사 +) 명사
- 배열 : array
- 불린형 : is+ 조건
- 네이밍 컨벤션
- 블리언
- is
- visible
- showing
- open
- isShowing
- 리스트
- postList
- posts
- 삭제
- delete
- remove
- 이벤트
- onClick, onBlur, onFocus
- handleClick, handleBlur, handleFocus
- 인풋
- input event
- input props
- 목록
- + s 붙여서 복수로 표현
- 현재 상태
- current +
예시
children: React.ReactNode;
defaultActive?: string;
label?: string;
labelColor?: string;
name?: string;
placeholder?: string;
size?: SelectSizeType;
borderType?: SelectBorderType;
block?: boolean;
disabled?: boolean;
align?: SelectAlignType;
loading?: boolean;
onChange?(value: string): void;
className?: string;
style?: React.CSSProperties;
labelClassName?: string;
labelStyle?: React.CSSProperties;
inputClassName?: string;
inputStyle?: React.CSSProperties;
- 백엔드 API에 따라서 네이밍 맞추기