Documenso 코드에서 TypeScript의 ts-pattern 라이브러리 활용 법

2024-12-15 23:13:09

opensourcetypescriptnextjsdocumenso

ts-pattern 소개: TypeScript에서의 패턴 매칭

ts-pattern은 TypeScript를 위한 강력한 패턴 매칭 라이브러리로, 뛰어난 타입 추론을 통해 코드의 조건문을 보다 간결하고 안전하게 작성할 수 있게 합니다. 복잡한 조건문을 간결한 형태로 표현할 수 있게 해주며, 모든 가능한 케이스를 빠뜨리지 않도록 검사하는 확장 기능을 제공합니다.

ts-pattern 예제

import { match, P } from 'ts-pattern';

type Data =
  | { type: 'text'; content: string }
  | { type: 'img'; src: string };

type Result =
  | { type: 'ok'; data: Data }
  | { type: 'error'; error: Error };

const result: Result = { /* ... */ };
const html = match(result)
  .with({ type: 'error' }, () => <p>Oups! An error occurred</p>)
  .with({ type: 'ok', data: { type: 'text' } }, (res) => <p>{res.data.content}</p>)
  .with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => <img src={src} />)
  .exhaustive();

위 예제는 ts-pattern이 어떻게 작동하는지를 간단히 설명해 줍니다. 조건에 따라 HTML 요소를 반환하고, 모든 가능한 케이스를 처리합니다.

Documenso 소스 코드에서의 ts-pattern 활용

Documenso는 대규모 오픈 소스 프로젝트로써, ts-pattern 라이브러리를 사용하여 다양한 개발 요구를 충족하고 있습니다. 예를 들어 upload/put-file.ts 파일 내에서 ts-pattern의 매치를 사용하는 방법은 다음과 같습니다.

매치 사용 예제

import { match } from 'ts-pattern';
import { env } from 'next-runtime-env';

export const putFile = async (file: File) => {
  const NEXT_PUBLIC_UPLOAD_TRANSPORT = env('NEXT_PUBLIC_UPLOAD_TRANSPORT');

  return await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
    .with('s3', async () => putFileInS3(file))
    .otherwise(async () => putFileInDatabase(file));
};

위 코드는 환경변수 NEXT_PUBLIC_UPLOAD_TRANSPORT에 따라 파일을 S3에 업로드할지 데이터베이스에 저장할지를 결정합니다.

필수 변수를 통한 논리적 흐름

NEXT_PUBLIC_UPLOAD_TRANSPORT는 process-env.d.ts 파일에서 다음과 같이 정의되어 있습니다:

NEXT_PUBLIC_UPLOAD_TRANSPORT?: 'database' | 's3';

해당 변수는 database 또는 s3 두 가지 값만을 가질 수 있으므로, 코드에서는 각각의 경우에 대응하는 로직을 간결하게 작성할 수 있습니다.

ts-pattern의 효과적 활용

ts-pattern의 .exhaustive() 기능은 모든 경우의 수를 처리할 수 있게 보장하지만, 단순히 두 가지 문자열 값만을 매칭할 때는 .otherwise로 충분히 처리가 가능합니다.

결론

Documenso의 코드에서의 ts-pattern 활용은 복잡한 조건문을 간결하게 만들고, 개발자가 모든 가능한 케이스를 다루도록 강제함으로써 소프트웨어의 안정성과 가독성을 개선합니다. 이러한 점에서 ts-pattern은 대규모 프로젝트에서 특히 유용하게 사용될 수 있습니다.

R_11