BE THE DEVELOPER

10월 16일 (2): JS 컨벤션에 조금 더 익숙해져보자 본문

일기장/우아한테크코스 7기

10월 16일 (2): JS 컨벤션에 조금 더 익숙해져보자

미역굳 2024. 10. 30. 18:00

JavaScript 컨벤션들 익히기

과제 관련 가이드를 보았을 때, 꽤나 많은 컨벤션이 있었고 이것들을 익힐 생각을 하니 어지러웠다. 하지만 첫 주차에 확실하게 익혀놔야 나중에 편하지 않을까 하는 생각이 들어서 오늘 조금 진행해보기로 했다.

AngularJS Git Commit Message Conventions

우선 내 이름으로 된 브랜치를 만들고 README를 수정하고 올리려 보니, 커밋 메시지에 관련한 컨벤션이 있던게 기억이 나서 이거 먼저 확인해보려 한다.

 

출처: https://velog.io/@outstandingboy/Git-커밋-메시지-규약-정리-the-AngularJS-commit-conventions

커밋 컨벤션은 앵귤러에서 사용하는거라고 한다. 다행히 한글로 번역해놓은 글이 있어서 이 글을 기반으로 작성해보려 한다.

CHANGELOG.md와 git bisect

해당 내용들은 단순히 커밋을 입력할 때가 아닌, 커밋을 탐색하기 위한 수단으로 쓰이는 것으로 보인다. 지금은 컨벤션에 대해 파악하려 하는 것이기 때문에 우선은 넘겼다.

commit message 형식

여기서는 커밋 메시지의 포맷을 정해놓았고, 한 줄이 아닌 여러줄로 작성하는 걸로 권장하는 듯하다. 형식은 아래와 같다.

<type>(<scope>): <short summary>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

맨 윗줄에는 내가 평소에 알고 있던 것처럼 docs, feat들과 함께 요약해서 작성하는 듯하다. 하지만 body와 footer가 있는걸로 봐선, 단순히 요약만 해서 전달하는 것이 아닌 상세 내용도 함께 커밋에 올리는 듯하다.

 

type에는 내가 평소에 잘 알던 내용들이라 상관없지만, 내용에 어떻게 들어가야 할지와 scope가 정확히 무엇인지에 대한 설명은 집중해서 봤다.

요약에는 명령문, 현재 시제로 작성해야 하며 마침표를 사용하지 않아야 한다. 명령문이라는 걸로 봐서 한글보단 영어로 작성하는 게 자연스러울 것이라는 생각이 들긴 했다. 또한 소문자만 사용해야 한다고 한다. (소문자의 이유는 잘 모르겠다.)

 

또한 scope는 딱 정해졌다기 보다는, 변경된 부분을 나타내는 단어면 크게 상관없는 듯하다. 클래스 네임일 수도 있고, 파일명일수도 있어보인다.

 

중간에도 명령문과 현재 시제 기반으로 작성하며, 변경 전과 후의 차이점을 기반으로 적어야 한다고 한다. 사실 이 부분까지 적을 일이 있을 지는 잘 모르겠다.

 

하단에는 생각보다 많은 내용이 들어갔다.

  1. 주요 변경 내역(변경점, 변경 사유, 마이그레이션 지시)
  2. 해결된 이슈(Closes #<이슈번호>와 같은 형식으로 기록해야 함.)

예시들을 보았더니 그나마 이해가 되는 듯하다. 하지만 프리코스정도의 규모에서 사용할 일이 있을까…? 싶지만 영어 실력도 키우고 여러줄 커밋 작성하는 법 연습하는 것도 나쁘지 않을 듯하다. 내가 평소에 커밋을 굉장히 잘게 쪼개면서 올리는 편이기에 커밋 작성에 꽤 많은 시간을 쓰지 않을까 싶다.

 

그래도 예시 중에서 한줄짜리가 있는 걸로 보아, 무조건 여러줄로 작성하는 건 아닌듯하다.

  • 예시 
    fix($compile): couple of unit tests for IE9

Older IEs serialize html uppercased, but IE9 does not...
Would be better to expect case insensitive, unfortunately jasmine does
not allow to user regexps for throw expectations.

Closes #392
Breaks foo.bar api, foo.baz should be used instead

    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

    style($location): add couple of missing semi colons

    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.

우아한테크코스 컨벤션

기본적으로 JS 코드를 작성하는 것은 에어비앤비의 스타일 가이드를 준수하지만, 추가적인 컨벤션이 있다고 한다. 하지만 거의 기본적인 것들이고, 상수에 snake case 쓰라는거 정도만 알아두고 가면 될 듯하다.

Airbnb 자바스크립트 스타일 가이드

에어비앤비에서 사용하는 가이드로, 자바스크립트 가이드 중에 가장 유명한 것으로 알고 있다. 하지만 에어비앤비 가이드는 좀 알아둬야할 내용이 많아보여서 오늘은 여기까지만 알아보고, 내일부터 실제로 코드짜기 및 컨벤션 파헤치기에 돌입할 듯하다.

 

오늘 꽤나 많은 양의 글을 적은 거 같은데, 이렇게 글을 많이 적으며 공부하는게 확실히 내 스타일에 잘 맞는듯 하다. 꾸준히 해보자…

'일기장 > 우아한테크코스 7기' 카테고리의 다른 글

10월 19일: 문제 정의하고 README.md 작성하기  (1) 2024.11.02
10월 18일: 주어진 라이브러리를 분석하고 코드 짜기  (0) 2024.11.01
10월 17일: 코드의 목표 설정 및 실제 코드 작성하기  (0) 2024.10.31
10월 16일 (1) : Git을 제대로 알고 이용하자 (1)  (1) 2024.10.30
10월 15일: 우테코 서비스 둘러보기, 목표 설정하기  (9) 2024.10.29
'일기장/우아한테크코스 7기' Related Articles more