????? ??? ????

??? ?? ?? ?? ??? ?? ???? ??? ???? ???? ???????? ??? ?? ??? ???? ?? ?? ??? ?? ?? ??? ???? ??? ???? ??? ??? ?? ??? ??? ??? ?????.

????? ???? ???? ????? ??? ??? ? ?? ??? ?? HTTP ??? ?? API? ??? ????? ?? ??? ??? ???? ???. ??? ? ??? ?? ??? ???? ???? ?? ????? ??? ?? ??? ? ??? ?? ??? ???? ?? ????.

???? ???? ?? ??? ?? ?????? JavaScript ???? ??? ?? ??? ?? ???? ??? ??? ??? ??? ????.

? ????? ?? ??, ??, ???? ?? ? ???? ???? VineJS? Zod? ??? ?????. ???? VineJS? ????? ????? Zod? ?????? ??? TypeScript ?? ??? ???? ????? ?? ?? ?? ??? ??? ?? ?? ? ????.

VineJS? ??????

VineJS? ??? ???? ??? ??? ????? ??? ?? JavaScript/TypeScript ??? ?? ????????.

? ????? AdonisJS ??? ??? ??????? ?????? ??????? ?? ??? ?????? ???????. VineJS? Node.js ?? ? ??, ?? ?? ?? ?? ????? ???? ???? ???? ?? API? ?? ?? ??? ???? ???? ?? ?? ?????? ????? ???????.

VineJS? ?? ?? ? ??? ??? ????.

• ?? ? ?? — ?????? ??????? ?? ????? ?????? ???? ????? ??? ? ??? ???? ???????.
• TypeScript ?? — VineJS? ??? ???? ?? ?? ??? ????? ??? ???? ??? ???? ?????.
• ??? ?? ?? ??? — ?? ??? ??? API? ???? ?? ???? ???? ??? ?? ??? ??? ? ????
• ??? ?? — VineJS? ? ?? ???? ?? ?? ???? ?? ??? ?? ???? ???? ???? ??? ??? ?????
• ??? ?? ??? — VineJS? ??? ?? ? ??? ??? ??? ???? ? ??? ???? ???? JavaScript ??? ?? ????? ??? ????? ?????.
• ??? — VineJS? ???? ????? ?? ?? ??? ???? ??? ?? ??? ?? ? ??? ?? ??? ?? ?? ??? ? ????

?? ????? ??? ?? ? ??? ??? ????? ???????.

VineJS? ??? ??? ??

VineJS? ??? ??? ?? ?? ? ??? ???????.

?? ??? ??

??? ???? ?? ??? ???? ??? ? ???, ??, ??? ?? ?? ??? ??? ???? ???? ?? ? ?? ??? ??? ????. VineJS? ???? API? ?? ? ????? ??????.

?? ?? ???? ??? ??? ?????.

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

? ???? ??? ???? ???? ?? ??? ???? ???? min ? max ???? ???? 18?? 30 ???? ??????. VineJS? ??? ??? ? ???? ?? ?? ??? ?? ??? ?? ??? ?????.

?? ??? ???? ?? ?? ???? ??? ???? ?? ??? ????. ?? ??, ??? ?? ?? ?? ???? ???? ????? ??? ??? ??? ? ??? ??? ? ????.

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

? ????? ??? ??? ??? ??? ???? ?? ???? ?????.

?? ? ?? ??? ??

?? ??? ?? ??? VineJS? ?? ? ??? ?? ??? ??? ????? ?? ??? ?? ?? ?? API ????? ??? ???? ? ?? ?????.

??? ???? ???? ??? ???? ???? ??? ???????.

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

? ???? ??, ???, ?? ??? ??? ??? ???? ???? ??????.

vine.object() ???? ???? ??? ??? ?? ? ??? ???? ??? ? ????. vine.object? ?? ??? ????? ????? ???? ??? ??? ??? ???. ??? option() ???? ???? age ??? ?? ???? ?????? ?? ??? ??? ??? ??? ???? ????.

??? ???? ??? ? ????.

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

? ??? ???? ??? ? ??? 2~20? ??? ????? ?? ??? 1~10?? ??? ???? ?? ?????. ?? ??? ????? ?? ??? ???? ???? ? ?? ?????.

??? ?? ???

?? ???? ???? ??? ??? ???? ? ?? ???? JavaScript ??? ???? ???? ????? ?? ???? ???? ???? ????? ??? ? ??? ?? VineJS? ?? ?????. ?? ?? ??? ???? ?? ???? ???? ?? ??? ? ????.

???? ?? ?????? vine.compile() ???? ??? ? ????.

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

?? ???? ???? ?? API ?????? ?? ??? ??? ??? ???? ?? ?????.

???? ??? ??? ??? ?????? ???? ?? ???? ???? ???? ????? ??? ?? ???? VineJS? ?? ???? ??? ?? ??????? ???? ?? ? ????.

??? ?? ?? ???

??? ?? ?? ???? ????? ?? ??? ???? ???? ??? ? ?? ???? ??? ? ??? ?????. VineJS? ??? SimpleMessagesProvider API? ???? ?? ???? ?-? ??? ?????. ?? ?? ??(?: ?? ? ???)??? ?? ??-?? ??? ? ??? ?? ?? ?? ??????.

