참고 사이트 : 컨벤션 클론하기…. 히히
커밋 메시지 컨벤션
•
커밋 메시지는 타입: 주제 (#이슈번호)와 같이 작성한다.
◦
예) add: ListView에 빠진 문구 추가 (#2)
•
타입의 종류
◦
fix: 올바르지 않은 동작을 고친 경우
◦
feat: 새로운 기능을 추가한 경우
◦
refactor: 내부 로직은 변경하지 않고 코드를 개선한 경우
◦
style: 코드 개선과 상관없이 사소하게 코드를 수정한 경우
◦
design: 사용자 UI를 추가, 수정한 경우 (마크업, 퍼블리싱 작업)
◦
add: 폴더, 파일 등을 추가한 경우
◦
move: 폴더, 파일, 코드 등의 위치를 이동한 경우
◦
rename: 폴더명, 파일명 등을 수정한 경우
◦
remove: 폴더, 파일, 코드 등을 삭제한 경우
◦
assets: 에셋을 추가, 수정한 경우
◦
docs: 문서를 추가, 수정한 경우
◦
chore: 위의 모든 경우에 포함되지 않는 기타 수정사항
•
타입은 종류 중 하나만 선택하며, 영어 소문자로 시작한다.
•
주제는 한글로 간단명료하게 작성한다.
•
주제의 마지막 문자로 .(마침표)를 사용하지 않는다.
•
주제는 '-다', '-음'과 같은 어미로 끝내지 않고, 과거형을 사용하지 않는다.
◦
올바르지 않은 예) feat: 카카오 로그인 연동 기능을 추가했다 (#3), feat: 카카오 로그인 연동 기능을 추가함 (#3)
◦
옳은 예) feat: 카카오 로그인 연동 기능 추가 (#3)
•
주제는 소스 코드를 보지 않고도 변경 사항이 무엇인지 알 수 있도록 작성해야 한다.
◦
올바르지 않은 예) design: CSS 조정 (#4)
◦
옳은 예) design: text box와 layout frame 사이에 left padding 추가 (#4)
•
커밋 메시지는 제삼자가 봤을 때 무엇을 했는지 파악할 수 있게 자세히 작성한다.
•
커밋 메시지는 어떻게 보단 무엇과 왜를 설명한다.
•
한 커밋에는 한 가지 기능만 담는다.
◦
예) 화면 개발의 경우 : 컴포넌트 단위로 커밋
◦
예2) 기능 개발의 경우 : 각 기능 단위로 커밋
코드 컨벤션
•
함수는 rafce 스니펫을 사용한다
•
들여쓰기(tab) 2칸 사용한다.
•
JavaScript ES6+ 문법 사용한다.
•
var 사용 금지한다.
•
세미콜론 필수로 사용한다.
•
작은 따옴표 사용한다.
•
for, if문은 길이가 짧더라도 중괄호로 사용한다.
•
CSS 속성 선언 순서는 우선 신경쓰지 않고, 코드 리팩토링 단계에서 수정한다.
•
리액트 컴포넌트를 만들때는 rafce 명령어를 사용하여 만든다.
•
리액트 컴포넌트 확장자는 jsx로 통일한다.
•
함수 선언시에는 화살표 함수 사용한다. (화살표 함수를 사용할 수 없는 상황에는 예외)
•
prettier & ESlint 사용한다
•
삼항연산자는 짧으면 한줄, 길면 개행으로 줄바꿈 규칙을 정한다.
•
import ... from 구문은 큰 분류만 신경쓰고 분류 안에서 자유로운 순서로 배치한다.
네이밍 컨벤션
폴더명
•
camelCase : 직접적으로 바로 React 컴포넌트가 들어있지 않은 간접적인 관계의 폴더
•
PascalCase : React 컴포넌트가 바로 들어 있는 폴더
파일명
•
React 컴포넌트 : PascalCase
◦
페이지명은 __page로 작성 (예 : HomePage.jsx, LoginPage.jsx)
◦
네이밍은 종류 - 역할 - 컴포넌트 순으로 (예 : LoginSubmitButton.jsx)
•
이미지파일 : kebab-case
◦
네이밍은 이미지명-image로 (예 : logo-image.png, happy-lion-imgae.png)
•
jsx : PascalCase
•
js : camelCase
•
스타일드 컴포넌트 파일 : ~~Style.jsx로 표현
변수명
•
일반적인 변수, 함수 : camelCase
◦
변수 : '명사형'으로 작성. 무엇을 담고있는지 정확히 표현 (예 : numberOfPeople)
◦
불린형 변수 : is로 시작 (예 : isOpen)
◦
함수 : '동사형'으로 작성. 무엇을 하는 함수인지 정확히 표현
▪
어떤 값으로부터 다른 값을 계산하는 함수는 get으로 시작 (예 : getinputValue)
•
커스텀 훅 : use로 시작 (예 : uesGetWindowsSize)
•
이벤트 함수 props ( on_ ) + 네이밍 + handler 으로 짓기 (아래 예시 참조)
import { MouseEvent as ReactMouseEvent, useCallback, useState } from 'react'
function FunctionComponent() {
const [searchTerm, setSearchTerm] = useState('')
// 이벤트 핸들러 함수
const onClickSearchButtonHandler = useCallback(e) => { ... })
const onChangeSearchTermHandler = useCallback(e => { ... })
// 이벤트 핸들러 prop
return (
<>
<SearchInput onChange={onClickSearchButtonHandler} />
<SearchButton onClick={onChangeSearchTermHandler} />
</>
)
}
export default FunctionComponent
JavaScript
복사
•
상수 : UPPER_SNAKE_CASE
•
생성자 함수, 클래스 : PascalCase
디렉토리 구조 컨벤션
src
ㄴ assets
ㄴ images
ㄴ fonts
ㄴ components
ㄴ Header
ㄴ Header.jsx
ㄴ Button
ㄴ Button.jsx
ㄴ pages
ㄴ HomePage
ㄴ HomePage.jsx
Bash
복사
assets
•
말 그대로 자산을 의미한다.
•
프로젝트에서 사용할 이미지, 비디오, 폰트 등 미디어 파일들을 모아 저장하는 곳
components
•
공통 컴포넌트 관리 (Header, Footer, Nav 등)
pages
•
페이지 단위의 컴포넌트 폴더로 구성
components vs pages•
여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리
•
페이지 컴포넌트의 경우 pages 폴더에서 관리
•
해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리하는 것이 좋음!
