[고정값 상수로 만들기] - 1차 팀프로젝트 리팩토링 #다섯 번째

간략한 팀프로젝트 소개

• tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 
• 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 

 

이전 리팩토링 과정

(1) - [불어나는 API_URL 관리]

(2) - [중복되는 매개변수 제거]

(3) - [spread & rest]

(4) - [불어나는 코드 모듈로 분리]

---

이번 리팩토링은 고정으로 사용되는 초기값, 상수값 등을 상수로 선언하도록 변경했다. 

 

💡 기존 코드

function getSlicedOverview(overview) {
  if (!overview) return "줄거리가 없는디"

  if (overview.length >= 80) {
    return `${overview.slice(0, 120)} . . .`
  }

  return overview;
}

간단한 예시코드이다. 영화의 줄거리가 담긴 `overview` 라는 변수의 길이가 80이상이면 뒤에 '. . .' 을 붙여 반환 한다. 만약 값이 없다면 "줄거리가 없는디" 와 같이 사용자에게 전달할 텍스트를 반환한다.

 

📍 문제점

딱 보인다. 조건문은 `80` 이상으로 설정해놓고 실질적으로 자르는 길이는 `120` 이다. css 디자인을 진행하면서 값을 여러번 수정한 적이 있다. "120은 많은 것 같고.. 80은 적은 것 같고.. 100은 또 많은 것 같고.." 뭐 어쨋든 이러한 시행착오를 겪으며 수정했었다. 그렇게 정신놓고 코드를 작성하고 나중에 보니 조건값과 처리값이 다르다는걸 보고 변경해야겠다고 생각했다.

 

 

💡 변경 코드

function getSlicedOverview(overview) {
  const MAX_OVERVIEW_LENGTH = 80;

  if (!overview) return "줄거리가 없습니다."

  if (overview.length >= MAX_OVERVIEW_LENGTH) {
    return `${overview.slice(0, MAX_OVERVIEW_LENGTH)} . . .`
  }

  return overview;
}

`MAX_OVERVIEW_LENGTH` 라는 상수를 만들어 항상 고정되고 같은 값을 참조하도록 아주 간단하게 변경했다. 나중에 코드를 확장하게 되어 다른 곳에서도 값이 필요해지면 상수를 관리하는 JS파일로 따로 분리하면 좋을 것 같다. 

 

📍 변경 목적

사실 이렇게 간단한 코드에서는 큰 문제보다 약간의 번거로움 정도만 있어 보인다. 하지만 돈이 관련된 문제가 발생한다면? 예시를 봐보자.

 

`12,000원` 짜리 상품을 판매하고 있다. 하지만 할인 이벤트를 진행해서 `8,000원`에 판매를 해야한다.  하지만 위와 같은 실수가 발생해서 어느 한 곳을 수정하지 못한 채 `12,000원`으로 할인 적용이 되지 않은 값으로 구매가 된다면 생각도 하기 싫은 문제가 발생할 것이다. 

---

💡 정리

사람은 꼭 중요한 부분에서 실수를 한다. 사소한 실수로 큰 불행을 부르지 않도록 고정된 값이 필요한 경우 무조건 한 곳에서 "상수로" 관리하도록 하자.