SimpleMessagesProvider API? ?????, ??? ???? ?? ??? ?? ???? ??? ? ??? ? ????. ?? ?? ????? API? ????? ???????.

?? ?? ??? ??? ??? ??? ?? ?? ???? ??????? ??? ?????.

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

?? ??? ?? ??? ?? ???? ????? ?? ????. ??? ??? ?? ? ???? ?????.

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

?? ??? ?? ?????(*)? ???? ?? ??? ???? ????? ??? ??? ? ????.

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

VineJS? ???? ?? ??? ?? ??? ???? ???? ??? ?? ????. ?? ??? ?? ??? ????? ???? ???? ???? ?? ? ?????.

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

??? ?? ??? ?? ??

??? ??? ???? ? ???? VineJS? ????? ?? ?? ??? ???? ??? ?? ?? ??? ??? ? ?? ??? ?????. ??? ??? ?? ??? ?? ??? ??? ????? ?? ??? ???? ???? ?????? ??? ? ????.

VineJS?? ??? ?? ??? ??? ?? ?? ??????? ???? ???? ?????. ????? ? ?? ????(??? ?, ??? ??? ? ?? ??, ?? ????)? ??? ?????.

?? ?? ???? ??? MongoDB ObjectId?? ???? mongodbId?? ??? ?? ??? ??? ?????.

const compiledSchema = vine.compile(
  vine.object({
    username: vine.string().minLength(3).maxLength(30),
    password: vine.string().minLength(8),
  })
);

// Use the compiled schema to validate data
console.log(
  await compiledSchema.validate({
    username: "janedoe",
    password: "password123",
  })
);

VineJS ??? ??? ? ??? ??? ? ??? ??? ?? vine.createRule ???? ???? ?? VineJS ?? ???? ???? ???.

import vine, { SimpleMessagesProvider } from '@vinejs/vine';

vine.messagesProvider = new SimpleMessagesProvider({
  'required': 'You must provide a value for {{ field }}.',
  'email': '{{ field }} needs to be a valid email address.',
  'username.required': 'A username is required to continue.',
});

??? ?? ?????? mongodbId ???? VineString ???? ?? ???? ?? ??? API? ??? ?? ? ????.

??? ?????

Zod? ?????? ??? TypeScript ?? ??? ?? ????????. ??? ??? ??? ?? ??? ?? ???? ??? ? ??? ?????? ??? ?????? ??? ?????.

TypeScript??? ??? ??? Zod? TypeScript ????? ?? ??? ??? ??? ?? ??? ?????.

Zod? ?? ??? ??? ????.

• TypeScript ?? — Zod? TypeScript? ???? ???? ??? ?? ??? TypeScript ??? ?????? ???? ??? ?? ??? ?????.
• ??? ?? ?? ??? — Zod? ???? ????? ?? ?? ???? ???? ?? ??? ?? ?? ???? ??? ? ????
• ???? ?? - ??? ?? ? ?? ??? ? ??? ?? ? ??? ??? ??? ??? ???? ????.
• ??? — Zod ???? ????? ?? ? ??? ??? ? ????.
• ??? ?? — Zod npm ???? ?? ???? ?? ?? ?????
• ???? ? Node.js ??? — Zod? Node.js? ?? ???? ???? ????? ??? ?? ???? ????? ? ??????.

Zod? ??? ??? ??

Zod? ??? ??? ???? ???? ??? ??? ??? ??? ?? ?? ??? ?? ??? ? ??? ????. ?? ???? ? ? ??? ??? VineJS? ?? ?????.

?? ??? ??

Zod? ???, ??, ??, ??? ?? ?? ??? ??? ? ?????.

?? ?? ???? ??? ???? ???? ?? ??? ???? ??? ?????.

import vine, { errors } from "@vinejs/vine"; // NOTE: VineJS is ESM only

const ageSchema = vine.number().min(18).max(30);

try {
  const output = await vine.validate({ schema: ageSchema, data: 21 });
  console.log(output);
} catch (error) {
  if (error instanceof errors.E_VALIDATION_ERROR) {
    console.log("validation error: age is invalid");
  } else {
    console.log("an unexpected error occurred");
  }
}

? ??? nameSchema? "Peter Parker"? ????? ???? ????? ??? 18? ????? ageResult? ?????.

?? ? ?? ??? ??

??? ??? ?? ? Zod? ???? ???? ??? ???? ??? ? ????. ?? ?? ??? ??? ?? ??? ???? ???? ??? ??? ?? ??? ? ????.

const usernameSchema = vine
  .string()
  .toLowerCase()
  .minLength(3)
  .maxLength(15)
  .regex(/^[a-z0-9_]+$/);

console.log(vine.validate({schema: nameSchema, data: "Bruce_Wayne"})) // logs bruce wayne

? ??? userSchema? ??? ???? ???? ????, taggedSchema? ??? ???? ???? ??? ?????. 123? ???? ??? ??? ?? ??? ??? ?????.

??? ?? ?? ???

