0Pricing
JavaScript Academy · 강의

안전한 JSON 파싱 전략

try/catch, 작은 형태 확인, 기본값, 간단한 도우미 도구를 사용해 신뢰할 수 없는 JSON을 안전하게 파싱합니다.

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

안전한 파싱을 사용하는 이유

목표: 예기치 않은 문제 없이 JSON을 읽습니다.

  • 파싱을 try/catch로 감싸기
  • 작은 safeParse 도우미
  • 필수 필드의 형태 확인
  • 선택적 값의 기본값
안전한 JSON 파싱 전략 — 일러스트레이션 1

safeParse 도우미

작은 safeParse를 사용하면 충돌을 피하고 오류를 명확하게 드러낼 수 있습니다.

// safeParse: never throws, returns { ok, value, error }
function safeParse(text) {
  try {
    const value = JSON.parse(text);
    return { ok: true, value: value, error: null };
  } catch (e) {
    return { ok: false, value: null, error: String(e.message) };
  }
}

// Demo
const good = safeParse("{\"name\":\"Ayla\",\"age\":20}");
const bad  = safeParse("{broken}");

console.log("good.ok:", good.ok, "name:", good.value && good.value.name);
console.log("bad.ok:", bad.ok, "error:", bad.error);
안전한 JSON 파싱 전략 — 일러스트레이션 2

형태 확인

필수 필드(name, age)와 간단한 범위를 확인하는 작은 유효성 검사기를 추가합니다.

// Validate required fields and simple types
function isNonEmptyString(x) {
  return typeof x === "string" && x.trim().length > 0;
}

function isNonNegativeInt(x) {
  return Number.isInteger(x) && x >= 0;
}

function validateUser(u) {
  if (u == null || typeof u !== "object") {
    return { ok: false, reason: "not an object" };
  }
  if (!isNonEmptyString(u.name)) {
    return { ok: false, reason: "name required" };
  }
  if (!isNonNegativeInt(u.age)) {
    return { ok: false, reason: "age must be a non-negative integer" };
  }
  return { ok: true };
}

// Demo
const rawUser = "{\"name\":\"Mina\",\"age\":22}";
const parsed = safeParse(rawUser);

if (parsed.ok) {
  console.log("valid?", validateUser(parsed.value));
}
안전한 JSON 파싱 전략 — 일러스트레이션 3

선택적 값의 기본값

??와 간단한 확인을 사용해 선택적 필드에 안전한 기본값을 설정합니다.

// Apply defaults using nullish coalescing and spread
function normalizeUser(u) {
  const theme = (u.theme ?? "light");        // default theme
  const tags  = Array.isArray(u.tags) ? u.tags : [];
  return { ...u, theme: theme, tags: tags };
}

// Demo
const raw = "{\"name\":\"Lena\",\"age\":19}";
const p = safeParse(raw);
if (p.ok) {
  const v = normalizeUser(p.value);
  console.log("theme:", v.theme, "tags:", v.tags);
}
안전한 JSON 파싱 전략 — 일러스트레이션 4

범위와 상한

숫자 범위를 제한하고 배열 크기에 상한을 설정하여 데이터를 안전하고 예측 가능하게 유지합니다.

// Guard numbers and arrays with tiny limits
function clampNumber(x, min, max) {
  if (typeof x !== "number" || !Number.isFinite(x)) return min;
  return Math.min(max, Math.max(min, x));
}

function toStringArray(a) {
  if (!Array.isArray(a)) return [];
  return a.map(function (x) { return String(x); }).slice(0, 5); // cap length
}

// Demo
const cfgText = "{\"limit\":200,\"labels\":[\"a\",\"b\",\"c\",\"d\",\"e\",\"f\"]}";
const cfg = safeParse(cfgText);
if (cfg.ok) {
  const limit = clampNumber(cfg.value.limit, 1, 100);
  const labels = toStringArray(cfg.value.labels);
  console.log("limit:", limit, "labels:", labels);
}
안전한 JSON 파싱 전략 — 일러스트레이션 5

파싱 → 검증 → 정규화

처리 흐름: 파싱 → 검증 → 정규화. 함수는 작고 읽기 쉽게 유지합니다.

// Putting it together: parse → validate → normalize
function readUser(jsonText) {
  const p = safeParse(jsonText);
  if (!p.ok) return { ok: false, reason: "parse: " + p.error };

  const check = validateUser(p.value);
  if (!check.ok) return { ok: false, reason: "shape: " + check.reason };

  const normalized = normalizeUser(p.value);
  return { ok: true, value: normalized };
}

// Demo
const text = "{\"name\":\"Ayla\",\"age\":21,\"tags\":[\"new\"],\"theme\":\"dark\"}";
console.log(readUser(text));
안전한 JSON 파싱 전략 — 일러스트레이션 6

안전한 파싱 퀴즈

빠른 확인: 안전한 패턴입니다.

안전한 JSON 파싱 전략 — 일러스트레이션 7

복습

복습: 작은 safeParse를 만들고, 필수 필드와 타입을 확인하며, 숫자를 제한하고 배열에 상한을 설정한 다음 기본값을 적용하여 앱이 잘못된 입력을 침착하게 처리하도록 합니다.

안전한 JSON 파싱 전략 — 일러스트레이션 8

자주 묻는 질문

“안전한 JSON 파싱 전략” 강의는 무료인가요?

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

“안전한 JSON 파싱 전략”에서 뭘 배우나요?

try/catch, 작은 형태 확인, 기본값, 간단한 도우미 도구를 사용해 신뢰할 수 없는 JSON을 안전하게 파싱합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“안전한 JSON 파싱 전략” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. JSON.parse와 JSON.stringify 기초
  2. 구조적 복제와 URLSearchParams
  3. 안전한 JSON 파싱 전략
← JavaScript Academy(으)로 돌아가기