저는 계층형 모킹 아키텍처 구조로 프로젝트를 구성하였습니다.

Client ←→ BFF (MSW Handler) ←→ Service ←→ Data

사용된 data 구조

정적인 JSON 파일로 구성된 이 계층은 실제 데이터베이스나 외부 API의 원본 응답을 모사하는 역할을 합니다. 실제 서버응답을 받는 환경을 모사하기 위해 이 계층의 데이터는 별도의 가공 없이 그대로 사용했습니다.

왜 typeof로 데이터 타입을 구성했는지

현재 json데이터의 타입을 별도로 지정하지 않고, typeof로 타입 추론을 하여 사용하고 있습니다.

type PayMentMethodOriginData = typeof ORIGINAL_PAYMENT_METHOD_DATA
const paymentMethodData: PayMentMethodOriginData = ORIGINAL_PAYMENT_METHOD_DATA

typeof를 통해 데이터 타입을 구성한 이유는 API 응답 데이터에 대해서 인터페이스 및 타입을 하나하나 정의하기에는 그 양이 너무 많다고 생각했습니다. 그리고 원시타입은 웬만한 타입추론으로 적용가능하다고 생각했습니다. 하지만 모든 것에는 Trade Off가 있었습니다. 타입을 정의하는 2가지 방법을 각각 살펴보겠습니다. 예제 타입은 다음과 같습니다.

type DeveloperType = 'frontend' | 'backend'
interface Developer {
    developerType: DeveloperType
}

{
    developerType: 'frontend'
}

TS 객체 선언과 동시에 타입 할당

타입스크립트 객체를 선언함과 동시에 타입을 할당해주면, TS의 맥락적 추론에 의해 developerType이 DeveloperType타입인지 체크하게 됩니다.

const developer: Developer = {
    developerType: 'frontend',
}

이후 사용할 때에 developerType은 DeveloperType타입임이 보장됩니다.

typeof를 통한 타입 할당

typeof를 통해 타입을 할당 하게 되면, DeveloperType타입을 string으로 추론하게 됩니다. 따라서 후에 DeveloperType타입에 대한 타입 가드를 통해 타입을 보장해줘야 합니다.

// json 파일
{
    "developerType": 'frontend',
}

// 사용처
import DEVELOPER from './dev.json';
const developer: typeof DEVELOPER = DEVELOPER
const developerType: DeveloperType = developer.developerType // "developerType"에 대한 타입 에러 발생!

전자로 하게 되면, 맨 초기에 API 필드에 대해 모든 인터페이스 및 타입을 명시해줘야 합니다. 후자로 진행하면, 빠른 초기 개발이 가능하나, 애플리케이션이 커질수록 사용자 정의 타입에 대한 타입 가드들을 추가해줘야 합니다. 저는 현재 프로젝트 규모가 크지 않고, 빠른 초기 개발을 진행하고자 했기에 후자로 진행했습니다.

서비스 모듈