[Git] AngularJS Commit Conventions

우아한테크코스 프리코스 진행을 하면서 요구사항 중 AngularJS Commit Convention을 참고하여

커밋 메시지를 작성하라는 요구사항이 있었습니다.

 

그래서 이번 기회에 정리해보며 사용 방법을 익혀보려고 합니다.

자료는 해당 링크를 참고했습니다.

 

📌 CHANGELOG.md 생성

변경 기록에는 다음 세 가지의 내용이 포함되어 있습니다.

1. New Feature

2. Bug Fixes

3. Breaking Changes

 

사용자가 정의한 여러 스크립트에 따라 다양한 형식의 CHANGELOG를 생성할 수 있습니다.

 

아래 명령어로 간단한 형태의 CHANGELOG.md를 생성할 수 있습니다.

git log --pretty="- %s" > CHANGELOG.md

 

 

📌 중요하지 않은 Commit 식별

중요하지 않은 커밋은 주로 기존에 작성된 로직에 변화가 없는 Commit을 뜻합니다.

주로 공백이나 빈 줄의 추가, 제거, 들여쓰기 같은 포맷의 변경이나 세미콜론 누락, 주석 등

중요하지 않은 커밋은 이진 탐색을 진행할 때 제외하도록 할 수 있습니다.

 

아래 명령어는 "irrelevant"라는 단어가 포함된 커밋 메시지를 찾아 제외하도록 합니다.

git bisect skip $(git rev-list --grep irrelevant <good place> HEAD)

 

 

📌 히스토리 조회 시 더 많은 정보 제공

  • Fix small typo in docs widget (tutorial instructions)
  • Fix test for scenario.Application - should remove old iframe
  • docs - various doc fixes
  • docs - stripping extra new lines
  • Replaced double line break with single when text is fetched from Google
  • Added support for properties in documentation

위 커밋 메시지들은 어떤 변경이 발생했는지 명시하려 하지만, 공통적인 규약이 있지는 않습니다.

 

  • fix comment stripping
  • fixing broken links
  • Bit of refactoring
  • Check whether links do exist and throw exception
  • Fix sitemap include (to work on case sensitive linux)

이번 커밋 메시지만 보고는 변경된 점을 알 수 없습니다.

따라서, docs, docs-parser, compiler, senario-runner 같이 어디가 변경되었는지 알려주는 게 좋다고 합니다.

 

 

📌 커밋 메시지의 형식

가장 집중해서 본 내용입니다.

평소에는 Commit 시에 <type>과 <subject>만 작성하였습니다.

이번 기회에 Commit 메시지가 어디까지 활용될 수 있는지 알게되었습니다.

 

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

 

<type>

  • feat: 새로운 기능 추가
  • fix: 버그 추가
  • docs: 문서 관련 작업
  • style: 스타일 변경 (들여쓰기, 공백 제거 등)
  • refactor: 리팩토링
  • test: 테스트 관련 코드 작업
  • chore: 자잘한 수정

 

그런데, Augular 9 Convention에서는 chore type이 제거되는 대신 build, ci, perf가 추가되었다고 합니다.

  • build: 빌드 관련 작업
  • ci: CI 설정 관련 작업
  • perf: 성능 개선

 

<scope>

개인적으로 가장 유용했던 부분이었던 것 같습니다.

기존에는 변경한 위치를 header에 작성 했었는데 <scope>를 통해 변경된 위치를 알려줌으로써

커밋 내역에 대한 가독성이 크게 향상되는 것을 경험할 수 있었습니다.

 

scope에는 어디가 변경되었는지가 작성되는데,

변경된 부분은 모두 들어가는 게 가능합니다.

  • location
  • browser
  • compile
  • rootScope
  • ngHref
  • ngClick
  • ngView
  • 등등

생략도 가능합니다.

 

변경된 클래스명 혹은 함수명을 작성하면 좋을 것 같습니다.

 

<subject> or <short summary> or <header>

명령문, 현재 시제로 작성합니다.

영문으로 작성 시 "Add"나 "Change"로 시작합니다.

 

주의할 점은 다음과 같습니다.

  • 첫 글자를 대문자로 작성하지 마세요.
  • 마지막에 마침표를 붙이지 마세요.

 

<body>

명령문, 현재 시제로 작성합니다.

변경한 이유와 변경 전과의 차이점을 설명합니다. 

 

<footer>

모든 주요 변경 내역(Breaking Change)들은 다음과 함께 footer에 언급되어야 합니다.

  • 변경점
  • 변경 사유
  • 마이그레이션 지시

해결된 이슈(Referencing Issues)는 Commit Message 최하단에 Closes #이슈번호 와 같이 작성되어야 합니다.

해결된 이슈가 여러 개인 경우에는 Closes #123, #23, #44와 같이 작성할 수 있습니다.

 

📌 커밋 메시지 예시

style($location): add couple of missing semi colons
feat(directive): ng:disabled, ng:checked, ng:multiple, ng:readonly, ng:selected

New directives for proper binding these attributes in older browsers (IE).
Added coresponding description, live examples and e2e tests.

Closes #351
docs(guide): updated fixed docs from Google Docs

Couple of typos fixed:
- indentation
- batchLogbatchLog -> batchLog
- start periodic checking
- missing brace
feat($compile): simplify isolate scope bindings

Changed the isolate scope binding options to:
  - @attr - attribute binding (including interpolation)
  - =model - by-directional model binding
  - &expr - expression execution binding

This change simplifies the terminology as well as
number of choices available to the developer. It
also supports local name aliasing from the parent.

BREAKING CHANGE: isolate scope bindings definition has changed and
the inject option for the directive controller injection was removed.

To migrate the code follow the example below:

Before:

scope: {
  myAttr: 'attribute',
  myBind: 'bind',
  myExpression: 'expression',
  myEval: 'evaluate',
  myAccessor: 'accessor'
}

After:

scope: {
  myAttr: '@',
  myBind: '@',
  myExpression: '&',
  // myEval - usually not useful, but in cases where the expression is assignable, you can use '='
  myAccessor: '=' // in directive's template change myAccessor() to myAccessor
}

The removed `inject` wasn't generaly useful for directives so there should be no code using it.