?? ???? ?? ???? ??? ??? ? ?? ??? ? ??? Zod? ?? ??? ?? ???? ?????.

?? ?? ??? 18? ??? ?? ?? ???? ??? ? ????.

const userProfileSchema = vine.object({
  name: vine.string().minLength(3),
  email: vine.string().email(),
  age: vine.number().min(18).max(65).optional(),
});

const output = await vine.validate({
  schema: ageSchema,
  data: {
    name: "Jane Doe",
    email: "jane.doe@example.com",
    age: 29,
  },
}); // logs { name: 'Jane Doe', email: 'jane.doe@example.com', age: 29 }

??? ??? ??? ???? ??? ?? ?? ???? 18? ????? ???.

??? ??

Zod? ?? ?? ?? ??? ??? ??? ? ?? ??? ??? ???? ??? ?? ??? ?? ??? ??? ? ?? ???? ?????.

?? ?? 16?? ?? ??? ???? ????? ??? ????? ???? ????? ???? ????. ?? ?? ??? ???? ???. ??? ??? ????.

const tagsSchema = vine
  .array(vine.string().minLength(2).maxLength(20))
  .minLength(1)
  .maxLength(10);

console.log(
  await vine.validate({
    schema: tagsSchema,
    data: ["tech", "news", "coding"],
  })
); // logs [ 'tech', 'news', 'coding' ]

? ???? ???? 3? ?? 6?(#RGB ?? #RRGGBB)? ??? ??? 16?? ?? ???? ???? ?? ??? ???? ???? ??? ?? ??? ?? ??? ??????.

VineJS ? Zod

??

VineJS ??? ????? ??? VineJS? Node.js ????? ?? ?? ??? ?? ????? ? ???? ?? ?? ??? ?? ? ?? ??? ???? Yup ? Zod? ?????.
VineJS ??? ?? ????.

????? VineJS? ??? ??? ????? ???? ??? ??? ??????? ??? ????? ?????. Zod? ? ???? ???? ?? ??? ??? ????.

?????? ??

TypeScript ??? ? ?? ?? ????? Zod? ?? ??? ?? ???? ??? ?? TypeScript? ??? ?? ???????. VineJS? TypeScript? ????? ???? ???? ?? TypeScript? ?? ??????? Zod? ?? ??? ????.

???

? ?? ???, ????, ????? ?? Zod? ? ?? ??? ????? ???? ????. ??? VineJS? ?? ????, ???? ??, ???? ??? ???, ???? ?? API? ?? ?? ??? ?? ?? ??? ??? ?????.

????

VineJS ??? ?? ??? ????? ????? ????? ???? ???? ????. ??? ???? ?? ????? ? ??? ??? ??? ???????? ???? ????. ?? CommonJS? ???? ???? ?? ???? ????? ??? ? ? ????. ESM(ECMAScript ??)??? ?????.

??? Zod? ? ?? ?? JavaScript ?? ???? ???? ??? ??? ???? ??? ???? ? ????? ??????? ? ?? ????? ? ?????.

?? ??? ??? ?? ?????

VineJS ? Zod ??? ??? ?? ??? ?? ??? ?? ??? ??? ??? ?? ? ?? ?? ?????? ????.

Yup? ???? ?? ??? ?? ??? ?? ??? ?? React ? Formik? ?? ??? ??? ? ??? ?? ??? ?? ?????. VineJS? Zod? ?? ??? ????? ? ???? ?? ? ??? ?? ??? API? ???? ??? ??? ??????.

Node.js ????? ?? ???? ??? ?????? joi?? ???. API? VineJS ? Zod? ?? ?? ???? ??? ??? ? ??? ? ?? ???? ???? ?? ??? ??? ?? ??? ??? ??? ?????. ??? ??? ??? ??? ?? ? ?? ?? ?????.

??? ??? JSON ??? ??? AJV? ?? ???????. Zod? VineJS?? ??? ???? API? ?????, ?? API?? JSON ???? ???? ?? ????. ??? ??? JSON ??? ??? ???? ???? ? ?? ???? ??? ???? ??????.

??

VineJS? Zod? ? ?? ??? ??? ?? ???? ? ? ?? ?? ??? ?? ??? ?? ?? ???? ?????. ??? ?? ?? ???? ?? ??? ??? ??? ?????? ? ??? ?? ????? ?? ?? ???? ???? ??????. ??? ?????!

---

LogRocket: ????? ???? JavaScript ??? ? ?? ??????.

?? ???? ?? ??? ?????. ??? ??? ? ?? ????? ??? ???? ?? ? ?????.

LogRocket? ???? ??? ??? ??? ??? ???? ??? ? ????. ??? ????? ???? ???? JavaScript ?????? ?? ??? ??? ???? ??? ??? ???? ??? ???? ??? ? ?? ??? ?????.

LogRocket? ?? ??, ??? ?? ??, ?? ??, ?? ??? ??? ?? ???? ??/??, ???? ????? ? ??? ?? ??? ?????. JavaScript ??? ??? ???? ?? ?? ?? ?? ????!

??? ??? ???.

? ??? ??? ??? ?? VineJS? Zod ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!