Zod 간단한 튜토리얼

Node-Typescript-Zod

다음 예제에서는 간단한 REST api를 만들고 zod로 유효성을 검사합니다.

You can contact me by telegram if you need to hire a Full Stack developer.

discord Appu#9136으로 저에게 연락할 수도 있습니다.

프로젝트 생성

터미널을 열고 다음을 입력합니다.

mkdir 노드 typescript-zod-tut

cd node-typescript-zod-tut

npm init --y

코드 .

패키지

익스프레스

조드

타자기

ts-노드-dev

@유형/익스프레스

생산 패키지

npm 나는 조드를 표현

개발 패키지

npm i typescript ts-node-dev @types/express -D

프로젝트 파일 구조:

노드 typescript-zod-튜토리얼/
├── node_modules/
├── 소스/
│ ├── 노선/
│ ├── 스키마/
│ └── index.ts
├── tsconfig.json
└── 패키지.json

프로젝트 설정

1- package.json에 이 줄을 추가합니다. ts-node-dev를 사용하면 .ts 파일을 실행할 수 있고 --respawn은 파일 변경 후 자동으로 다시 실행됩니다.

 "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts"
  },

2- 콘솔에 다음 줄을 입력합니다npx tsc --init . 그러면 tsconfig.json이 생성됩니다. 이제 tsconfig.json 파일에서 "ctrl+f"를 사용하여 rootDir 및 outDir을 찾고, rootDir의 주석을 제거하고 이것을 입력합니다"rootDir": "./src", 주석 제거 outDir을 입력하고 다음을 입력합니다"outDir": "./dist", .

코딩하자

1- index.ts 만들기index.ts

import express from 'express'


//initialiaztion
const app = express()


//server
app.listen(3000, () => {
  console.log('listening on port 3000')
})

이제 npm run dev를 실행하면 다음과 같은 결과를 얻을 수 있습니다.listening on port 3000
2- 경로 폴더로 이동하여 이 파일contacts.route.ts을 생성합니다.
contacts.route.ts

import { Router, Require, Response } from "express";

const route = Router()

route.post('/contacts', (req: Require, res: Response) => {
  console.log(req.body)
  res.json({message: 'contact created'})
})

export default route

index.ts로 돌아가서 경로를 가져오겠습니다.
index.ts

import express from 'express'
import contactsRoutes from './routes/contacts.routes'

//initialiaztion
const app = express()

//middlewares
app.use(express.json())

//routes
app.use(contactsRoutes)

//server
app.listen(3000, () => {
  console.log('listening on port 3000')
})

우리의 API를 사용해 봅시다. 저는 REST 클라이언트 vscode 확장을 사용할 것입니다. 하지만 우체부, 불면증 또는 원하는 모든 것을 자유롭게 사용할 수 있습니다.

일부 필드를 전달하고 싶습니다. 연락처 이름, 성, 이메일 및 전화번호를 사용하겠습니다.



3- zod 스키마를 생성하고 스키마 폴더로 이동하여 contacts.schema.ts 파일을 생성합니다.

이 코드에서는 firstName 필드가 .string()가 포함된 문자열이어야 하고 .nonempty()를 사용하여 비워둘 수 없는 ContactSchema를 생성합니다.
contacts.schema.ts

import { z } from "zod";

export const ContactSchema = z.object({
  firstName: z
  .string()
  .nonempty(),
})

contacts.route.ts로 돌아가 스키마를 가져오겠습니다.

import { Router, Request, Response } from "express";
import { ContactSchema } from "../schema/contacts.schema";

const route = Router()

route.post('/contacts',(req: Request, res: Response) => {
  console.log(req.body)
  try {
    const result = ContactSchema.parse(req.body);
    console.log(result)
    res.json({messasge: 'contact created'})
  } catch (error) {
    return res.status(500).json({ message: error });
  }
})

export default route

포스트 경로를 다시 시도하고 무슨 일이 일어나는지 봅시다.



아니오, "expected": "string", 때문에 약간의 오류가 발생했습니다.

오류 메시지를 더 나은 방식으로 표시하도록 코드를 약간 수정해 보겠습니다. 먼저 zod에서 가져오기"message": "Expected string, received number"를 수행하고 zod에서 오류 메시지만 표시하도록 catch 블록을 변경하고 오류가 zod에서 발생하지 않는 경우 서버 오류

import { Router, Request, Response } from "express";
import { ContactSchema } from "../schema/contacts.schema";
import { ZodError }from "zod";

const route = Router()

route.post("/contacts", (req: Request, res: Response) => {
  console.log(req.body);
  try {
    const result = ContactSchema.parse(req.body);
    console.log(result);
    res.json({ messasge: "contact created" });
  } catch (error) {
    if (error instanceof ZodError) {
      return res
        .status(400)
        .json(error.issues.map((issue) => ({ message: issue.message })));
    }
    return res.status(500).json({ message: error });
  }
});

export default route

이제 우리는 이 메시지를 받고 있습니다



이제 ZodError 필드를 비워둡니다.



오류 메시지를 변경할 수도 있습니다. firstName로 돌아가서 contacts.schema.ts에 추가해 보겠습니다.

import { z } from "zod";

export const ContactSchema = z.object({
  firstName: z
  .string()
  .nonempty('first name is required'),
})

이제 우리는 이것을 얻고 있습니다



나머지 필드를 추가합시다

import { z } from "zod";

export const ContactSchema = z.object({
  firstName: z
  .string()
  .nonempty('Name is Required'),
  lastName: z
  .string()
  .nonempty('Last Name is Required'),
  email: z
  .string()
  .email({message: 'Email is not valid'})
  .nonempty('Email is Required'),
  phone: z
  .string()
  .nonempty('Phone is Required'),
})

몇 가지 테스트를 해보자





이것이 Zod를 사용한 유효성 검사의 기본 아이디어입니다.

You can contact me by telegram if you need to hire a Full Stack developer.

도움이 되었기를 바랍니다. 당신의 생각을 알려주세요, 감사합니다.