Rule

Git Commit Message

[feat] : 새로운 기능 추가
[fix] : 버그를 고친 경우
[design] : CSS 등 사용자 UI 디자인 변경
[style] : 코드 포맷변경, 세미콜론 누락, 코드 수정이 없는 경우
[refactor] : 프로덕션 코드 리팩토링할 경우
[comment] : 주석 추가 및 변경
[docs] : 문서를 수정한 경우
[test] : 테스트 코드 작업
[chore] : 빌드 테스트 업데이트, 패키지 매니저 설정
[rename] : 파일 혹은 폴더명 수정
[remove] : 삭제 작업
[init] : 브랜치 초기화 및 초기 세팅

ex) [feat] Question Read 기능 구현

Git Pull Request Message

Git issue

ex)

[BE] JWT 구현
[FE] 마이페이지 구현

---

Assignee : 김연우

Task Description :

1. JWT 구현
2. OAuth 구현
   
   

Date : 6월 30일(금)

---

라벨을 반드시 추가해주세요.

Git Branch

main : 배포 브랜치
FE : 프론트엔드 dev 브랜치
BE : 백엔드 dev 브랜치
feat : 기능 개발 브랜치

ex) feat/yeonwoo/login

---

FE_CodeConvention

# 코드컨벤션

Naming Convention

공통 - 길이 최대 20자 이내로 제한

종류	표기법	조합
변수	camelCase	명사
ex) userDate
함수	camelCase	동사 + 명사
ex) getUserData
컴포넌트	PascalCase	명사
ex) Movie

변수

상태 처리를 위한 변수는 is...으로 구성 ex) isOpen

idx, arr, cnt, btn과 같은 이해하기 쉬운 약자는 사용하되, 그 외에 약자는 사용하지 않음

상수들은 무조건 대문자 + (ex. MAX_LEN)

함수

이벤트핸들러 조합 : handle + 명사 + 동사 (ex. handleThreeTabClick)

이벤트핸들러를 props로 전달할때는 handle로 전달

Code Convention

tab depth : 4개 이하

주석 : 모두 /** */로 작성

magic number는 지양(ex. asset로 분리는 논의를 합시다)

코드 블록문들(조건문, 반복문 등)은 아래의 구조를 따르기

else if문 사용 지양

if(asd) {

 asdasd

}

함수 파라미터: 3개 이하

비동기 함수는 async await을 사용

비동기 Ajax 방식은 fetch를 사용

컴포넌트, 함수는 arrow

arrow 함수는 소괄호 필수, 내용에는 중괄호 필수(ex. const A = () => {return})

import

상단 = React 관련 모듈(use뭐시기들)

상중단 = 라이브러리

중단 = 컴포넌트들이나 custom Hook, 외부 분리된 파일들

하단 = CSS 파일

import 요소들은 구조분해할당 방식으로 호출, 각 요소별 정렬은 영어 표준에 따름(sort)

• import 예시

  import ‘React’ from “react”

  import {use뭐시기}

  import 컴포뭐시기

컴포넌트 내부 구조 순서

1. 상태 변수 2. 함수 3. 이벤트 핸들러 4. useEffect 5. return

Commit Convention

feat : 새로운 기능 추가

fix : 버그 수정

docs : 문서 수정

style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우

refactor : 코드 리펙토링

test : 테스트 코드, 리펙토링 테스트 코드 추가

chore : 빌드 업무 수정, 패키지 매니저 수정

Body

1. commit 설명에는 어떤 작업들을 해결했는지 넘버링하여 목록으로 자세히 작성

2. 메인 commit 내용이 아니더라도 부가적으로 해결한 부분들도 함께 Body에 작성. 이때 중요한 것부터 작성

ex)feat: Login Logic

1. 로그인 로직을 구현하였습니다.

2. 로그인 화면의 버튼에 hover css를 추가하였습니다.

3. Nav바의 글씨가 춤추는 버그를 해결하였습니다.

예시 // 상단 = React 관련 모듈(use뭐시기들) import React, {useState, useEffect} from "react" // 상중단 = 라이브러리 import redux from "react-redux"; // 중단 = 컴포넌트들이나 custom Hook, 외부 분리된 파일들 import {Button} from "ex.js"; // 하단 = CSS 파일 import "ex.css";

// 컴포넌트 내부 구조 순서 // 1. 상태 변수 2. 함수 3. 이벤트 핸들러 4. useEffect 5. return function ex() { const [isCount, setIsCount] = useState(0); const [ data, setData ] = useState([])

function increaseCount() { setIsCount(isCount + 1); } function handleButtonClick() { }

useEffect(() => { fetch('http://localhost:3000/') .then(res => { return res.json }) .then(data => { setData(data) }) },[])

return (

Count: {isCount}

Increase Click

); };