software

JSON을 TypeScript 인터페이스로 자동 변환하는 방법 (개발자 친화 가이드)

발행: (2025년 11월 30일 오후 02:50 GMT+9)
5 min read
원문: Dev.to

왜 우리는 JSON에 TypeScript 인터페이스가 필요할까?

앱이 API를 호출하면 응답은 거의 항상 JSON이다. 하지만 JSON은 동적이라 다음을 알려주지 않는다:

  • 어떤 키가 필수인지
  • 각 값의 타입이 무엇인지
  • 중첩 객체가 어떻게 생겼는지
  • 배열에 어떤 값이 들어가야 하는지

인터페이스가 없으면:

❌ IDE가 자동 완성을 제공하지 못한다

그래서 TypeScript 인터페이스는 계약 역할을 한다.

샘플 JSON

{
  "id": 101,
  "name": "Sourav",
  "email": "sourav@example.com",
  "skills": ["Angular", "Node.js"],
  "profile": {
    "followers": 1200,
    "verified": true
  }
}

수동 변환

export interface Root {
  id: number;
  name: string;
  email: string;
  skills: string[];
  profile: Profile;
}

export interface Profile {
  followers: number;
  verified: boolean;
}

좋은가? 네.
이제 자동화해 보자.

온라인 변환기

빠르게 깔끔한 인터페이스가 필요하면 온라인 변환기를 사용한다.

  1. 왼쪽에 JSON을 붙여넣는다.
  2. 도구가 감지한다:
    • 숫자, 불리언, 문자열, null, 배열
    • 자식 인터페이스 자동 생성
    • 깊은 중첩 구조
    • 올바른 TypeScript 포맷팅
  3. 데이터가 서버로 전송되지 않는다(클라이언트‑사이드 전용).

이상적인 사용 사례

  • 설정 파일
  • 폼 스키마
  • 데이터베이스 문서
  • 목 데이터

CLI 도구

QuickType

npm install -g quicktype

JSON 파일 변환

quicktype data.json -o types.ts

URL에서 직접 변환

quicktype https://api.example.com/user -o user.ts

장점

  • 자동화에 최적
  • 여러 언어 지원
  • CI/CD 파이프라인에 유용

단점

  • 온라인 도구보다 복잡함
  • 작은 작업에는 과도할 수 있음

VS Code 확장 프로그램

VS Code를 사용한다면 JSON to TS 확장 프로그램을 설치한다.

사용법

  1. JSON을 복사한다.
  2. 아무 TypeScript 파일을 연다.
  3. Ctrl + Shift + Alt + V 를 누른다.

인터페이스가 자동으로 삽입된다—특히 Angular·React 프로젝트에서 프론트엔드 개발자에게 안성맞춤이다.

고급 팁 — 중첩 배열을 올바르게 변환하기

예시 JSON

{
  "products": [
    { "id": 1, "name": "Laptop", "price": 999 },
    { "id": 2, "name": "Mouse", "price": 29 }
  ]
}

생성된 인터페이스

export interface Root {
  products: Product[];
}

export interface Product {
  id: number;
  name: string;
  price: number;
}

좋은 변환기는 반복되는 패턴을 감지하고 통합된 인터페이스를 만든다.

엣지 케이스 처리

JSON 스니펫문제원하는 인터페이스
{ "bio": null }null 값만 존재bio: string | null;
{ "nickname": "" }선택적 프로퍼티를 감지하지 못함nickname?: string;
{ "values": [1, "a", true] }혼합 타입 배열values: (number | string | boolean)[];

자동 도구를 언제 사용해야 할까

  • API 스키마가 자주 변경될 때.
  • GraphQL을 사용한다면 GraphQL‑전용 생성기를 사용한다.
  • 백엔드가 이미 타입이 지정된 스키마를 제공할 때.
  • Zod, Yup, Joi 같은 런타임 검증기를 사용할 때.

자동 도구는 편리하지만 판단을 대체하지는 않는다.

결론

JSON을 TypeScript 인터페이스로 수동 변환하는 방식은 구식이고, 느리며, 불필요하다.

  • 몇 초 만에 인터페이스 자동 생성
  • 시간 절약
  • 오류 감소
  • 타입 안전성 향상
  • 개발 속도 가속

선호도에 따라:

  • 온라인 도구 – 빠르고 시각적
  • CLI 유틸리티 – 스크립트화 및 파이프라인 친화적
  • VS Code 확장 – 인라인·즉시

실제 API를 매일 다루는 개발자라면, 이 워크플로우가 생명을 구해준다.

Back to Blog

관련 글

더 보기 »