(김유선) 개인프로젝트 SSR로 처음부터 끝까지 진행하기 - 회원가입 기능

몽고디비로 회원가입 기능을 구현했다.

 

이제 여기서 중복확인을 한번 거치는데, 처음 페이지에 접속했을 때 모든 유저의 데이터를 받아서 비교를 하려고 한다.

<% for(let i=0; i<userdata.length; i++){ %>

      <div>

        <div data-nick=<%=userdata[i].nickname%>></div>

        <div data-name=<%=userdata[i].username%>></div>

      </div>

    <% } %>

근데 이렇게 해버리면 아래와 같이 개인정보 데이터가 다 보이게 된다.

 

그래서 그냥 버튼을 누를 때 서버로 보내서 비교를 해주기로 했다.

 

팀원이 과거에 작성한 걸 봤는데 아이디 중복검사를 할 때 서버로 아이디를 파라미터로 해서 겟요청을 하고 서버가 그걸 받으면 비교를 하고 결과에 맞게 창을 띄워주는 것 같다(자바로 작성).

 

그래서 나도 그런 식으로 하고 결과에 맞게 제이슨 형식의 데이터로 전달해줄 것이다.

 

아 그리고 데이터를 받을 때, 

<input type="text" name="nickname"  required>

이렇게 인풋 태그 안에 required를 넣으면 이 인풋을 채우지 않고는 submit이 안된다.

팀원이 한 건데 매우 좋음!!

 

쨌든 그래서

samebtn[0].addEventListener('click',function(){

        if($('#nickname').val()==""){

          alert('닉네임을 입력해주세요')

        }

        else{

          $.get('/nicksame/'+$('#nickname').val())

          .done(function(data){

            alert(data)

          })

        }

      })

이렇게 에이젝스로 서버로 검사를 위한 겟 요청을 보내고

// 닉네임 중복 검사

app.get('/nicksame/:nickname', async(요청,응답)=>{

  let data = 요청.params.nickname

  if(await db.collection('user').findOne({nickname : data})==null){ // 데이터가 없는 경우

    응답.json(data+'은 사용 가능한 닉네임입니다.')

  }

  else{ // 데이터가 있는 경우

    응답.json(data+'은 이미 사용중인 닉네임입니다. 다른 닉네임을 사용해주세요.')

  }

})

서버에서 이렇게 중복 검사를 해줬다.

 

닉네임과 같이 아이디도 중복 검사해줌!

 

 

근데 이것을 해결하고 싶다...

 

JSON.parse(data)

이렇게 바꿔도 안되는 것 같다.

뭐로 적든 오류가 뜨거나 적용이 안된다ㅜㅜ 일단 포기

 

$('input').on('keyup', function() {

        $(this).val($(this).val().replace(/ /gi,""));

      }); // 공백 제거

이렇게 모든 인풋 태그들이 공백을 사용할 수 없게 막았다.

 

이제 계정을 새로 만들어서 테스트해봤더니 잘 작동한다.

일차 중복검사 끝!

 

원래는 서브밋하면 무조건 받아줬지만 이제 가입할 때 걸러야 한다.

 

먼저 비밀번호 입력이 다를 경우다.

app.post('/join',async(요청,응답)=>{

  try{

    if(요청.body.password==요청.body.passwordconfirm){ // 입력한 비밀번호와 재입력 비밀번호가 같으면 진행

      let 해시 = await bcrypt.hash(요청.body.password, 10)

      await db.collection('user').insertOne({

        nickname : 요청.body.nickname,

        username : 요청.body.username,

        password : 해시

      })

      응답.json('가입되었습니다. 가입하신 계정으로 로그인해주세요.')

    }

    else{응답.redirect('/join')}

  } catch(e){

    응답.json('입력하지 않은 값이 있거나 오류가 발생했습니다.')

  }

})

 $('.submit').click(function(){

        if($('#password').val()!=$('#password-confirm').val()){

          alert('입력하신 비밀번호가 다릅니다.')

        }

      })

근데 이렇게 되면 잘못 입력한 후 alert 창도 이뿌게 뜨지만

여기서 확인을 누르면

다 사라진다ㅠㅠ

 

 

정말 갈 길이 멀구만...