Enum에 대하여..

2024-09-25

front
Enum에 대하여..

Enum에 대하여..

개발 내용

export const enum Color {
  GREY = '#5c5c5c',
  WHITE = 'white',
  BLACK = 'black',
  KIO_ORANGE = '#EB6D09',
}
자주 사용되는 색상들에 대하여 enum을 적용하였다.

배운 내용

Enum?? 그게 뭐지?????
 
Enums allow a developer to define a set of named constants. 
Using enums can make it easier to document intent, or create a set of distinct cases.
 
한국어로 직역하면 ‘열거’의 뜻을 가진다. 위 말을 번역해보자면,
Enum을 사용하면 개발자가 명명된 상수 집합을 정의할 수 있습니다. 열거형을 사용하면 의도를 더 쉽게 문서화하거나 일련의 개별 사례를 만들 수 있습니다.
라고 한다.
 

이런 느낌이구나!

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
아하 이렇게 상수 집합의 값을 정함으로써, 허용 가능한 값을 제한할 수 있고 가독성을 챙길 수 있게 됐다.
 

Typescript에서 Enum은 사용하지 마라????

LINE ENGINGEERINGLINE ENGINGEERINGTypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

들어가며 안녕하세요. LINE Growth Technology UIT 팀의 Keishima(@pittanko_pta)입니다. 이번 글에서는 TypeScript의 enum을 사용하지 않는 편이 좋은 이유를 Tree-shaking 관점에서 소개하겠습니...

LINE ENGINGEERINGLINE ENGINGEERING
Enum에 대해 파악하고 룰루랄라 사용하려고 했는데 위와 같은 글을 보았다. 아니나 다를까 Typescript Enum을 사용하지 말라는 것이었다. 이는 사실 어느정도 MSG가 들어간 내용이기도 하다.
 
Typescript Enum의 경우 Tree Shacking이 안된다. Tree Shacking이란? 간단히 말해 사용하지 않는 코드들을 없애는 기능이다. (Rollup과 같은 번들러에서는 안되고 webpack은 한정적으로 지원하는 것 같다.)
 
음 그럼 무엇을 사용해야 할까?
필자는 union type > const enum > enum 순으로 사용하라고 추천하고 있다.
 

Const Enum????

const enum의 경우에는 tree shacking이 적용된다. 그러나 기존 enum의 경우 key-value로써 양방향 바인딩이 이루어져 있었다면, const enum은 그렇지 않다. 그리고 inlining을 통해 enum이 사용되는 곳에 실행할 코드로 치환된다. 그리고 const enum 의 멤버는 문자열 리터럴로만 접근 가능하다.
 
그러나 몇가지 단점이 있다.

Const enum pitfalls - typescriptlangtypescriptlangHandbook - Enums
Handbook - Enums

Handbook - Enums

How TypeScript enums work

typescriptlangtypescriptlang

const enum을 사용하는 것이 처음에는 간단해 보일 수 있지만, 특히 .d.ts 파일에 있는 ambient const enum(외부에서 정의된 enum)과 프로젝트 간의 공유와 관련된 미묘한 문제들이 있습니다. 만약 여러분이 .d.ts 파일을 배포하거나 사용하고 있다면, 이러한 문제들은 여러분에게 영향을 미칠 가능성이 높습니다. 그 이유는 tsc --declaration 명령어가 .ts 파일을 .d.ts 파일로 변환하기 때문입니다.
1. isolatedModules와의 비호환성
  • TypeScript의 isolatedModules 모드는 ambient const enum과 근본적으로 호환되지 않습니다. 이 모드를 사용하면 const enum이 컴파일된 코드에서 잘못된 값으로 인라인될 수 있습니다. 따라서 ambient const enum을 사용하면 이를 사용하는 하위 프로젝트는 isolatedModules를 사용할 수 없게 됩니다.
 
  1. 버전 불일치 문제
  • 컴파일 시 의존성 A 버전에서 const enum 값을 인라인하고, 런타임에서는 의존성 B 버전을 사용한다면, A와 B의 enum 값이 다를 수 있습니다. 이 경우 if문이나 조건 분기에서 잘못된 경로를 택하는 등 예기치 않은 버그가 발생할 수 있습니다. 이러한 버그는 특히 컴파일과 테스트가 동일한 의존성 버전에서 실행되는 경우 눈치채기 어렵습니다.
  1. importsNotUsedAsValues: "preserve"와 const enum
  • importsNotUsedAsValues: "preserve" 옵션은 const enum이 값으로 사용될 때 import 문을 제거하지 않지만, ambient const enum의 경우 런타임에 필요한 .js 파일이 반드시 존재한다고 보장되지 않습니다. 이로 인해 해결되지 않는 import 문이 런타임에서 오류를 일으킬 수 있습니다. 보통 import 문을 명확하게 제거하기 위해 사용하는 방법은 타입 전용 import이지만, 현재는 타입 전용 import 방식이 const enum 값을 지원하지 않습니다.
 
위와 같은 문제점들은 외부 라이브러리의 const enum을 import 하거나, 배포하려는 경우에 발생하는 문제들이다. 오히려 다음과 같이 프로젝트 내부에서의 사용은 문제가 없으며, 퍼포먼스 향상에 도움이 된다고 적혀있다.
 
Unlike inlining enums from other projects, inlining a project’s own enums is not problematic and has performance implications.
 
이처럼 여러가지를 고려한 결과, const enum을 사용하기로 했다. as const를 활용해 union type을 명시하기에는 뭔가 배보다 배꼽이 더 커지는 느낌이 들었고, enum의 최적화된 버젼인 const enum을 사용하는게 좋겠다는 생각이 들었다.
 
 

후기

Enum을 처음 적용시켜 봤는데, 생각보다 간단하고 또 문서화 하는데 아주 강력한 기능을 제공하는 듯 하다. 그리고 관련 자료조사를 정말 열심히 해서 이에 대해 또 알아갈 수 있는 기회였다.