[ 프로젝트 ] client-server가 request/response 타입을 공유하는 방법?

현재 제목을 해결하기 위해

1. 여러 번 프로젝트를 뒤엎고
2. 타입스크립트 공식문서를 보았고
3. typescript-express-starter 구조 분석도 해보았다.
4. mono-repo에 대해 구글링도 해보았다.

결국 완벽하게 내가 구현하고자 하는 형태를 갖고 있는 레퍼런스는 찾지 못했다.

다만, typescript-express-starter가 가장 가까운 것을 알 수 있었다.

---

내가 해결하고자 했던 것은

• client가 server에 request를 보내고, response를 받는 과정에서, 양측이 type 정보를 공유하기 때문에
• 어느 한 쪽이 전송하는 데이터의 형태가 변하면 다른 한쪽에서 에러를 뱉는

형태를 구현하고 싶었다.

나는 이런 형태를 생각해내었다.

wo
├─ package.json
├─ packages
│  ├─ client
│  │  ├─ next-env.d.ts
│  │  ├─ package.json
│  │  ├─ pages
│  │  │  └─ index.tsx
│  │  ├─ tsconfig.json
│  │  └─ yarn.lock
│  ├─ server
│  │  ├─ ormconfig.js
│  │  ├─ package.json
│  │  ├─ src
│  │  │  ├─ app.ts
│  │  │  ├─ controllers
│  │  │  ├─ entity
│  │  │  ├─ factories
│  │  │  ├─ interfaces
│  │  │  │  └─ index.ts
│  │  │  ├─ routes
│  │  │  ├─ seeds
│  │  │  ├─ server.ts
│  │  │  └─ utils
│  │  ├─ tsconfig.json
│  │  └─ yarn.lock
│  └─ shared               <---- 
│     └─ types
│        ├─ exercise
│        │  └─ response.ts
│        ├─ post
│        │  ├─ request.ts
│        │  └─ response.ts
│        ├─ program
│        │  ├─ request.ts
│        │  └─ response.ts
│        ├─ record
│        │  ├─ request.ts
│        │  └─ response.ts
│        ├─ request.ts
│        └─ user
├─ tsconfig.json
└─ yarn.lock

shared안에 각 분기에 대한 response, request 정보를 저장해두었다.

여기 안에

// record/request.ts
export interface CreateRecord {
  weight: number;
  reps: number;
}

// record/response.ts
import Record from '@model/Record.entity';

export type CreateRecord = Record;
export type DeleteRecord = number;

이런 식으로 각 요청/응답의 타입정보를 저장해두었다.

따라서 server, client 양쪽에서 통신 전 이 타입정보를 가지고 타입체킹을 해보자!!

참고로 typescript-epress-starter에는 어떤 라이브러리를 사용한다.
class-validator
typeORM의 entity 작성방식과 비슷해보여서 사용하기 쉬워보인다.

import { IsEmail, IsString } from 'class-validator';

export class CreateUserDto {
  @IsEmail()
  public email: string;

  @IsString()
  public password: string;
}

이런 식으로 체크할 타입을 정의해놓으면 된다.