Rails 유효성 검증을 Formik과 동기화: 실용적인 접근

Source: Dev.to

많은 SaaS 앱에서는 온보딩 과정에서 마찰을 줄이기 위해 “placeholder” 데이터를 허용합니다. 하지만 나중에 그 데이터를 검증해야 하면 어떻게 될까요? 저는 최근 PostCo에서 Rails 백엔드와 React 프론트엔드 사이에 다리를 놓아 이 문제를 해결했습니다.

주요 기술 포인트

• 백엔드 검증기: presence: true에만 의존하지 마세요. "Address pending" 또는 "00000" 같은 특정 문자열을 검사하는 PlaceholderValidator를 만들었습니다.
• 오류 브리지: Formik은 특정 형태를 기대합니다. Rails의 errors.messages를 Formik이 사용할 수 있는 평탄화된 객체로 변환하는 유틸리티를 작성했으며, 케이스‑매핑 레이어도 포함했습니다.
• UX 트릭: 필드에 placeholder가 있으면 사용자가 직접 삭제할 필요가 없습니다. UI에서 placeholder를 "" 로 취급하는 “clear on edit” 유틸리티를 구현해 즉시 Yup 검증이 트리거되도록 했습니다.

중첩된 오류를 처리하는 것은 복잡하지만, 약간의 매핑 로직만으로도 주니어가 만든 기능을 시니어 수준으로 끌어올릴 수 있습니다.