프론트엔드 컨벤션

1. 프론트엔드 개발 규칙

<aside> 💡

변수명, 함수명, 컴포넌트명 등을 지을 때 사용하는 규칙입니다.

</aside>

React 컴포넌트	pascalCase	const ReactComponent = () ⇒ {};
React 커스텀 훅	camelCase(use…)	const useTodoForm = () => {};
함수명	camelCase	const getTodos = () ⇒ {};
변수명	camelCase	const variableTitle = “variable”;
상수명	pascalCase	const CONSTANTTITLE = “constant”;
객체 속성명	camelCase	const newTodo = {
id: 1,
content: '오늘치 개발 하셨나요?',
isDone: false,
createdAt: Date.now(),
};
CSS 클래스명	kebab-case	<div className="todo-list"></div>

.todo-list { display: flex; } | | 환경변수명 | snake_case | const BASE_URL = 'https://api.example.com'; |

ts → 카멜 / 나머지 → 파스칼

<aside> 💡

커밋 메시지 작성 규칙입니다.

커밋 메시지를 상세하게 작성하는 것이 중요합니다.

나중에 변경 이력을 추적하거나 특정 커밋을 되돌려야 할 때 유용하게 사용될 수 있습니다.

커밋 메시지의 첫 줄은 변경 사항을 요약하고, 필요에 따라 추가적인 설명을 덧붙일 수 있습니다.

</aside>

feat	새로운 기능과 관련된 것을 의미합니다.
fix	오류와 같은 것을 수정했을 때 사용합니다.
docs	문서와 관련하여 수정한 부분이 있을 때 사용합니다.
style	코드의 변화와 관련 없는 포맷이나 세미콜론을 놓친 것과 같은 부분들을 의미합니다.
refactor	코드의 리팩토링을 의미합니다.
test	test를 추가하거나 수정했을 때를 의미합니다.
chore	build와 관련된 부분, 패키지 매니저 설정 등 여러가지 production code와 무관한 부분 들을 의미합니다.
design	css 등 스타일에 관련된 것을 의미합니다.

git commit -m 'fix : 로그인 기능 수정'