팀프로젝트에서 회원가입 기능을 맡았다.
비밀번호 저장에 있어서 해시와 솔트의 개념을 알아야 하는데 아래 블로그가 정말 많은 도움이 되었다.
https://st-lab.tistory.com/100
1트 - 문제 발생
문제점 : 회원가입 페이지에서 입력 다 하고 join 버튼 누르면 페이지 리로드 되면서 서버로 데이터 안 보내짐
먼저 html 태그를 아래와 같이 만들었다.
<form onsubmit="join()">
<label for="nickname"></label>
<input id="nickname" type="text" placeholder="닉네임을 입력하세요." />
<label for="id"></label>
<input id="id" type="text" placeholder="아이디를 입력하세요." />
<label for="pw"></label>
<input id="pw" type="text" placeholder="비밀번호를 입력하세요" />
<button type="submit">Join!</button>
</form>
아래는 script.js
const join = () => {
let formData = new FormData();
const user_id = $("#id").val();
const user_nickname = $("#nickname").val();
const user_pw = $("#pw").val();
formData.append("id", user_id);
formData.append("nickname", user_nickname);
formData.append("password", user_pw);
fetch("/join", { method: "POST", body: formData })
.then((res) => res.json())
.then((data) => {
console.log("회원가입 완료");
alert(data["message"]);
});
};그리고 app.py
@app.route('/join', methods=['GET', 'POST'])
def join():
if request.method == 'POST':
id = request.form['id']
nickname = request.form['nickname']
password = request.form['password']
# 랜덤 솔트 값 생성
salt = os.urandom(16)
# 솔트랑 비번이랑 합쳐서 해싱/ Encode로 bytes obj 만들어서 해싱하고 다시 16진수 스트링으로 변환(hexdigest())
hashed_password = hashlib.sha256(password.encode() + salt).hexdigest()
doc = {
'id': id, 'nickname': nickname, 'salt': salt, 'password': hashed_password
}
db.pjs.insert_one(doc)
return jsonify({'message': '회원가입 완료'})
else:
return render_template('join.html')
이렇게 만들고 실행하는데
pjs 디비에 값도 저장 안되고 fetch 하면 콘솔에 찍고 alert 해야하는데 안됨! 일단 회원가입 버튼 누르면 바로 새로고침 돼서 콘솔도 잘 안 보임
찾아보니까 Fetch로 데이터를 전달하기 전에 submit이 진행돼서 페이지가 리로드되니까 데이터 전달되는게 없어서 저장이 안되는거엿고 블라블라
결국 submit 이벤트를 감지하는 form 태그 때문이었다.
1트 원인 - 📑 form과 submit
HTML form 요소는 사용자의 input 값을 모은다. form이 submit되면 사용자의 입력값을 서버로 보내는 것이다. 기본적으로 form이 submit 되면 브라우저가 페이지를 리로드한다!
그렇기때문에 join() 이벤트 리스너 함수를 실행시키기도 전에 submit으로 인한 페이지 리로드가 발생하고 데이터가 넘겨지지 않는 것이다.
따라서 e.preventDefualt() 메소드를 사용해서 이벤트의 default behavior를 방지한다. 여기서는 submit 이벤트의 reload를 방지해주는거지.
이벤트 핸들러 함수(join())에 submit으로 발생한 이벤트 객체가 지나가는데 그 아이에게 저 메소드를 사용하면 된다.
아래는 chatgpt에게 물어본 내용 중 일부
In the context of a form submission, calling e.preventDefault() prevents the default behavior of the form submission event, which is to reload the page. Instead, it allows the event handler function to execute JavaScript code to submit the form data using the fetch function
When using onsubmit, the function should return either true or false to determine whether or not the form should be submitted. In your code, the join() function is not returning anything, so the form is not being submitted.
onsubmit 이벤트리스너를 사용할 때는 무조건 이벤트 핸들러 함수(여기서는 join)가 true or false 값을 반환해줘야 한다.
1트 - 해결방법
그리하여
1.form에서 onsubmit 이벤트 리스너를 뺀다.
2. form에서 이벤트
3.
