유효성 검사와 supabase storage

HTML5 기본 유효성 검사와 맞춤형 유효성 검사의 차이

1. HTML5 기본 유효성 검사의 동작 원리

• 유효성 검사 조건:
  • required, minlength, maxlength, pattern 등 속성을 통해 브라우저가 자동으로 입력값 검증.
  • 폼 제출 전 브라우저가 각 필드의 유효성을 확인.
• 기본 메시지 표시 조건:
  • onSubmit 이벤트에서 e.preventDefault()를 호출하지 않아야 기본 유효성 검사가 동작.
  • <form novalidate> 속성을 사용하면 기본 검사가 비활성화됨.

2. 유효성 검사가 동작하지 않을 수 있는 상황

• JavaScript로 직접 구현한 경우:
  • 브라우저의 기본 메시지가 JavaScript 커스텀 메시지와 충돌.
  • 예: setErrors와 같은 사용자 정의 에러 메시지 사용.
• e.preventDefault()를 호출한 경우:
  • 기본 폼 제출 동작이 차단되면서 유효성 검사가 비활성화됨.
• novalidate 속성을 사용한 경우:
  • <form novalidate>로 인해 브라우저가 유효성 검사를 실행하지 않음.

3. 기본 유효성 검사를 유지하면서 맞춤형 검사 추가하기

• 기본 유효성 검사를 활성화:
  • required 등의 HTML 속성을 활용.
• JavaScript로 추가 검사:
  • 브라우저 기본 유효성 검사를 유지하며 setCustomValidity로 사용자 정의 메시지 추가 가능.

 

---

Supabase Storage를 활용한 이미지 관리

1. Supabase Storage를 사용하는 이유

• 이미지 저장소와 데이터베이스 분리:
  • 데이터베이스에 대용량 데이터를 직접 저장하면 성능이 저하될 수 있음.
  • Supabase Storage를 통해 효율적으로 관리.
• CDN 지원:
  • 업로드된 파일은 CDN으로 빠르게 제공.
  • 전 세계적으로 빠른 이미지 로딩 가능.
• 권한 제어:
  • 읽기/쓰기를 유연하게 설정.
• 비용 효율성:
  • 대역폭 및 파일 크기에 기반하여 비용이 책정.
• 파일 URL 제공:
  • 파일 경로(URL)를 데이터베이스에 저장하여 참조.

 

---

느낀 점

• HTML5 기본 유효성 검사는 간단한 입력 검증을 제공하지만, 맞춤형 검사가 필요할 경우 JavaScript를 활용해야 함.
• Supabase Storage는 파일 저장소로서 효율적이고 비용 효과적이며, CDN 지원과 유연한 권한 설정이 큰 장점.
• 프로젝트에서 브라우저의 기본 기능과 클라우드 서비스를 적절히 조합하면 개발 속도와 관리 효율성이 크게 향상될 수 있음.