AJV로 JSON 스키마 검증 사용 시작

JSON 스키마 검증이 필요한 이유는 무엇입니까?

다른 유효성 검사 옵션에 비해 JSON 스키마에서 얻을 수 있는 주요 이점은 크로스 플랫폼이라는 것입니다. JSON 스키마 유효성 검사기는 거의 모든 프로그래밍 언어에서 찾을 수 있습니다. 즉, JSON 스키마를 작성하고 언어에 관계없이 프런트엔드와 백엔드에서 사용할 수 있습니다.

하지만 JSON 스키마란 무엇입니까?

https://json-schema.org/에 따르면 JSON 스키마는 JSON 문서에 주석을 달고 유효성을 검사할 수 있는 어휘입니다.

확인을 시작하겠습니다. 이모티콘 모음이 있다고 상상해보십시오.

[
  {
    emojiName: ':smiling_face_with_tear:',
    symbol: '😂',
    polite: true,
    emotionalIntensity: 3,
    meanings: ['someone is laughing to tears']
  },
  {
    emojiName: ':slightly_smiling_face:',
    symbol: '🙂',
    polite: true,
    emotionalIntensity: 2,
    meanings: [
      'someone is happy',
      'someone wants to make a passive aggressive statement'
    ] 
  },
  {
    emojiName: ':face_with_symbols_on_mouth:',
    symbol: '🤬',
    polite: false,
    emotionalIntensity: 4,
    meanings: [ 
       'swearing or being vulgar', 
       'convey an outburst of anger, frustration, or rage'
    ]
  },
  { 
    emojiName: ':gem:',
    symbol: '💎',
    polite: 'false',
    emotionalIntensity: '3',
    meanings: 'It means diamond, wealth, marriage, and jewelry. It is mostly used to suggest marriage engagements, expensiveness, and aristocracy',
    color: 'blue'
   }
];

이 컬렉션의 요소를 검증하는 데 도움이 되는 스키마는 다음과 같습니다.

{
  type: "object",
  required: [ "emojiName", "polite", "emotionalIntensity", "meanings" ]
}

그러나 그것은 너무 일반적입니다. 개체 내부의 각 속성에 대한 정보를 더 추가해 보겠습니다.

{
  type: "object",
  required: [ 
    "emojiName", 
    "polite", 
    "emotionalIntensity", 
    "meaning" 
  ],
  properties: {
    emojiName: {
       type:"string"
    },
    polite: {
      type: "boolean",
    },
    meanings: {
      type: "array",
    },
    emotionalIntensity: {
      type: "integer",
    }
  }
}

제목 및 설명과 같은 스키마 자체에 대한 정보를 추가하여 더 나아갈 수 있습니다. 허용되는 속성의 수를 제한할 수도 있습니다. 또한 속성에 "정수"유형이 있는 경우 숫자 범위를 지정할 수 있습니다.

{
    title: "Emoji - English translator schema",
    description : "Here you can add some info about the schema",
    type: "object",
    required: [ "emojiName", "polite", "meanings", "emotionalIntensity"],
    properties: {
      emojiName: {
        type: "string",
        description: "The emoji's official name"
      },
      polite: {
        type: "boolean",
        description: "If the emoji can be used without fear in a formal context"
      },
      meanings: {
        type: "array",
        description: "The different interpretations of that emoji"
      },
      emotionalIntensity: {
        type: "integer",
        description: "Emotional intensity from 0 - 5",
        minimum: 0,
        maximum: 5
      }
    }
  }

이제 스키마를 사용하여 유효성 검사 출력을 어떻게 얻습니까?

음, 먼저 유효성 검사 라이브러리를 선택합시다. 여기에서 언어별로 다른 유효성 검사기를 찾을 수 있습니다. https://json-schema.org/implementations.html

이 경우 node.js에 AJV를 사용할 것입니다: https://ajv.js.org/ .

간단한 프로젝트를 만들어 봅시다. 여기에서 코드를 찾을 수 있습니다: https://github.com/claradios/json-schema-validation-sample

구조는 다음과 같습니다.



다음을 수행해야 합니다.

루트 폴더에 노드npm init를 추가합니다.

AJV JSON 스키마 유효성 검사 라이브러리npm i ajv를 설치합니다.

