[Modern][Javascript]Enum 올바르게 쓰는법 (클린코드)

Modern 시리즈는 작성일 기준 최신 자바스크립트 문법으로 구현한 예제입니다.

---

실무에서 협업할 때, Enum을 올바르게 사용하면 가독성이 좋아져서 프로그래머가 실수할 확률을 줄여줍니다.

그럼 어떻게 작성해야 Enum을 "잘" 썻다 라고 말할 수 있을까요??

 

일반적으로, Enum은 DB 저장 효율성을 위해서 각 숫자에 의미를 부여해 저장합니다.

예컨데 1은 손님, 2는 사용자, 3은 관리자 ... 이런 식이죠.

 

그러나 데이터를 화면에 표시할 때, 사용자의 화면에서는 숫자가 아닌 읽을 수 있는 텍스트로 표시되어야 합니다.

그래서 프론트엔드 개발을 한다면 Enum을 어떻게 작성하냐에 따라 향후 유지보수성이 크게 갈리는데요.

만약 Enum을 사용하지 않고 개발하면 프론트엔드 코드를 읽을 때, DB까지 봐야하는 불상사가 생길수도 있습니다. 어쩌면 DB를 봐도 모를수도 있습니다. 숫자하나 수정하는데 며칠이 소모될 수도 있죠. 야근이다~

 

아래는 제가 Enum을 평가하는 몇가지 항목입니다.

경험 상 요구사항을 충족하면 유지보수에 큰 어려움이 없었습니다.

1. Enum의 항목 이름을 보고 데이터를 유추할 수 있는가?? (실제 데이터)
2. Enum의 항목이 어떤 역할인지 알 수 있는가??
3. Enum의 선언을 보지 않고도 전체 구조를 파악할 수 있는가??

const AUTH = {
    "손님": 1,
    "사용자": 2,
    "관리자": 3
};

Object.freeze(AUTH);

export default AUTH;

 

거의 대부분의 Enum이 이런식으로 선언되어 있습니다. 그리고 사실 이렇게 작성해도 개발하는데 지장이 없습니다.

그러나 Enum이 사용되는 부분의 코드만 봐서는 AUTH의 전체 구조를 알 수 없죠.

import AUTH from "@/enums/auth"

// 사용될 때는 이런식으로 사용해요.

if (data.auth === AUTH["손님"])
    ...

 

이 코드로 AUTH의 모든 구조를 알 수 있으신가요? 절대 알 수 없겟죠. AUTH["손님"] 값이 어떤 값인지도 알 수 없습니다.

이제부터 제가 AUTH의 모든 구조를 파악할 수 있는 방법을 알려드리겠습니다.

JSDoc + Enum

아마 주석 꽤나 작성해신본은 JSDoc에 대해서 잘 알고 계시겠죠.

바로 Enum의 선언을 보지 않고도 전체 구조를 파악하는 방법은 Enum에 JSDoc을 작성하는 겁니다.

 

/** @enum 클라이언트 권한 관리 */
const AUTH = {
  /** @type {1} */
  손님: 1,
  /** @type {2} */
  사용자: 2,
  /** @type {3} */
  관리자: 3
}

 

코드가 꽤나 복잡해보이지만 주석만 추가되었습니다.

아까와 어떤 차이가 있어보이나요??

import AUTH from "@/enums/auth"

// 사용될 때는 이런식으로 사용해요.

if (data.auth === AUTH["손님"])
    ...

 

여전히 사용될때는 코드만 보고 Enum의 전체 구조가 파악되지 않는것처럼 보입니다.

하지만 IDE의 도움을 받으면 얘기가 전혀 달라집니다.

---

 

바로 VSCode의 ESLint라는 확장을 설치하면 적용되는 툴팁 기능인데요. 

JSDoc을 적용하면 마우스 호버 시 작성했던 주석의 내용을 확인할 수 있습니다.

마치며...

 

JSDoc을 사용하여 Enum을 올바르게 사용하는 방법에 대해서 알아보았습니다.

추천 포스트

[Javascript] Enum 사용하기

 

[프로그래밍] 나만의 클린코드