ajax post 요청

[이수인]

안녕하세요. nodejs를 수강하고 있는 수강생입니다. 다름이 아니라 제목 그대로 ajax로 post요청을 보내는 것을 만들고 있다가 발목이 잡혀서 
이렇게 글을 남깁니다. 만들고자 하는 post는 회원가입인데, db에 저장할 때 암호화하고자, hash함수를 사용했습니다. 그런데 hash함수부분을
실행할 때 에러가 계속 뜹니다. ajax를 사용 안 하면 정상적으로 잘 되는데 ajax를 사용하니까 계속 에러가 뜨니까 더 잘 모르겠어서 도움을 얻고
싶습니다. 코드가 조금 긴 점 이해해주시면 감사하겠습니다.
먼저 정상적으로 작동되었던 코드를 보여주겠습니다. signUp.ejs입니다.
<div class="container mt-3">
		<h4 class = "text-center">Sign Up Page</h4>
		<form action = "/signUp" method="POST">
		  <div class="form-group">
			<label>ID</label>
			<input type="text" class="form-control" name="newId">
		  </div>
		  <div class="form-group">
			<label>PW</label>
			<input type="text" class="form-control" name="newPw">
		  </div>
		  <button type="submit" class="btn btn-danger signUp">Submit</button>
		</form>
	</div>

다음은 server코드입니다.
app.post('/signUp', function(요청, 응답){
	db.collection('loginCounter').findOne(
	{
		name : '회원 수'
	},
	function(에러, 결과){
		let 총회원수 = 결과.totalmember;
		db.collection('login').findOne(
		{
			id : 요청.body.newId,
			pw : 요청.body.newPw
		},
		function(에러, 결과){
			if(결과 === null){
				bcrypt.hash(요청.body.newPw, 8).then(function(암호화된패스워드) {
    				db.collection('login').insertOne(
					{
						_id : 총회원수 + 1,
						id : 요청.body.newId,
						pw : 암호화된패스워드
					},
					function(에러, 결과){
						응답.send("<script>alert('회원가입이 완료되었습니다.');location.href='/';</script>");
						db.collection('loginCounter').updateOne(
						{ name : '회원 수'},
						{ $inc : {totalmember:1}},
						function(에러, 결과){
							if(에러){return console.log(에러)};
						});
					})
  				})
			}else{
				응답.send("<script>alert('이미 가입된 정보입니다. 다시 입력해주십시오.');\
						location.href='/signUp';</script>");
			}
		})
	})
})

위에서 보낸 코드로 하면 정상적으로 회원가입이 진행됩니다. 이제 ajax로 post요청을 하려는 코드를 올리겠습니다. signUp.ejs입니다.


<div class="container mt-3">
		<h4 class = "text-center">Sign Up Page</h4>
		<form action = "/signUp" method="POST">
		  <div class="form-group">
			<label>ID</label>
			<input type="text" class="form-control" name="newId">
		  </div>
		  <div class="form-group">
			<label>PW</label>
			<input type="text" class="form-control" name="newPw">
		  </div>
		  <button type="submit" class="btn btn-danger signUp">Submit</button>
		</form>
	</div>
	  
	  
	<script>
		$('.signUp').click(function(e){
			
			const signId = $('input[name=newId]').val();
			const signPw = $('input[name=newPw]').val();
			$.ajax({
				url : "/signUp",
				type : "POST",
				dataType : "JSON",
				data : 
				{
					"id" : signId,
					"pw" : signPw
				},
			}).done(()=>{
				//$('.afterLogin').addClass('hidden');
			}).fail(function(xhr, textStatus, errorThrown){
				console.log(xhr, textStatus, errorThrown);
			})
		})
	</script>

다음은 server코드입니다.


