[To Do List] 3단계: 규칙 설정

3. 규칙 설정: 코딩컨벤션, Git 커밋 메시지 양식

코딩 컨벤션

1. 파일 및 디렉토리 구조

   • 파일명은 소문자와 하이픈(-)을 사용합니다. 예: index.html, style.css, script.js
   • 디렉토리명은 소문자와 하이픈(-)을 사용합니다.

2. HTML

   • 들여쓰기는 2칸을 사용합니다.
   • 속성명은 소문자를 사용하며, 값은 큰따옴표("")로 감쌉니다.
   • 자주 사용되는 HTML 구조를 주석으로 표시합니다.

3. CSS

   • 들여쓰기는 2칸을 사용합니다.
   • 클래스명은 소문자와 하이픈(-)을 사용합니다. 예: .todo-item, .completed
   • CSS 속성은 알파벳 순으로 정렬합니다.

4. JavaScript

   • 들여쓰기는 2칸을 사용합니다.
   • 변수명은 카멜케이스(camelCase)를 사용합니다. 예: todoItem, completedTasks
   • 함수명은 동사로 시작하며, 카멜케이스를 사용합니다. 예: addTodoItem(), deleteTodoItem()
   • 한 줄의 길이는 80자를 넘지 않도록 합니다.
   • ES6+ 문법을 사용합니다. 예: const, let, 화살표 함수 등

5. 주석

   • 중요한 코드 블록에는 주석을 추가하여 설명합니다.
   • 주석은 코드 위에 추가하며, 여러 줄 주석을 사용합니다.

/**
 * 할 일 목록에 새로운 할 일을 추가하는 함수
 * @param {string} todoText - 추가할 할 일 텍스트
 */
function addTodoItem(todoText) {
  // 할 일 추가 로직
}

Git 커밋 메시지 양식

1. 커밋 메시지 구조

   • 제목: 50자 이내로 간결하게 작성
   • 본문: 선택 사항, 변경 사항에 대한 자세한 설명
   • 꼬리말: 이슈 트래킹 번호 (선택 사항)

2. 타입

   • feat: 새로운 기능 추가
   • fix: 버그 수정
   • docs: 문서 수정
   • style: 코드 포맷팅, 세미콜론 누락 등 코드 변경이 없는 경우
   • refactor: 코드 리팩토링 (기능 변경 없이 코드 구조 개선)
   • test: 테스트 추가, 테스트 리팩토링
   • chore: 빌드 업무, 패키지 매니저 설정 등

3. 예시

feat: 할 일 추가 기능 구현

할 일을 입력받아 목록에 추가하는 기능을 구현.
로컬 스토리지를 사용하여 데이터 저장.

fix: 할 일 삭제 기능 버그 수정

삭제된 할 일이 목록에 남아있는 문제 해결.