TypeScript Academy · 강의

JSON 값 타입

완전하고 타입 안전한 JSON 값 타입을 정의합니다.

JSON 값 타입은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

JSON 값이란 무엇인가요

JSON에서는 문자열, 숫자, 불리언, null, 배열, 객체라는 정해진 값 형태만 허용합니다. 재귀적 타입으로 이 집합을 정확히 표현할 수 있습니다.

type Json =
  | string
  | number
  | boolean
  | null
  | Json[]
  | { [k: string]: Json };
// arrays and objects nest Json again.

재귀적인 JSON 타입

핵심은 배열이 Json을 포함하고 객체의 값도 Json이라는 점입니다. 따라서 타입이 중첩된 데이터를 위해 자기 자신을 참조합니다.

type Json =
  | string | number | boolean | null
  | Json[]
  | { [k: string]: Json };
const x: Json = { name: "Ada", tags: ["a", "b"], active: true };
console.log(x);

기본 JSON 값

가장 단순한 JSON 값은 기본 값입니다. 각각을 Json에 직접 할당할 수 있습니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const a: Json = "hello";
const b: Json = 42;
const c: Json = true;
const d: Json = null;
console.log(a, b, c, d);

JSON 배열

JSON 배열은 Json[]이므로 중첩된 배열과 객체를 포함하여 모든 JSON 값을 섞어서 담을 수 있습니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const arr: Json = [1, "two", true, null, [3, 4]];
console.log(Array.isArray(arr));

JSON 객체

JSON 객체는 인덱스 시그니처를 통해 문자열 키를 Json 값에 매핑하므로 임의로 중첩할 수 있습니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const obj: Json = {
  user: { name: "Ada", age: 36 },
  scores: [10, 20, 30]
};
console.log(obj);

깊이 중첩된 JSON

타입이 재귀적이므로 추가 선언 없이도 깊이 중첩된 구조에 타입을 완전히 지정할 수 있습니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
  a: { b: { c: [1, { d: true }] } }
};
console.log(deep);

JSON에서 제외되는 것

Json 타입은 undefined, 함수, Date 객체처럼 JSON으로 표현할 수 없는 값을 올바르게 거부합니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
// const bad: Json = undefined; // Error
// const fn: Json = () => 1;   // Error
const good: Json = { ok: true };
console.log(good);

런타임에 JSON 형태 검증하기

타입은 유효한 JSON을 설명하지만, 신뢰할 수 없는 입력은 런타임에 계속 검증해야 합니다. 재귀적 타입 가드는 각 수준을 확인합니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function isJson(v: unknown): v is Json {
  if (v === null) return true;
  const t = typeof v;
  if (t === "string" || t === "number" || t === "boolean") return true;
  if (Array.isArray(v)) return v.every(isJson);
  if (t === "object") return Object.values(v as object).every(isJson);
  return false;
}
console.log(isJson({ a: [1, 2], b: "x" }));

Json 타입으로 파싱하기

JSON.parse는 any를 반환하므로, 검증한 후에만 파싱된 결과를 Json으로 형변환하거나 변수에 타입을 지정한 뒤 검증해야 합니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const raw = "{ \"id\": 1, \"tags\": [\"a\"] }";
const parsed = JSON.parse(raw) as Json;
console.log(parsed);

Json 값 순회하기

재귀적 순회 함수는 런타임 형태를 확인하여 기본 값, 배열, 객체를 처리하면서 모든 JSON 값을 순회할 수 있습니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function countLeaves(v: Json): number {
  if (Array.isArray(v)) return v.reduce((a, x) => a + countLeaves(x), 0);
  if (v !== null && typeof v === "object") return Object.values(v).reduce((a, x) => a + countLeaves(x), 0);
  return 1;
}
console.log(countLeaves({ a: [1, 2], b: "x" }));

Json 타입이 유용한 이유

정확한 Json 타입은 API 경계를 넘어갈 수 있는 항목을 명확히 문서화하고, JSON이 아닌 값을 직렬화하려는 시도를 컴파일 시점에 발견합니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function send(payload: Json): string {
  return JSON.stringify(payload);
}
console.log(send({ ok: true, items: [1, 2, 3] }));

빠른 확인: JSON 값 타입

JSON 값 타입에 대한 이해도를 확인해 보십시오.

복습: JSON 값 타입

기본 값, 배열, 객체를 포함하는 재귀적 Json 타입을 정의하고, 이 타입에서 제외되는 값을 알아보았으며, 재귀적 타입 가드로 신뢰할 수 없는 입력을 검증했습니다.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const data: Json = { id: 1, tags: ["a", "b"] };
console.log(JSON.stringify(data));

자주 묻는 질문

“JSON 값 타입” 강의는 무료인가요?

네 — “JSON 값 타입” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“JSON 값 타입”에서 뭘 배우나요?

완전하고 타입 안전한 JSON 값 타입을 정의합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“JSON 값 타입” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기