샘플 하나를 전체 API 계약으로 간주하기
객체 하나만으로는 필드가 실제로 선택 사항인지 알 수 없습니다. 같은 배열의 객체 샘플 중 일부에 필드가 없을 때만 선택 속성으로 추론하므로 API 문서나 스키마와 반드시 대조하세요.
JSON → TypeScript 변환기
변환브라우저에서 실행(업로드 없음)
엄격한 JSON 예시에서 TypeScript 인터페이스 또는 타입 별칭을 생성합니다. 객체 배열을 병합하고, 일부 항목에 없는 필드를 선택적으로 처리하며, 안전하지 않은 속성명은 따옴표로 보존합니다. 모든 처리는 브라우저에서 로컬로 실행됩니다.
다음에 할 작업
관련 작업 흐름을 이어가거나 이 작업 다음에 자주 사용하는 도구를 열어보세요.
작업 가이드
API JSON 응답에서 TypeScript 타입 생성하기
JSON 응답 하나를 완전한 계약으로 오해하지 않으면서 대표 API 샘플을 실용적인 TypeScript 초안으로 바꾸는 절차입니다. 엄격한 JSON 정리, 여러 배열 샘플, 추론 결과 검토, 대상 프로젝트 컴파일, 네트워크 경계의 런타임 검증을 함께 수행합니다.
열기관련 도구JSON 포매터 | 원문을 보존해 보기 좋게 정리·압축
중복 키와 숫자 원문을 보존하며 엄격한 JSON을 로컬에서 정리하거나 압축합니다.
열기관련 도구JSONPath 테스터 - JSON 값과 경로 추출
브라우저에서 RFC 9535 JSONPath 필터, 슬라이스, 선택자를 JSON에 테스트합니다.
열기관련 도구JSON CSV 변환기 | 중첩 JSON 평탄화·로컬 내보내기
JSON 레코드를 안정적이고 안전한 CSV로 브라우저에서 변환합니다.
열기이 도구 사용 방법
엄격한 JSON 값 하나를 붙여넣거나 샘플을 불러옵니다.
ApiResponse처럼 PascalCase 형식의 루트 이름을 입력합니다.
interface 또는 type 선언과 선택 속성·readonly 처리 방식을 고릅니다.
TypeScript를 생성하고 경고, 유니온, 빈 배열, null, 선택 속성을 검토합니다.
결과를 복사하거나 내려받은 뒤 실제 API 계약과 대조하고 런타임 검증을 추가합니다.
이 도구를 써야 할 때
API 연동
REST 또는 GraphQL 엔드포인트를 연동할 때 요청·응답 선언의 초안을 만듭니다.
테스트 픽스처와 목 데이터
테스트나 Storybook에 넣기 전 픽스처와 모의 응답의 구조를 일관되게 설명합니다.
설정 데이터 모델
설정 예시를 애플리케이션 코드와 리뷰에 사용할 읽기 쉬운 TypeScript 구조로 바꿉니다.
페이로드 구조 검토
여러 배열 레코드를 비교해 누락, null, 서로 다른 값 종류로 표현된 필드를 찾습니다.
흔한 실수
빈 배열의 요소 타입을 임의로 추측하기
빈 배열에는 요소 타입을 판단할 값이 없으므로 생성기는 Array<unknown>을 사용합니다. 실제 응답이나 공식 스키마를 확인한 뒤에만 unknown을 구체적인 타입으로 바꾸세요.
모든 JSON 숫자가 정확하다고 가정하기
모든 JSON 숫자는 TypeScript number로 매핑되지만 긴 정수와 고정밀 소수는 실행 시 정확히 표현되지 않을 수 있습니다. 정확한 식별자는 문자열로, 정밀 계산은 전용 소수 라이브러리로 다루세요.
정적 타입을 런타임 검증으로 사용하기
생성된 선언은 샘플 구조를 설명할 뿐 신뢰할 수 없는 데이터를 실행 시 검증하지 않습니다. 네트워크 경계에는 스키마 검증기나 명시적인 검사를 추가하세요.
예시
따옴표 속성명이 포함된 API 객체
TypeScript 식별자로 쓸 수 없는 키는 따옴표로 출력하고, 중첩 객체에는 결정적인 선언 이름을 붙입니다.
입력
{
"id": 42,
"user-name": "Ada",
"profile": {
"display name": "Ada Lovelace"
}
}출력
export interface ApiResponse {
id: number;
"user-name": string;
profile: ApiResponseProfile;
}
export interface ApiResponseProfile {
"display name": string;
}선택 필드가 있는 배열 레코드
한 배열의 객체 샘플을 병합합니다. 선택 속성 추론을 켜면 일부 항목에 없는 필드에 물음표가 붙습니다.
입력
{
"users": [
{ "id": 1, "name": "Ada" },
{ "id": 2, "active": true }
]
}출력
export interface Generated {
users: Array<GeneratedUsersItem>;
}
export interface GeneratedUsersItem {
id: number;
name?: string;
active?: boolean;
}추론 규칙과 안전 제한
입력은 루트 값 하나를 가진 엄격한 JSON이어야 합니다. 주석, 마지막 쉼표, 중복 키, 잘못된 이스케이프, 64단계를 넘는 중첩은 임의로 고치지 않고 거부합니다.
객체 배열은 속성명별로 병합합니다. 일부 항목에 없는 속성은 선택 속성으로 만들 수 있고, 서로 다른 JSON 값 종류는 TypeScript 유니온이 됩니다. 빈 배열은 요소 타입을 증명할 수 없어 unknown을 사용합니다.
유효한 ASCII 속성 식별자는 그대로 출력합니다. 그 밖의 키는 따옴표 문자열 속성으로 직렬화하고, 중첩 선언 이름은 결정적으로 생성하며 충돌 시 구분합니다.
입력·출력 크기, 중첩, 노드 수에 제한이 있습니다. JSON 숫자는 number가 되며 브라우저 숫자로 정확히 표현할 수 없는 리터럴은 경고합니다. 신뢰할 수 없는 데이터에는 별도의 런타임 검증이 필요합니다.
자주 묻는 질문
언제 interface와 type을 사용하나요?
객체는 선택한 선언 방식을 사용합니다. 문자열, null 또는 배열을 인터페이스가 직접 별칭으로 표현할 수 없으므로 루트가 스칼라나 배열이면 타입 별칭을 사용합니다.
객체 배열은 어떻게 추론하나요?
같은 배열의 모든 객체 샘플을 속성명 기준으로 병합합니다. 선택 속성 추론을 켰을 때 하나 이상의 항목에 없는 속성에는 ?를 붙이고, 값 종류가 충돌하면 유니온으로 만듭니다.
빈 배열은 어떻게 처리하나요?
Array<unknown>을 생성하고 경고를 표시합니다. 빈 샘플만으로는 요소가 문자열인지, 숫자인지, 어떤 객체인지 신뢰성 있게 알 수 없습니다.
특이한 JSON 속성명은 어떻게 처리하나요?
user-name, 123, 공백, 줄바꿈, 비ASCII 문자 같은 키는 따옴표로 감싼 문자열 속성으로 출력합니다. 원래 JSON 키를 바꾸지 않으면서 유효한 TypeScript 문법을 유지합니다.
생성된 타입이 API 응답을 검증하나요?
아닙니다. 생성된 선언은 예시 구조를 설명하지만 실행 시 데이터를 검사하지 않습니다. 외부 입력을 해당 타입으로 사용하기 전에 스키마 라이브러리나 경계 검사를 적용하세요.
JSON이 브라우저 밖으로 전송되나요?
예. 파싱과 타입 생성은 브라우저에서 실행됩니다. 다만 운영 응답에 비밀값이나 개인정보가 있다면 반드시 제거한 대표 샘플을 사용하세요.
이 도구를 검증한 방법
관리 및 검수 SimpleWebUtils검토일
검증 방법: “사용자 레코드 두 개를 하나의 응답 구조로 병합” 문서 입력을 JSON → TypeScript 변환기에 그대로 넣었습니다. 수행 순서는 “원본을 엄격한 JSON으로 검증합니다”, “여러 대표 레코드에서 타입을 생성합니다”였고 브라우저 결과를 예시 출력과 대조했습니다. 실패 경계는 “운영 비밀값을 편리한 샘플로 사용하기”, “객체 하나에서 선택 필드를 추론하기” 두 항목으로 나눠 검토했습니다.
기대 결과: 샘플 두 개는 필수 id와 선택 name·active를 가진 하나의 users 원소 interface로 합쳐졌으며, 첫 객체만 전체 schema로 오해하지 않았습니다.
검증한 작업 가이드 열기관련 작업 가이드
도구를 열기 전에 자주 쓰는 작업 흐름과 예시를 확인하세요.
작업 가이드
API JSON 응답에서 TypeScript 타입 생성하기
JSON 응답 하나를 완전한 계약으로 오해하지 않으면서 대표 API 샘플을 실용적인 TypeScript 초안으로 바꾸는 절차입니다. 엄격한 JSON 정리, 여러 배열 샘플, 추론 결과 검토, 대상 프로젝트 컴파일, 네트워크 경계의 런타임 검증을 함께 수행합니다.
작업 가이드레거시 오류를 옮기지 않고 HTML 조각을 React JSX로 변환하기
HTML-to-JSX 변환은 반복적인 구문 작업을 줄여 주지만 마이그레이션 품질은 그다음 과정에서 결정됩니다. 이 절차는 기존 동작을 기록하고, 하나의 일관된 조각만 변환하며, 브라우저가 정규화한 구조를 비교하고, 레거시 이벤트와 URL을 다시 설계합니다. 이어서 스타일과 에셋을 대상 프로젝트로 옮기고 lint, 타입, 접근성, 반응형, 보안 검증을 수행합니다. 생성 JSX는 정제되거나 완성된 컴포넌트가 아니라 검토할 소스로 취급합니다.
관련 도구
관리 중인 다른 작업 흐름을 이어서 사용해 보세요
JSON 포매터 | 원문을 보존해 보기 좋게 정리·압축
중복 키와 숫자 원문을 보존하며 엄격한 JSON을 로컬에서 정리하거나 압축합니다.
포맷팅
JSONPath 테스터 - JSON 값과 경로 추출
브라우저에서 RFC 9535 JSONPath 필터, 슬라이스, 선택자를 JSON에 테스트합니다.
포맷팅
JSON CSV 변환기 | 중첩 JSON 평탄화·로컬 내보내기
JSON 레코드를 안정적이고 안전한 CSV로 브라우저에서 변환합니다.
변환
JSON 검증기 | 엄격한 구문 오류 위치 찾기
엄격한 JSON 구문을 로컬에서 검사하고 정확한 오류 위치와 중복 키 경고를 표시합니다.
포맷팅
JSON을 YAML로, YAML을 JSON으로 변환
엄격한 문법, 손실 검사, 제한된 YAML 기능 처리로 JSON과 YAML을 로컬 변환합니다.
변환