1. form 태그 내 button type
풀스택 미니 프로젝트에서 회원가입 및 로그인 페이지를 맡게 되었다.
눈에 보이는 디자인에 자신이 없어 구글링한 css를 가져왔고, 우리가 사용하고자 하는 방향대로 틀을 수정하는 데까지 어제 마쳤다.
오늘 해당 틀에 기능을 실제로 구현하면서 값을 잘 읽어오는지 console.log로 찍어주고자 했다.
그런데 버튼에 따로 기능을 달아주지도 않았고, 어디에서도 window.location.reload() 같은게 보이지 않는데 버튼을 누를 때마다 계속 새로고침이 되었다.
css는 영향을 줄 리 없고, html 코드 역시 별 게 없고, js 파일에서도 문제를 찾지 못해서 골머리를 앓다가 현직에 있는 친구한테 흘리듯 현재 문제를 이야기 했다.
친구는 'button에 type 설정이 되어있어?' 하고 물었고, 'form 태그 안에 type 설정이 안 된 button은 submit으로 잡힌다'고 덧붙여주었다.
- 정리
form 태그 내부 button의 type을 설정하지 않으면 submit으로 잡힌다.
-> 해결방법 : button의 type을 'button'으로 설정한다.
ex)
<form>
<button>버튼</button>
</form>위와 같은 경우, 버튼을 누를 때마다 submit이 일어나 페이지가 새로고침된다.
<form>
<button type="button">버튼</button>
</form>위처럼 type="button"을 추가하여 submit 되는 것을 막는다.
2. 아이디 및 닉네임 중복확인 위치 설정
초반에는 html 내에 display:none 설정을 해둔 요소를 변수처럼 사용하여 중복확인이 되었는지 체크하여, 설정한 값으로 변경이 잘 되어 있는 경우에 회원가입을 진행하도록 하였다.
그러나 개발자 모드에서 임의로 이 값을 변경할 것을 우려하여 변수를 숨기기 위해 html이 아니라 js 파일 내에서 수행하도록 하였다.
이후 확인하던 중, 개발자 모드에서 js 파일 역시 확인이 가능한 것을 알게 되었다. 결국 동일 작업을 파이썬 서버 파일 내에서 작업했다.
조원의 피드백 중, 중복값을 서버가 가지고 있으면 안 된다는 이야기가 있었다. A라는 사람과 B라는 사람이 동시에 진행할 경우 문제의 소지가 있는 예시를 들어보니 생각하지 못했던 경우였다.
결국 다시 js파일 내에서 수정을 하고, db에 데이터를 저장하기 직전에 db 내에 현재 입력하고자 하는 값이 있는지 재확인하여 중복 확인을 수행하도록 최종 코드를 작성하였다.
