refine 메서드로 검증하는 zod 스키마와 extend 동시 사용 불가 이슈

 

zod의 refine 메서드

 

zod의 refine 메서드는 특정 input 요소의 단순한 검증(ex. 문자열, 숫자, 정규식)이 아닌 커스텀 검증을 사용할 때 사용한다.

 

따라서, 회원가입에서의 비밀번호와 비밀번호 확인 두 가지의 값이 서로 같은지 다른지, 사용자가 입력한 값이 특정 로직을 거쳐서 해당되는 값이 나와야하는지 등의 상황에서 자주 쓰이게 된다.

// 예시 1
const myString = z.string().refine((val) => val.length <= 255, {
  message: "String can't be more than 255 characters",
});

// 예시 2
const passwordValidation = baseSchema.refine((data) => 
  data.password === data.passwordConfirm, {
    message: "비밀번호가 일치하지 않습니다.",
    path: ["userPassword2"],
  }
)

 

스키마 확장(extend) 사용

 

extend 메서드는 base 스키마를 만들고, 이 base 스키마를 기본으로 하여 2개 이상의 분기처리를 할 때 자주 사용한다.

const baseSchema = z.object({
  // 스키마 내용
});

const optionalSchemaOne = baseSchema.extend({
  // 스키마 내용
});

const optionalSchemaTwo = baseSchema.extend({
  // 스키마 내용
});

 

위 예시에서 아래 두 가지의 optional 스키마는 모두 baseSchema를 기본으로 사용하게 된다.

 

refine 검증을 한 스키마와 extend 동시 사용 불가 이슈

 

진행중인 프로젝트에서 회원가입을 두 가지 분기처리를 하여 만들게 되는데, 이에 따라 스키마도 분기처리를 해야 해서 위 예시와 같은 방식으로 구성했다.

 

그리고 z.object인 baseSchema에 refine 검증을 하고, 분기처리 스키마에서 각각 baseSchema를 extend하니 extend 메서드는 zodEffects에 없는데 이용하려고 한다는 타입 에러가 났다.

 

그래서 extend를 먼저 사용하고, 해당 스키마에 refine을 사용한 형태로도 만들어봤지만, 코드만 복잡해질 뿐 문제가 해결되지 않았다.

 

그래서 클라이언트단에서의 문제 해결을 생각해보게 되었고, 아래의 이유가 있었다.

• 검증하는 input 요소는 하나이고, 이 값은 서버로 전달되지 않는 값이다.
• 단순히 검증만 하고 용도가 끝난다.

그래서 스키마에서 refine을 활용한 검증로직을 삭제하고, 회원가입 컴포넌트에서 useEffect 훅을 사용하여 직접 같은 형태로 동작하는 검증로직을 만들었고, 검증이 안되면 다음단계로 진행하지 못하게 처리했다.

 

이렇게 만들고 나니 회원가입이 원활히 되어 스키마 코드에서 오랫동안 씨름했던 문제를 해결할 수 있었다.