컨벤션 | Notion

Commit

FEAT:    새로운 기능 및 파일을 추가할 경우
MODIFY:  기능을 변경한 경우
STYLE:   간단한 수정, 코드 변경이 없는 경우
FIX:     버그를 고친 경우
DOCS:    문서를 수정한 경우(ex> Swagger, README)
COMMENT: 주석 추가/삭제/변경한 경우
RENAME:  파일 혹은 폴더명 수정 및 이동
DELETE:  파일 혹은 기능 삭제
CHORE:   빌드 업무 수정(ex> dependency 추가)
REFACTOR: 프로덕션 코드 리팩토링
MERGE:   충돌 시 머지, develop 브랜치에 풀리퀘 등

Commit 규칙
커밋 타입: 내용 자세히 적어주기 [#지라이슈넘버]
ex) FEAT: 로그인 rest api 추가 [#지라이슈넘버]
		git commit -m "[커밋타입] 커밋메세지 #프로젝트번호-JIRA이슈번호"

GIT Flow

branch
master : 운영 서버로 배포하기 위한 branch
develop : 다음 출시 기능을 개발하는 branch
back : backend branch
front : frontend branch
feature : 세부 기능을 개발하는 branch, branch 이름은 각 기능명으로 작성
hotfix : 급한 에러 수정

기능 개발이 완료되면 feature branch를 develop branch로 pull request를 통해 merge한다.

⇒ pull request가 요청되면, 모든 팀원들이 코드 리뷰를 한 뒤 merge한다.

매주 금요일마다 develop branch를 master branch로 merge하여 배포한다.(Jenkins)

feature branch 이름 규칙

feature/[front or back]/[기능명]

ex) feature/back/member
ex) feature/front/webrtc

Codding

Front-end

컨벤션

공통
- 불필요한 주석을 사용하지 않는다
- 현재 화면보다 긴 코드는 더 작은 단위의 코드로 리팩토링 한다
- ESLint와 Prettier를 이용해 통일한다
JavaScript
- let과 const만 사용한다 (var 사용금지)
- 직접 null을 체크하기 보다 optional chaining 연산자(?.)를 사용한다
- 나머지는 [네이버 자바스크립트 스타일 가이드](<https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md>)를 따른다
React
- components 이름은 파스칼 표기법(PascalCase)으로 작성한다
- Non-components 이름은 카멜 표기법(camelCase)으로 작성한다
- 속성명은 카멜 표기법으로 작성한다
	ex. className, onClick
- inline 스타일은 되도록 작성하지 않는다
- 유틸리티 파일을 만들어 중복된 코드를 피한다
	(utils -> 상수나 공통 함수, 유틸리티를 담는 폴더)
- 나머지는 [해당 링크](<https://phrygia.github.io/react/2022-04-05-react/>)를 참고한다
CSS
- 기본적으로 [구글 CSS 스타일 가이드](<https://code-study.tistory.com/17>)를 따른다
- CSS class 이름은 알파벳으로 시작하는 케밥 표기법(kebab-case)으로 작성한다
- CSS class 이름은 기능이나 일반적인 이름으로 한다
	ex. #yee-1901 .button-green - 나쁜 예
			#gallery .alt - 좋은 예
- 사용되지 않는 CSS 선택자는 제거한다
- 들여쓰기는 2개의 공백 문자를 사용한다
- 모든 블록 내부에서 들여쓰기를 한다
- 속성은 되도록 한 줄에 하나씩 영문 소문자로 작성한다
- 속성 값에 따옴표를 사용해야하는 경우 작은 따옴표를 사용한다
- background 속성의 url 값에는 따옴표를 사용하지 않는다
- @charset 규칙을 사용할때는 큰 따옴표를 사용한다
- 모든 속성 선언 끝에는 세미콜론을 붙인다(일관성 유지와 확장성)
- 속성과 값 사이에 한칸의 여백을 둔다
- 속성 선언이 끝나면 새로운 속성을 선언하기 전 줄바꿈 처리한다
- 섹션 주석을 작성하여 섹션을 그룹화한다
- 섹션 간 주석과 줄 바꿈으로 구분한다
	ex. /* Header */

[react] react 코딩 컨벤션

CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙

구조

frontend
	├── docker
  ├── node_modules
  ├── public
  └── src
      ├── assets
      ├── components
      ├── pages
      ├── store
      └── style

파일 구조 – React

Back-end

컨벤션

- 대입 연산자 앞 뒤에 공백 삽입
- 클래스/인터페이스 이름은 대문자 카멜 표기법
	ex. public class AccessToken
- 테스트 클래스는 'Test'로 끝남
- 메소드 이름은 동사/전치사로 시작하고 소문자 카멜 표기법을 사용
	ex. 동사사용 : renderHtml()
	ex. 전환메서드의 전치사 : toString()
	ex. Builder 패턴 적용한 클래스의 메서드의 전치사 : withUserId(String id)
- 변수에 소문자 카멜 표기법
	ex. private int accessToken;
- 제한자는 아래의 명시한 순서대로 쓴다
**public protected private abstract static final transient volatile synchronized native strictfp**
- K&R 스타일로 중괄호를 선언한다(줄의 마지막에서 시작 중괄호를 열고 새줄을 삽입하고, 블럭을 마친 후에는 새줄 삽입 후 중괄호를 닫는다)
- else, catch, finally, do-while 문에서의 while은 닫는 중괄호와 같은 줄에 쓴다
- 내용이 없는 블럭을 선언할 때는 같은 줄에서 중괄호를 닫는 것을 허용한다
- 조건, 반복문이 한 줄로 끝나더라도 중괄호를 활용한다
- import 구절을 아래와 같은 순서로 그룹을 묶어서 선언하고 같은 그룹 내에서는 알파벳 순으로 정렬한다
	1. static imports
	2. java.
	3. javax.
	4. org.
	5. net.
	6. com.
- 그 외에는 아래의 링크를 참고한다

- 대입 연산자 앞 뒤에 공백 삽입
- 클래스/인터페이스 이름은 대문자 카멜 표기법을 사용
- 메소드 이름은 동사/전치사로 시작하고 소문자 카멜 표기법을 사용
- 변수에 소문자 카멜 표기법을 사용
- 제한자는 아래의 명시한 순서대로 사용
**public protected private abstract static final transient volatile synchronized native strictfp**
- 그 외에는 아래의 링크를 참고한다

목차

Commit

GIT Flow

Codding

Front-end

Back-end