Merge pull request #18 from gitgitWi/nextjs/v1

포스팅 (`enum -> literal 타입 갈아타기`) 추가, prettier/editorconfig 설정 추가

Author: gitgitWi

.editorconfig

@@ -0,0 +1,21 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.json]
+insert_final_newline = ignore
+
+[**.min.js]
+indent_style = ignore
+insert_final_newline = ignore
+
+[*.md]
+trim_trailing_whitespace = false
+

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf",
+  "printWidth": 90,
+  "trailingComma": "es5"
+}

package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "prettier": "^2.3.2",
+    "typed-scss-modules": "^4.1.1",
     "typescript": "^4.3.5"
   }
 }

pages/posts/til/ts/enum-to-template-literal.mdx

@@ -0,0 +1,232 @@
+# [TypeScript] `enum` -> `literal` 타입 갈아타기(+`class-validator`, `template literal` 타입 활용)
+
+### 3줄 요약
+
+> - `enum`은 tree-shaking, memory-leak 문제가 있고, 여러 enum을 하나의 enum으로 합칠 수 없다
+> - `class-validator`에서 `IsEnum`을 쓰려면, 타입이 아닌 객체가 필요하다
+> - `literal`과 `Readonly<Record<K, V>>` 유틸 타입을 활용해 문제를 해결했다
+
+[👉 hashnode에서 보기](https://wiii.hashnode.dev/enum-to-template-literal)
+
+---
+
+## `enum`은 비싸고 불편하다!
+
+다른 언어들과 마찬가지로 `TypeScript`도 열거형 타입으로 [`enum`](https://www.typescriptlang.org/ko/docs/handbook/enums.html)을 제공한다
+
+함수 인자로 특정 string만 들어와야 하는 경우 등 유용하게 쓸 수 있다
+
+<br />
+
+### Tree-shaking, 메모리 문제
+
+그러나 Line 기술 블로그(['TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.'](https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/))에서 잘 설명하는 것처럼, 순진한 enum 타입은 tree-shaking이 안되고 메모리 낭비까지 이어질 수 있다.
+
+<br />
+
+### 예상과는 다른 Type Union
+
+무엇보다 개인적으로 가장 불편하게 느껴지는 것은 다른 타입들과는 다르게, ***enum은 `union`으로 여러 enum을 하나로 합칠 수 없다는 점이다***
+
+아래 예시 코드는 실무에서 구현 중인 API 타입 일부를 조금 수정해서 가져온 것이고, 전형적인 enum을 가져왔다
+
+```typescript
+enum PeriodA {
+  DAILY = 'DAILY',
+  MONTHLY = 'MONTHLY'
+}
+
+enum PeriodCommon {
+  WEEKLY = 'WEEKLY',
+  QUARTERLY = 'QUARTERLY',
+  YEARLY = 'YEARLY'
+}
+```
+
+[Union Type](https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%EC%9C%A0%EB%8B%88%EC%96%B8-%ED%83%80%EC%9E%85)을 쓰는 대부분은 아래처럼 A 타입 일수도 있고, B 타입일 수도 있을 때이다
+
+```typescript
+type StringOrNumber = string | number;
+
+const strOrNumberLogger = (what: StringOrNumber) => console.log(what);
+strOrNumberLogger('asdf');
+strOrNumberLogger(123123);
+```
+
+<br />
+
+**_그러나 이 넘의 enum은 그렇지 않다_** 
+
+`PeriodA`와 `PeriodCommon`를 합친 `Periods`라는 enum을 만들고 싶지만 그 과정은 쉽지 않다
+
+아래처럼 타입 Union을 하면 당장은 에러가 나진 않지만, 실질적으로는 사용할 수 없는 타입이 된다
+
+```typescript
+type Periods = PeriodA | PeriodCommon;
+
+const periodLogger = (period: Periods) => console.log(period);
+periodLogger('DAILY'); // error
+```
+
+<br />
+
+Intersection은 더더욱 안된다
+
+둘 사이에 공통점이 없기 때문에 **`never`** 타입이 된다
+
+```typescript
+type Periods = PeriodA & PeriodCommon; // -> never
+
+const periodLogger = (period: Periods) => console.log(period);
+periodLogger('DAILY'); // error
+```
+
+<br />
+
+타입 assertion으로 에러를 안낼 수는 있는데..***아무 의미 없는 타입 선언***이 되어 버린다
+
+![](https://images.velog.io/images/johnwi/post/669de5ad-34fb-4a23-b86e-a8cb8ea5326a/image.png)
+
+<br />
+
+---
+
+## `class-validator`의 `IsEnum`을 쓰려면 객체가 필요하다!
+
+가장 속 편한건 단순히 `literal`'만' 쓰는 거다
+
+토스 기술 블로그 [Template Literal Types로 타입 안전하게 코딩하기](https://toss.tech/article/template-literal-types)에서 소개하는 것처럼, 
+
+TypeScript에는 문자열을 가지고 다양한 타입을 만들어 낼 수 있는 재미있는(?) 기능이 있다
+
+<br />
+
+다만 위에서 예시로 가져온 `Periods`는 단순히 함수 인자의 타입만 추론하는데 쓰는 것이 아니라,
+
+아래와 같이 **[`class-validator`](https://github.com/typestack/class-validator)를 활용해 API 요청 유효성 검사**에도 사용될 수 있어야했다
+
+```typescript
+export class GetChartDto {
+  @IsNotEmpty()
+  @IsEnum(Periods)
+  period: PeriodNames;
+}
+```
+
+<br />
+
+당연한 거지만, 아래와 같이 type을 함수 인자로 넣을 수는 없다
+
+![](https://images.velog.io/images/johnwi/post/515a911a-181d-4730-8f15-610f6dc508a3/image.png)
+
+
+<br />
+
+위 라인 블로그에서 가장 추천하는 방법은 객체를 가지고 Union 타입을 만드는 것이다
+
+enum으로 union 만들 방법을 구글링(`'typescript enum union'`)하면 나에게 가장 먼저 뜨는 글인
+
+정규현님의 [enum type 대신 union type으로 변경하기](https://ajdkfl6445.gitbook.io/study/typescript/enum-type-union-type)에서도 그 방식을 개선하여 사용한 경험을 보여주고 있다
+
+여기서 핵심은 아래와 같다
+
+```typescript
+const READONLY_객체 = 객체 as const;
+type enumLike = keyof READONLY_객체[keyof typeof READONLY_객체]
+```
+
+짧고 유용한 코드지만, 부족한 나에게는 이게 뭘 의미하는지 한번에 파악하기가 조금 어렵다고 느껴졌다
+
+다만 `Readonly` 타입을 사용한다는 점에서 힌트를 얻을 수 있었다 
+
+_(이게 꼭 필요한 건지는 아직 테스트를 안해봤다...)_
+
+<br />
+
+## _(적어도 나에게는)_ 좀더 편한 방법!
+
+결론은 아래와 같다
+
+```typescript
+// periods.ts
+type ReadonlyRecord<K extends string, V> = Readonly<Record<K, V>>;
+
+export type PeriodANames = 'DAILY' | 'MONTHLY';
+export const PeriodA: ReadonlyRecord<PeriodANames, PeriodANames> = {
+  DAILY: 'DAILY',
+  MONTHLY: 'MONTHLY',
+};
+
+type PeriodCommonNames = 'WEEKLY' | 'QUARTERLY' | 'YEARLY';
+const PeriodCommon: ReadonlyRecord<PeriodCommonNames, PeriodCommonNames> = { /** */ }
+
+export type PeriodNames = PeriodANames | PeriodCommonNames;
+export const Periods = { ...PeriodA, ...PeriodCommon };
+```
+
+<br />
+
+### 커스텀 유틸 타입 `ReadonlyRecord`
+
+이 부분은 반드시 필요한 부분은 아니고, 개인적으로 객체를 `Reaonly`로 만드는 경우가 많아 따로 선언했다
+
+실무 코드에서는 좀더 편한 코딩을 위해 끼를 부려서 아래와 같이 선언했다
+
+객체 `key`, `value`가 모두 `string`인 경우에는 기본값 덕분에 제네릭을 생략할 수 있고, 
+
+`string`은 아니지만 `key`, `value`가 동일한 타입인 경우는 하나만 적어주면 된다
+
+```typescript
+export type ReadonlyRecord<P extends string = string, Q = P> = Readonly<Record<P, Q>>;
+
+export const PeriodA: ReadonlyRecord<PeriodANames> = { /** */ }
+```
+
+<br />
+
+### `literal` 타입; `PeriodNames`, `_RestPeriodNames`
+
+단순한 문자열 literal 타입이다
+
+Union이라는 의미에 맞게, ***관심사에 따라 분리된 타입들을 하나로 묶는 것이 쉽다***
+
+`keyof typeof 객체`를 대신하기 위해 타입을 하나하나 더 써야한다는 것이 단점이기는 하지만,
+
+아래 객체를 생성할 때 자동완성이 되기 때문에 크게 불편함을 느끼진 않을수 있다
+
+오히려 하나의 타입에 너무 많은 속성이 있어서 타이핑 시간이 오래 걸릴 정도라면, 타입을 충분히 분리하지 못한 게 아닐지 검토해봐야 할 것 같다
+
+또 토스 블로그에서 소개한 것처럼, **`template-literal` 타입들을 조합한 새로운 타입들을 선언하기 매우 편리해진다**
+
+```typescript
+export type MarketNames = 'domestic' | 'overseas';
+export type CategoryNames = 'index' | 'stock';
+
+export type DetailChartTypeNames = `${MarketNames}-${CategoryNames}`;
+export const DetailChartTypes: ReadonlyRecord<DetailChartTypeNames> = {
+  'domestic-index': 'domestic-index',
+  'domestic-stock': 'domestic-stock',
+  'overseas-index': 'overseas-index',
+  'overseas-stock': 'overseas-stock',
+};
+```
+
+
+<br />
+
+### Readonly 객체를 `class-validator IsEnum`에 활용
+
+```typescript
+// get-chart-dto.ts
+export class GetChartDto {
+  @IsNotEmpty()
+  @IsEnum(Periods)
+  period: PeriodNames;
+}
+```
+
+`literal`을 활용하여 안전한(type-safe) `Readonly` 객체를 만들고, `class-validator`에서 활용한다
+
+`class-validator`가 아니더라도, 기존 `enum` 사용하듯 `Periods.DAILY`와 같이 사용할 수도 있다
+
+JS로 Transpile 되었을때, 단순 객체 리터럴이기 때문에 라인 블로그대로라면 tree-shaking도 가능하다