스키마 검증을 위한 VineJS와 Zod 비교

오게네테가 데네도 작사✏️

사용자 또는 기타 외부 소스의 모든 데이터는 데이터 무결성을 유지하고 애플리케이션에서 예기치 않은 동작을 방지하기 위해 사전 정의된 구조 또는 형식을 준수해야 하므로 프로덕션 준비가 완료된 모든 앱에는 스키마 검증이 필수입니다.

일반적으로 개발자는 사용자가 웹사이트에 양식을 제출할 때 입력 데이터 또는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!