[NextJS_Pet119] yup을 사용해보자

Yup이 무엇이냐?
정의를 보면 아래와 같이 써있다

Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformation.

간단하게 말하자면

유효 값 검증, 형 변환, 원하는 값 등으로 모양을 지정해주는 모듈입니다
잘만 쓴다면 input format을 쉽게 정해줄 수 있다는 것입니다

저는 Yarn을 사용하니깐 그런데 npm 이용자도 있으실테니 아래 커맨드로 yup을 설치해주시면 됩니다

yarn add yup
npm i yup

그러면 이제 사용을 해봅시다
일단 import를 해줘야합니다

import * as yup from 'yup';
// import { object, string, number, date, InferType } from 'yup';

위와 같은 방법으로도 사용할수 있고 주석 처럼 사용할 수도 있습니다

interface를 사용해서 입력받을 input의 type을 정해줍니다

interface FormData {
  email: string;
  password: string;
  passwordConfirm: string;
  centerName: string;
  companyRegistration: string;
}

그리고 yup을 사용해서 input을 받아봅시다

const schema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
  passwordConfirm: yup
    .string()
    .oneOf([yup.ref('password'), ''], 'Passwords must match')
    .required(),
  centerName: yup.string().required(),
  companyRegistration: yup
    .string()
    .min(12)
    .length(12, 'Company registration number must be 12 characters')
    .required(),
});

보면 제일 첫줄에 yup.object().shape({}) 가 있는데 저는 import를 import * as yup from 'yup'; 이렇게 받아서 object.shape로 불러서 사용하는 겁니다. 만약 주석처럼 했다면 yup를 뺀 object({})로 바로 사용할 수 있습니다

조금만 뜯어보면
email: yup.string().email().required() 은 string에 email type으로 받겠다고 하는 겁니다 email type이 아니면 error 띄울수 있습니다. 아래처럼 사용해서요

<label htmlFor="email">
          이메일
          <input
            id="email"
            type="email"
            placeholder="이메일 입력"
            {...register('email', { required: true })}
            className={errors.email ? 'errorStyle' : 'inputStyle'}
          />
          {errors.email && (
            <span id="email-error" role="alert">
              {errors.email.message}
            </span>
          )}
        </label>

그리고 password를 보면 min이 보입니다

password: yup.string().min(8).required(),
  passwordConfirm: yup
    .string()
    .oneOf([yup.ref('password'), ''], 'Passwords must match')
    .required(),

min은 안에 들어가는 글자 수 만큼 입력이 되어야한다는 걸 말하구요
oneOf를 통해서 위와 동일하게 매치가 되는지 확인할 수 있습니다

이런식으로 사용해주시면 됩니다아아아

---

---

그리고 막간으로.. ESLint와 충돌이 납니다.. 왤까요??
그건 바로 email 등과 같은 변수들은 정의가 안되어있어서입니다
근데 run dev를 하면 정상 동작합니다

이걸 해결하기 위해서 eslint를 수정하면됩니다
해당 error를 warning으로 바꾸는 작업을 하면됩니다
아래와 같이 두줄을 추가해주세요

  "rules": {
    ...
    "no-undef": "warn",
    "no-unused-vars": "off"
  },

그러면 끝입니다아아