로그인이나 회원가입 기능을 만드는 경우에 유효성 검사는 굉!장!히 중요한 부분이다.
플링 웹 어드민 페이지 마이그레이션 중, 로그인 페이지 유효성 검사 부분에서 블로커에 직면했고 그 이유는 Next.js에서 사용하지 못하는location 때문이었다.
이를 해결하기 위해 useForm 을 사용해 유효성 검사를 진행했다.
Next.js에는 window 객체가 없다.
next.js에서 서버사이드 렌더링을 할 때 가장 많이 하는 실수가 window나 document객체가 없음에도 사용하다보니 document is undefined라는 에러 메시지를 많이 보는 것이다.
좀 더 이론적으로 설명하자면,
next.js는 server-side에서 먼저 실행 되고, 그 후에 client-side에서 실행된다. window는 client-side에만 존재한다. 때문에, React Component내에서 window를 사용하고 싶다면 componentDidMount내에 코드를 작성해야한다.
원래 코드
해당 코드는 플링에서 실 사용되고 있는 코드이기 때문에 변수명 등의 각색이 있으며 전체를 보여드리지 못합니다:-)
const {
...
} = useForm({
mode: "onChange",
defaultValues: {
email: location?.state?.email || "",
password: location?.state?.password || "",
},
});window.location 프로퍼티에 접근하면 읽기 전용의 location 오브젝트를 얻어올 수 있다. 해당 위치에 입력되는 state 상태의 복제본을 담는다.
바뀐코드
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
import * as Yup from 'yup';
.
.
.
const validationSchema = Yup.object().shape({
email: Yup.string()
.required("이메일을 입력해주세요")
.email("이메일 형식으로 입력해주세요")
.min(2, "2글자 이상 입력해주세요"),
password: Yup.string()
.required("비밀번호를 입력해주세요")
});
const formOptions = {resolver: yupResolver(validationSchema)};
required는 유효성 검사 관련한 내용을 작성하는 것으로, 안내 문자를 보여준다.
email은 이메일 형식으로 작성하지 않았을 때의 유효성 검사에 걸리는 안내 문자를 보내준다.
min은 최소 글자수를 설정 및 안내 문자를 보여준다.
자세한 내용은 , 아래의 문서를 살펴보길 바랍니다:)
