상수 처리에 관한 생각과 행동들

상수 처리 왜 하는가?

내 생각을 적어보자면, "가독성을 높이고, 쉽게 유지보수를 하기 위해"라고 생각한다.

1. 변경을 쉽게 하기 위해
   • 하드코딩된 문자열과 숫자들이 여기저기 흩어져 있는 코드에서, 요구사항이 바뀌거나 상황이 바뀌어 그 구체적인 값을 변경해야 한다면, 시간과 비용이 많이 들 것이다.
   • 하지만 하드코딩하지 않고 그 값들이 하나의 변수에 담겨 상수 처리되어 있다면, 위와 같은 상황에서 상수 값만 바꾸면 아주 쉽게 모든 값들이 변동된 값을 참조하도록 할 수 있다.

 

1. 의미 파악을 위해
   • 또, 하드코딩된 값을 처음 보면 그 값이 도대체 왜 그 값인지, 무엇을 의미하는지 알기 힘들다.
   • 그런데 숫자와 문자열이 있어야 할 자리에 대문자로 대문짝만하게 어떤 단어가 적혀있다면, 그 자리에 어떤 역할을 하는 값이 있을지 쉽게 상상할 수 있다. 구체적인 숫자는 그 상수가 가리키는 것을 따라가면 된다!

위 두 가지가 충족되면, 가독성이 좋고 유지보수하기 쉬운 코드가 완성된다! (물론 상수에 한해서...).

부트캠프 중 배운 것

• 일단 처음에는 상수로 바꾼 변수들을 최상단의 constants.js 파일에서 모두 관리했다.
• 상수를 모아놓은 파일이 길어지자 관심사에 따라 분리를 해줘야 한다는 것을 배웠다.

 

constants 파일을 폴더별로 분리했다.

 

• 너무 분리해서는 안 되는 것도 배웠다. 한 파일 안에서만 쓰는 값들은 그 파일 최상단에 선언해 관리하면 좋다. 상수를 바깥 파일에 별도로 분리하는 것은 여러 파일에서 그 상수를 사용할 수 있기 때문이다.

const getCommonMethods = (numberElement) => {
  return {
    // ...

    swapHorizontallyWith: (extracted, comparing) => {
      const [comparingElement, extractedElement]  = [comparing.getElement(), extracted.getElement()];
      const PREFIX = "translateX(";
      const POSTFIX = "px)";

      const { left: comparingLeft } = comparingElement.getClientRects()[0];
      const { left: extractedLeft } = extractedElement.getClientRects()[0];

      const distanceDifference = comparingLeft - extractedLeft;

      extractedElement.style.transform = PREFIX + (extracted.getTranslate().X + distanceDifference) + POSTFIX;
      comparingElement.style.transform = PREFIX + (comparing.getTranslate().X - distanceDifference) + POSTFIX;
    },
  };
};

export default getCommonMethods;

상수 처리하는 방법

나만의 상수 처리하는 기준은 다음과 같다.

• 일단, 하드코딩된 숫자나 문자열이 있다면 그것을 상수화할 수 있는지 고민한다.
  1. 경고창, 안내 메시지를 나타내는 문자열
  2. 옵션, 타입을 나타내는 문자열, 숫자
  3. 시간을 나타내는 변수, 입력 제한 길이와 같은 숫자

• 상수를 모아놓은 파일에 관해서는 다음과 같이 생각한다.
  • 한 파일 내에서 선언한 상수이지만, 다른 파일에서도 같은 의미의 상수를 사용해야 할 때, constants.js와 같은 파일을 만들어 공통으로 사용할 상수를 모은다.
  • 만약 관심사의 분리 원칙으로 디렉토리 별로 js파일들이 모여있다면, 디렉토리 별 constants.js 파일을 만들어 그 디렉토리 안 js파일들과 관련된 상수들을 관리한다.

• 상수는 어디까지나 그 값이 무엇이며, 어떤 역할을 하는지 의미 파악(가독성)에 목적을 둬야하므로, 상수 이름이 길어서 줄인다는 이유로만 디스트럭처링(destructuring)하면 안 된다. 애초에 변수 이름을 짧게 짓도록 하거나, 변수 이름이 너무 많은 걸 담고 있지는 않은지(그렇다면 또 분리를 해야 한다!) 생각한다. 그렇지 않다면 의미파악과 가독성에 우선순위를 둬 생략하는 일이 없도록 해야 한다.

const { COMPARE, EXTRACT, GO_SETTLED_PLACE, SETTLE, SWAP } = taskOptions

function someFunction (boxes, taskFactory) {
  model.addTask(taskFactory.create(SETTLE, { something }));
  for (let i = 1; i < boxes.length; i++) {
    // ...
    for ( /* */) {
      // ...
      if (isSortedIndexChanged) {
        model.addTask(taskFactory.create(EXTRACT, { something }));
        // ...
      }
      model.addTask(taskFactory.create(COMPARE, { something }))