중복 클릭으로 인한 중복 데이터 처리

iseon_u·2022년 6월 4일
0

Troubleshooting

목록 보기
4/13

중복 클릭으로 인한 중복 데이터 처리

🔥 문제 - 중복 클릭으로 인한 중복 데이터

  • 팀 프로젝트 중 회원 가입을 구현하면서 만나게 된 문제점, 중복 클릭
  • 처음엔 중복 회원 방지를 구현해 두었으니 괜찮지 않을까 싶었지만
    바보 같은 생각이였다. 중복 클릭은 꽤 강력했다.
  • 클라이언트에서 중복 클릭이 발생 했을 때
    첫 번째 데이터로 중복 회원 방지 로직을 통과하고
    그 사이에 똑같은 정보를 보내서 중복 데이터가 저장되는 것으로 보였다.
  • 테스트로 회원가입 버튼을 난사해본 결과 너무 쉽게 중복 회원이 생성 되었다…

🧯 해결 - 자바 스크립트 활용하기 (구글링)

  • submit 중복 클릭 방지라고 구글링을 해보니 다양한 방법이 나왔다.
  • 나는 그 중에서 클릭시 바로 버튼을 비활성화 하는 방식으로 처리했다.
function submit() {
	document.querySelector(".btn-submit").setAttribute("disabled", "true");
}
  • 회원 가입 창에서 아무리 난사를 해도 중복 회원이 발생하지 않게 되었다. 🌈
profile
🧑🏻‍💻 Hello World!

0개의 댓글