app.post('/signUp', function(요청, 응답){
	db.collection('loginCounter').findOne(
	{
		name : '회원 수'
	},
	function(에러, 결과){
		let 총회원수 = 결과.totalmember;
		console.log(요청.body.id) //undefined
		console.log(요청.body.pw) //undefined
		db.collection('login').findOne(
		{
			id : 요청.body.id,
			pw : 요청.body.pw
		},
		function(에러, 결과){
			if(결과 === null){
				bcrypt.hash(요청.body.pw, 8).then(function(암호화된패스워드) {
    				db.collection('login').insertOne(
					{
						_id : 총회원수 + 1,
						id : 요청.body.id,
						pw : 암호화된패스워드
					},
					function(에러, 결과){
						응답.send("<script>alert('회원가입이 완료되었습니다.');location.href='/';</script>");
						db.collection('loginCounter').updateOne(
						{ name : '회원 수'},
						{ $inc : {totalmember:1}},
						function(에러, 결과){
							if(에러){return console.log(에러)};
						});
					})
  				})
			}else{
				응답.send("<script>alert('이미 가입된 정보입니다. 다시 입력해주십시오.');\
						location.href='/signUp';</script>");
			}
		})
	})
})


코드가 정말 길지만 server 코드에서는 바뀐 거라곤 요청.body.newId => 요청.body.id, 요청.body.newPw => 요청.body.pw밖에 없습니다.
signUp.ejs에서는 <script>...</script>부분만 추가했습니다.

에러코드도 첨부하겠습니다.


Error: data and salt arguments required
    at Object.hash (/workspace/coding_apple/node_modules/bcrypt/bcrypt.js:137:17)
    at /workspace/coding_apple/node_modules/bcrypt/promises.js:29:12
    at new Promise (<anonymous>)
    at Object.module.exports.promise (/workspace/coding_apple/node_modules/bcrypt/promises.js:20:12)
    at Object.hash (/workspace/coding_apple/node_modules/bcrypt/bcrypt.js:133:25)
    at /workspace/coding_apple/server24.js:261:12
    at executeCallback (/workspace/coding_apple/node_modules/mongodb/lib/operations/execute_operation.js:70:5)
    at handleCallback (/workspace/coding_apple/node_modules/mongodb/lib/utils.js:102:55)
    at /workspace/coding_apple/node_modules/mongodb/lib/operations/find_one.js:31:9
    at /workspace/coding_apple/node_modules/mongodb/lib/utils.js:693:5

코드와 에러 첨부는 이상입니다. 제가 서버로 데이터를 가져오면서 잘못 가져온 것인지, 아니면 ejs파일에서 잘못 작성한 건지, 아니면  hash함수를
잘못 사용한 건지 잘 모르겠습니다. 무엇이 문제인지 최소한의 힌트만 주신다면 계속 고민해보겠습니다. 글이 길었는데 읽어주셔서 감사합니다.

[codingapple]

ajax쓰는거면 form태그는 삭제하거나 
이벤트리스너안에 e.preventDefault() 넣어봅시다

[이수인]

저 코드에서 form태그 안 지우고 이벤트리스너 안에 e.preventDefault()를 썼을 때는 정상적으로 db에 저장이 되고 안 쓰면 500error가 뜹니다.
왜 e.preventDefault를 사용하고 안 하고에 이런 결과가 나오는지 알고 싶습니다.

[codingapple]

form태그있는상태로 전송버튼누르면 폼전송되고 새로고침되어서 ajax가 이상하게 동작합니다

[이수인]

저번에 요청은 1번만 하시라고 하셨던 것으로 알고 있습니다. 그런데 e.preventDefault()를 써도 결국 요청이 2번 가는 것 아닌가요? 그러면 오류가 떠야하는 것 아닌가요?

[codingapple]

e.preventDefault() 저기서 쓰면 폼전송을 막아줍니다

[이수인]

그러면 e.preventDefault()를 썼을 때는 / ajax작동->정상 작동
안 썼을 때는 / ajax작동->새로고침->form 전송->요청 2번으로 오류

가 맞을까요?

[codingapple]

넴 새로고침은 폼전송 뒤에일어날듯요

[이수인]

감사합니다.

[글쓴이]

글