User Guide

Learn how to effectively use the JSON Formatter

🚀 Quick Start

Input JSON Data

Paste or directly input the JSON data you want to format in the left input field.

Check Real-time Results

Formatted JSON and TypeScript interface are automatically generated on the right side as you input.

Copy Results

Click the 'Copy' button in each area to copy the formatted JSON or TypeScript interface to your clipboard.

💡 Detailed Feature Description

1. JSON Formatting and Validation

Formatting

Organizes compressed JSON into readable form.

Input Example:

{"name":"홍길동","age":30,"skills":["JavaScript","TypeScript"]}

Output Example:

{
  "name": "홍길동",
  "age": 30,
  "skills": [
    "JavaScript",
    "TypeScript"
  ]
}

Real-time Validation

Check JSON syntax errors in real-time and display error locations.

Detect missing quotes
Check incorrect comma positions
Verify bracket mismatches

2. TypeScript Interface Generation

Automatic Type Inference

Automatically generate appropriate TypeScript types by analyzing JSON structure.

JSON Input:

{
  "id": 1,
  "name": "홍길동",
  "active": true,
  "tags": ["개발자", "TypeScript"],
  "profile": {
    "email": "hong@example.com",
    "phone": "010-1234-5678"
  }
}

Generated Interface:

interface MyInterface {
  id: number
  name: string
  active: boolean
  tags: string[]
  profile: {
    email: string
    phone: string
  }
}

Interface Name Customization

You can change the name of the generated interface as desired.

Default: "MyInterface"
Real-time name change available
PascalCase recommended

🔧 실무 활용 예시

API 응답 데이터 타입 정의

백엔드 API에서 받은 응답 데이터를 바탕으로 프론트엔드에서 사용할 TypeScript 인터페이스를 생성합니다.

시나리오:

사용자 정보 API 응답 데이터 처리

// API 응답 JSON
{
  "success": true,
  "data": {
    "user": {
      "id": 123,
      "username": "developer",
      "email": "dev@example.com",
      "profile": {
        "firstName": "개발",
        "lastName": "자",
        "avatar": "https://example.com/avatar.jpg"
      },
      "permissions": ["read", "write"],
      "lastLogin": "2024-01-15T10:30:00Z"
    }
  }
}

생성된 인터페이스를 활용한 TypeScript 코드:

// 생성된 인터페이스 사용
interface ApiResponse {
  success: boolean
  data: {
    user: {
      id: number
      username: string
      email: string
      profile: {
        firstName: string
        lastName: string
        avatar: string
      }
      permissions: string[]
      lastLogin: string
    }
  }
}

// 실제 사용 예시
const fetchUserData = async (): Promise<ApiResponse> => {
  const response = await fetch('/api/user');
  return response.json();
};

설정 파일 구조 분석

복잡한 설정 파일의 구조를 이해하고 TypeScript 타입을 생성합니다.

package.json 구조 분석:

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/node": "^20.0.0"
  }
}

💡 팁 & 트릭

🎯 효율적인 사용법

키보드 단축키: Ctrl+A로 전체 선택 후 붙여넣기
브라우저 북마크: 자주 사용하는 경우 북마크에 추가
테스트 데이터: 개발 시 샘플 데이터로 활용

🔍 디버깅 팁

오류 메시지 확인: 빨간색 오류 메시지를 자세히 읽어보세요
단계별 검증: 복잡한 JSON은 부분적으로 나누어 검증
따옴표 주의: 문자열은 반드시 큰따옴표 사용

⚡ 성능 최적화

대용량 데이터: 10MB 이하 권장
깊은 중첩: 너무 깊은 객체 구조는 피하세요
배열 처리: 배열의 첫 번째 요소로 타입 추론

⚠️ 주의사항

JSON 형식 규칙

문자열은 큰따옴표(")만 사용
마지막 요소 뒤에 쉼표 없음
주석 사용 불가
undefined 값 사용 불가 (null 사용)

개인정보 보호

민감한 정보는 입력하지 마세요
API 키나 비밀번호 제거 후 사용
실제 사용자 데이터 대신 더미 데이터 사용