Fetch · JSON API 경계
Fetch API snake_case ↔ camelCase
JSON Fetch 호출을 래핑해 앱 객체는 camelCase, wire format은 snake_case로 유지하세요.
직렬화 전에 JSON 요청 변환
import { keysToSnake } from "./api-case"
export async function postJson<T>(url: string, body: unknown): Promise<T> {
const response = await fetch(url, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(keysToSnake(body)),
})
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`)
}
return response.json() as Promise<T>
}앱 객체를 snake_case로 변환한 뒤 JSON.stringify를 호출합니다.
반환 전에 파싱된 응답 변환
import { keysToCamel } from "./api-case"
export async function getJson<T>(url: string): Promise<T> {
const response = await fetch(url)
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`)
}
const wireData: unknown = await response.json()
return keysToCamel(wireData) as T
}response.json() 이후 키를 camelCase로 재귀 변환하여 호출자에게 반환합니다.
프로덕션 고려사항
- JSON request/response endpoint에만 사용하고 FormData, Blob, ArrayBuffer, stream, file upload는 변환하지 마세요.
- 문자열 값이 바뀌지 않도록 raw text가 아니라 response.json() 이후에 키를 변환하세요.
- 여러 원본 키가 하나의 결과 키로 정규화될 수 있으면 collision detection을 유지하세요.
- wrapper를 공통 API client module에 두고 component마다 변환 로직을 반복하지 마세요.
JSON 경계 온라인 테스트
중첩 객체, 배열, 제외 키, stop path, 접두사, 충돌, key-only diff를 구현 전에 확인하세요.
.json 파일을 놓거나 기기에서 선택
파일은 브라우저에서만 읽습니다. 최대 크기: 5 MB.
변환된 JSON
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}파싱, 파일 읽기, 포맷 및 키 변환은 모두 브라우저에서 로컬로 실행됩니다. JSON 입력은 변환 서버로 전송되지 않습니다.