ENUM? 그게 뭔데

JavaScript와 React를 사용한 첫 팀 프로젝트에서 상수값들을 선언할 때는 그냥

<p>상수상수</p>
const title = "제목";
<p>{title}</p>
<!-- 이런식으로 대충 -->

그때야 프로젝트의 규모도 작았고 기능구현이 급했지,
상수선언이 어떠니 가독성이나 재사용성이 어떠니에는 전혀 신경을 안쓰기도 했고 못쓰기도 했다. 그리고 몰랐다 ㅎ

어차피 유지보수? 안해~ 남들에게 공개? 안해~ 라는 이유도 있었지만...

상수값 최소한의 양심적으로 선언하기

• JavaScript에서 상수를 선언하는 규칙은 다음과 같다.

  1. const 키워드 사용:
     상수를 선언할 때에는 const 키워드를 사용한다.
  2. 네이밍 규칙:
     일반적으로 상수 이름은 모두 대문자로 작성하며, 필요한 경우 단어 사이를 밑줄(_)로 구분한다. 이러한 규칙은 상수의 식별을 용이하게 하고, 코드의 가독성을 높이기 위한 것이다. 예를 들어, MAX_SIZE, PI, API_KEY 등이 대표적인 상수 이름이다.
  3. 상수 값의 할당:
     상수를 선언할 때 반드시 초기값을 할당해주어야 한다. 선언 이후에는 값의 재할당이 불가능하다.
  4. 블록 스코프:
     const로 선언된 상수는 블록 스코프를 갖는다. 이는 해당 상수가 선언된 블록 내에서만 유효하며, 블록을 벗어나면 접근할 수 없음을 의미한다.

  아래는 상수를 선언하는 예시이다:

  const PI = 3.14159265359;
  const MAX_SIZE = 100;
  const API_KEY = "abcdef12345";

• 객체와 배열

  객체(Object)와 배열(Array)은 자바스크립트에서 참조 타입(Reference Type)에 속하며, 일반적으로 상수로 선언되지 않는다. 하지만, 객체나 배열의 속성이나 요소는 상수로 선언하여 참조할 수 있다.

  1. 객체(Object):
  • 객체는 중괄호 {}를 사용하여 정의된다.
  • 객체의 속성들은 각각 key-value 쌍으로 구성된다.
  • 객체는 변경 가능한(mutable) 자료구조이기 때문에, 객체를 const로 선언해도 해당 객체의 속성을 변경할 수 있다. 하지만, 새로운 객체를 할당할 수는 없다.

  const person = {
    name: "John",
    age: 30,
  };
  
  person.age = 31; // 가능
  person = {}; // 불가능

  2. 배열(Array):
  • 배열은 대괄호 []를 사용하여 정의된다.
  • 배열은 여러 값을 순서대로 저장하는 자료구조이다.
  • 배열 역시 변경 가능한 자료구조이기 때문에, 배열 요소의 값을 변경할 수 있지만, 새로운 배열을 할당할 수는 없다.

  const numbers = [1, 2, 3, 4];
  numbers[0] = 5; // 가능
  numbers = [1, 2, 3]; // 불가능

  따라서, 객체나 배열을 const로 선언하면 해당 변수가 참조하는 메모리 주소는 변하지 않지만, 객체나 배열 내부의 속성이나 요소는 변경할 수 있다.

• Object.freeze 활용

  Object.freeze() 메서드를 사용하면 객체나 배열을 불변(immutable)하게 만들 수 있다. 이를 통해 객체나 배열의 속성 또는 요소를 변경하지 못하도록 할 수 있다.

  예를 들어:

  const person = Object.freeze({
    name: "John",
    age: 30,
  });
  
  person.age = 31; // 변경되지 않음

  이제 person 객체의 속성을 변경하려고 하면 오류가 발생하지 않고, 변경이 무시된다. 마찬가지로 배열에 대해서도 Object.freeze()를 사용할 수 있다.

  const numbers = Object.freeze([1, 2, 3, 4]);
  numbers[0] = 5; // 변경되지 않음

  const person = Object.freeze({
    name: "John",
    address: {
      city: "New York",
      country: "USA",
    },
  });
  <!-- address는 변경 가능 -->

그러나 주의할 점은 Object.freeze()는 얕은 불변성(Shallow immutability)만 제공한다는 것이다. 즉, 객체나 배열 내부의 객체나 배열은 변경할 수 있다. 만약 깊은 불변성(Deep immutability)을 원한다면, 추가적인 작업이 필요하다.

정리

기능구현 다음 단계는 클린코드 작성인 것 같다. 사실 다음 단계라기보다는 기능 구현과 클린코드는 당연하게 함께 가는것이기도 하다.
기능 구현의 다음 단계는 성능 최적화...
아무튼 이런 기본적인것들을 놓친다면 성능최적화는 고사하고 협업도 어려울 수 있으니 기본은 챙기자!