0Pricing
JavaScript Academy · 강의

입력 검증과 이스케이프 기초

작은 허용 목록과 가드로 입력을 검증·정규화하고, 텍스트를 표시하기 전에 위험할 수 있는 문자를 이스케이프합니다.

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

큰 그림

목표: 입력을 단순하고 안전하게 만듭니다.

  • 일찍 거부하려면 가드 절을 사용합니다.
  • 모호한 규칙보다 허용 목록을 우선합니다.
  • 단순한 형태로 정규화합니다.
  • 텍스트를 표시하기 전에 특수 문자를 이스케이프 처리합니다.
입력 검증과 이스케이프 기초 — 일러스트레이션 1

숫자 가드 기초

간단한 가드를 추가합니다. 형식 확인, 범위 확인을 수행하고 최종 값으로 정규화합니다.

// Validate age: number and range guard
function parseAge(input) {
  // trim and parse
  const n = Number(input);
  if (!Number.isFinite(n)) return null; // reject non-numbers
  if (n < 0 || n > 130) return null;    // reject out-of-range
  return Math.floor(n);                  // normalize to integer
}

console.log("age ok:", parseAge("21"));
console.log("age bad:", parseAge("twenty"));
입력 검증과 이스케이프 기초 — 일러스트레이션 2

안전한 표시를 위한 이스케이프 처리

사용자 텍스트를 표시하기 전에 특수 문자를 이스케이프 처리하여 사용자 인터페이스가 일반 텍스트로 취급하도록 하십시오.

// Escape a few risky characters before displaying in HTML contexts
function escapeText(s) {
  if (typeof s !== "string") return "";
  return s
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll("\"", "&quot;")
    .replaceAll("'", "&#39;");
}

console.log("escaped:", escapeText("<b>Hello & bye</b>"));
입력 검증과 이스케이프 기초 — 일러스트레이션 3

실전에서의 허용 목록

고정된 집합(예: 코드나 역할)에는 허용 목록을 우선 사용하십시오. 대소문자와 공백을 정규화하십시오.

// Allowlist example: only certain country codes
const ALLOWED = new Set(["TR", "US", "DE", "GB"]);

function parseCountry(code) {
  if (typeof code !== "string") return null;
  const up = code.trim().toUpperCase();
  if (!ALLOWED.has(up)) return null; // reject unknown
  return up; // normalized
}

console.log("country ok:", parseCountry("tr"));
console.log("country bad:", parseCountry("xx"));
입력 검증과 이스케이프 기초 — 일러스트레이션 4

간단한 객체 검증기

유형과 범위를 확인한 다음, 나머지 코드가 신뢰할 수 있는 정규화된 형태를 반환하십시오.

// Validate a tiny user object and normalize
function validateUser(input) {
  if (typeof input !== "object" || input === null) return null;

  const nameOk = typeof input.name === "string" && input.name.trim().length >= 1 && input.name.trim().length <= 40;
  const ageOk = parseAge(input.age) !== null;

  if (!nameOk || !ageOk) return null;

  return {
    name: input.name.trim(),
    age: parseAge(input.age)
  };
}

console.log("user ok:", validateUser({ name: " Ayla ", age: "22" }));
console.log("user bad:", validateUser({ name: "", age: "old" }));
입력 검증과 이스케이프 기초 — 일러스트레이션 5

좋은 방어적 습관

팁:

  • 경계(사용자 입력, 네트워크)에서 검증하십시오.
  • 허용 목록, 범위, 유형 검사를 사용하십시오.
  • 한 번만 정규화하고 나머지는 단순하게 유지하십시오.
  • 사용자에게 텍스트를 표시하기 전에 이스케이프 처리하십시오.
입력 검증과 이스케이프 기초 — 일러스트레이션 6

방어적 입력 기초 퀴즈

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

입력 검증과 이스케이프 기초 — 일러스트레이션 7

복습

복습: 먼저 보호하고, 허용 목록을 사용하며, 안전한 형태로 정규화한 다음 표시하기 전에 이스케이프 처리하십시오. 각 단계는 작고 읽기 쉽게 유지하십시오.

입력 검증과 이스케이프 기초 — 일러스트레이션 8

자주 묻는 질문

“입력 검증과 이스케이프 기초” 강의는 무료인가요?

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

“입력 검증과 이스케이프 기초”에서 뭘 배우나요?

작은 허용 목록과 가드로 입력을 검증·정규화하고, 텍스트를 표시하기 전에 위험할 수 있는 문자를 이스케이프합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“입력 검증과 이스케이프 기초” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 입력 검증과 이스케이프 기초
  2. 안전한 객체 병합, 동결과 봉인
  3. 프레임워크 없이 오류 경계 이해하기
← JavaScript Academy(으)로 돌아가기