[프리코스 3주차] - 좋은 네이밍을 위한 규칙

♧학습한 글의 원본

▷ 기본 규칙

✅ [S-I-D] 따르기

기억하기 쉽게 Short

자연스럽게 읽히도록 Intuitive(직관적으로)

무엇을 하고 소유하는지 가장 효과적인 방법으로 Descriptive(서술하기)

 

✅ 축약형 이름 피하기

- onItmClk (x)

- onItemClick (o)

 

✅ 자료구조를 포함한 이름 피하기

- List<Item> itemList (x)

- List<Item> items (o)

 

✅ 문맥 상 중복이 있는 이름 피하기

class MenuItem{
    handleMenuItemClick = ... (x)
    handleClick = ... (o)
}

MenuItem.handleMenuItemClick (x)
MenuItem.handleClick (o)

✅ 예상된 결과 반영하는 이름 짓기

/* Bad */
const isEnabled = itemCount > 3
return <Button disabled={!isEnabled}>

/* Good */
const isDisabled = itemCount <= 3
return <Button disable={isDisabled}>

✅ 함수 이름은 A/HC/LC 패턴으로 짓기

함수 이름 = (prefix) + action(A) + high context(HC) + low context(LC)

함수 이름              Prefix	Action(A)  High context(HC)  Low context(LC)
getUser                          get	       User	
getUserMessages                  get	       User            Messages
handleClickOutside               handle	       Click           Outside
shouldDisplayMessage   should	 Display       Message

함수의 의미는 함수를 이루는 단어들을 어떻게 배치하냐에 따라 문맥이 완전하게 달라진다.

HC와 LC의 차이는 함수의 기능에서 강조하고 싶은것을 HC로 정하는 것이다

 

예를 들어, shouldUpdateComponent 는 컴포넌트를 업데이트 하는 것을 강조한다는 의미이고,

shouldComponentUpdate 는 컴포넌트가 스스로 업데이트 되야한다는 의미이다.

▷ 함수의 Action 에 쓰일 동사들

✅ get 과 set

/* get */ 즉시 데이터에 접근할 때
function getFruitCount() {
  return this.fruits.length
}

/* set */ A의 값을 B로 설정할 때
function setFruits(nextFruits) {
  fruits = nextFruits
}

✅ remove 와 delete

remove : 어떤 곳(복사 된 곳)에서 무언가를 지울 때

delete : 실제 영역(원본 데이터 같은 곳)에서 무언가를 완전히 지울 때 ex) DB의 데이터

 

✅ add 와 create의 차이

add는 장소가 필요하지만 create는 장소가 필요없다.

예를 들어, addItem은 아이템을 추가하다란 뜻으로 문맥상 어디에? 추가했다는 거지? 같은 의문이 든다.

이 처럼 add는 추가적으로 어떤 장소가 함수에 이름에 포함되어야 한다.

 

하지만, createItem은 아이템을 만든다. 라고 끝맺음을 맺는 것처럼 함수에 장소가 필요 없다.

 

✅ compose

compose : 이미 존재하는 것에서 새로운 데이터를 창조할 때 쓴다.

function composePageUrl(pageName, pageId) {
  return pageName.toLowerCase() + '-' + pageId
}

✅ handle

handle : 행동을 다룰 때 사용한다. 주로, callback method 의 이름을 지정할 때 쓰인다고 한다. 출력 느낌

function handleLinkClick() {
  console.log('Clicked a link!')
}

link.addEventListener('click', handleLinkClick)

▷ 접두어 (prefixes)

✅ is

현재시간의 특징과 상태를 묘사할 때 주로 boolean 과 함께 쓰인다.

const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state

if (isBlue && isPresent) {
  console.log('Blue is present!')
}

✅ has

현재 문맥에서 특정 값이나 상태를 가지고 있을 때 주로 boolean과 함께 쓰인다.

/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0

/* Good */
const hasProducts = productsCount > 0

✅ should

특정 행동을 유발해야 하는 상황일 때 주로 boolean과 함께 쓰인다.

/* url과 예상된Url이 다르면 Url을 업데이트 해야한다! */
function shouldUpdateUrl(url, expectedUrl) {
  return url !== expectedUrl
}

✅ 그 외

• min/max 와 prev/next 도 있다.
• 단수는 하나의 값일 때, 복수는 여러개의 값을 가지고 있을 때 쓰기

/* Bad */
const friends = 'Bob'
const friend = ['Bob', 'Tony', 'Tanya']

/* Good */
const friend = 'Bob'
const friends = ['Bob', 'Tony', 'Tanya']