0Pricing
JavaScript Academy · 강의

검증과 사소한 함정

앵커로 문자열 전체를 검증하고, 탐욕적인 과잉 일치를 피하며, 단어 경계를 사용하고, 간단한 추가 확인을 수행합니다. test()와 함께 사용할 때 /g의 동작도 주의합니다.

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

전체 문자열 검증

목표: 예상하지 못한 결과 없이 안전하게 검증합니다.

  • ^와 $를 사용하여 전체 문자열과 일치시킵니다
  • 탐욕적인 과도한 일치를 피하고 필요할 때 지연 수량자 *?를 사용합니다
  • 단어 경계에 \\b를 사용합니다
  • test()와 함께 /g를 사용할 때 주의합니다
검증과 사소한 함정 — 일러스트레이션 1

실전에서 사용하는 앵커

부분 문자열이 검증을 통과하지 못하도록 ^와 $를 추가합니다.

// Validate 4–6 digits ONLY (no spaces, no letters)
function isPin(text) {
  const re = /^\\d{4,6}$/;
  return re.test(text);
}

console.log("1234 ->", isPin("1234"));
console.log("12 34 ->", isPin("12 34"));
console.log("a123 ->", isPin("a123"));
검증과 사소한 함정 — 일러스트레이션 2

과도한 일치 피하기

탐욕적인 .*는 가장 긴 범위를 가져옵니다. 표시 사이에서 가장 짧게 일치시키려면 ?를 추가합니다.

// Greedy (.*) vs lazy (.*?)
const text = "say \"hi\" and \"bye\"";

// Greedy: eats too much
const g = text.match(/".*"/);
console.log("greedy:", g && g[0]);

// Lazy: shortest between quotes
const l = text.match(/".*?"/g);
console.log("lazy:", l);
검증과 사소한 함정 — 일러스트레이션 3

단어 경계 \\b

\\b는 단어 문자와 단어가 아닌 문자 사이의 경계와 일치하며, 전체 단어를 찾을 때 유용합니다.

// Use \\b to match a whole word (not inside another)
const s = "restart start up";

console.log("has start word?", /\\bstart\\b/.test(s));    // true
console.log("matches restart?", /\\brestart\\b/.test(s));  // true
console.log("start inside restart?", /start/.test("restart")); // true (partial)
검증과 사소한 함정 — 일러스트레이션 4

검사를 안전하게 조합하기

초보자라면 작은 정규식에 추가 검사(trim, 최대 길이)를 함께 사용합니다. 지나치게 큰 패턴은 피합니다.

// Small, beginner-friendly email-like check (not RFC-complete)
// Strategy: small regex + extra length checks
function isEmailLite(text) {
  if (typeof text !== "string") return false;
  if (text.length > 254) return false;          // cap length
  const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;  // basic shape
  return re.test(text.trim());
}

console.log("ok:", isEmailLite("a@b.co"));
console.log("bad space:", isEmailLite("a @b.co"));
console.log("too basic:", isEmailLite("abc"));
검증과 사소한 함정 — 일러스트레이션 5

전역 플래그의 함정

g 플래그는 test()를 호출할 때 내부 위치를 이동시킵니다. 서로 다른 입력에 대해 단순히 불리언 값만 얻으려면 g를 사용하지 않습니다.

// Using /g with test() changes lastIndex and can surprise you
const r = /a/g;

console.log("1st:", r.test("a")); // true
console.log("2nd:", r.test("a")); // false (cursor moved)
console.log("3rd:", r.test("a")); // true again

// Safer: avoid /g when repeatedly calling test() on separate strings
function hasA(text) {
  return /a/.test(text); // no g flag
}
console.log("safe:", hasA("a"), hasA("a"));
검증과 사소한 함정 — 일러스트레이션 6

검증을 위한 앵커 퀴즈

빠른 확인: 전체 문자열 검증입니다.

검증과 사소한 함정 — 일러스트레이션 7

복습

복습: ^...$로 전체 문자열을 검증하고, 과도한 일치를 피하려면 지연 수량자 *?를 사용하며, 전체 단어에는 \\b를 추가하고, 작은 정규식과 간단한 추가 검사를 함께 사용하며, 반복해서 test()를 호출할 때는 /g를 피합니다.

검증과 사소한 함정 — 일러스트레이션 8

자주 묻는 질문

“검증과 사소한 함정” 강의는 무료인가요?

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

“검증과 사소한 함정”에서 뭘 배우나요?

앵커로 문자열 전체를 검증하고, 탐욕적인 과잉 일치를 피하며, 단어 경계를 사용하고, 간단한 추가 확인을 수행합니다. test()와 함께 사용할 때 /g의 동작도 주의합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“검증과 사소한 함정” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 정규 표현식 기초 — 리터럴, test, 앵커와 플래그
  2. 그룹, 캡처와 치환
  3. 검증과 사소한 함정
← JavaScript Academy(으)로 돌아가기