내부 index.js 가져오기 및 AJV 인스턴스를 만듭니다.

/// index.js

const Ajv = require("ajv")
const ajv = new Ajv()

유효성 검사를 위해 컬렉션과 해당 용도로 만든 스키마를 가져와야 합니다.

const emoji  = require('./schemas/emoji.js');
const emojiCollection = require('./emojiCollection.js');

그리고 다음과 같이 확인합니다.

/// index.js

emojiCollection.forEach( emojiItem => {
  // loop collection elements for validation
  const validation = ajv.validate(emoji, emojiItem);
  validation
    ? console.log(`emoji: ${emojiItem.symbol} is correctly built`)
    : console.log(`emoji: ${emojiItem.symbol} has the following errors: ${JSON.stringify(ajv.errors, null, 2)}`);
});

AJV는 기본적으로 발견한 첫 번째 오류를 반환합니다. 모든 오류를 얻으려면 인스턴스화할 때 다음을 전달합니다.
const ajv = new Ajv({ allErrors: true })
이제 코드( node index.js 또는 npm start )를 실행하고 터미널에서 유효성 검사 출력을 볼 준비가 되었습니다.



우리 컬렉션의 처음 세 가지 요소는 완벽하게 괜찮아 보이지만 다이아몬드에는 몇 가지 문제가 있습니다.



오류 출력으로 작업하고 사람이 읽을 수 있도록 만드십시오.

주어진 요소에 대한 오류 출력이 엄청난 양의 정보를 가져올 수 있다는 점을 감안할 때 우리는 오류를 더 쉽게 읽을 수 있도록 해당 오류의 모양을 재구성해야 할 수 있습니다. 그렇다면 스키마에 npm install ajv-errors를 설치하고 이와 같이 가져오기를 조정한 다음 스키마에 키워드errorMessage를 추가할 수 있습니다.

const Ajv = require("ajv").default
const ajv = new Ajv({allErrors: true})
// Ajv option allErrors is required
require("ajv-errors")(ajv /*, {singleError: true} */)

그런 다음 예를 들어 각 키워드에 대한 특정 메시지를 생성하여 더 이해하기 쉽게 만들거나 핵심 오류를 더 간단한 방식으로 전달하는 단일 메시지를 반환할 수 있습니다.

errorMessage: {
        type: "should be an object", // will not replace internal "type" error for the properties listed above
        required: {
            emojiName: "should have a string property 'emojiName'",
            polite: "should have a boolean property 'polite'",
            meanings: "should have an array of strings property 'meanings'",
            emotionalIntensity: "should have an integer property 'emotionalIntensity'",
            symbol: "should have a string property 'symbol'"
        },
        additionalProperties: "should not have properties other than emojiName, polite, meanings, emotionalIntensity, symbol",
      },

다음은 무엇이며 AJV는 무엇을 위해 사용될 수 있습니까?

실생활의 예로 Disco는 제가 작업하고 있는 백엔드 프로젝트입니다. XML 파일을 JSON으로 변환하고 렌더링할 API를 통해 제공하는 마이크로서비스 아키텍처를 기반으로 합니다.

변환 프로세스 중에 JSON 스키마 유효성 검사기는 결과 JSON 파일이 유효하고 일관성을 유지하여 체인을 통해 계속되는지 확인합니다.

서로 다른 AJV 인스턴스를 생성했습니다. 각 인스턴스에는 여러 스키마 모음이 포함되어 있습니다.

일부 스키마가 다른 스키마 내부에서 사용됩니다. 이는 그들 사이에 링크를 만들 수 있는 $ref 속성 덕분에 가능합니다. 이것은 또한 콘텐츠를 재귀적으로 검증하는 데 도움이 됩니다.

체인의 여러 부분에 설치할 수 있도록 AJV 라이브러리를 자체 사용자 지정 라이브러리에 래핑하고 NPM 패키지로 게시했습니다.

콘텐츠가 일치해야 하는 모든 스키마와 속성을 렌더링하는 React.js + d3.js에 스키마를 시각적으로 문서화했습니다. 이것은 실제로 다른 기사의 주제가 될 수 있습니다.

지금은 여기까지입니다. 도움이 되었기를 바랍니다. 건배!