[Node.js, Vue.js, Ajax] ::디버깅 실패:: Vue.js alert 넣기

 

+ 2021.10.18

해결된 줄 알고 글을 작성했으나 알고보니 안됐다. 아래 포스팅을 보면 내가 왜 착각했는 지 나와있다. 

[Node.js, Vue.js, Ajax] -삽질기록- Vue.js alert 넣기

 

 

여는 글

---

 

먼저 내가 어떤 기능을 구현하고 싶었는 지 간단하게 설명하자면 회원가입 시 DB를 조회한 후 아이디가 이미 존재하면 이미 존재하는 아이디라고 alert를 통해 사용자에게 알리는 기능이었다.

 

그러나 어떻게 해도 Node.js와 Vue.js가 통신하지 못했다.

[Vue.js, Node.js] 해결X Node.js에서 보낸 response Vue에서 처리

 

 

뜻밖에도 아임포트(결제기능)을 구현하면서 힌트를 얻었다.

 

Ajax를 사용하는 것.

 

아임포트 구현 코드에서는 Ajax를 사용했고 alert 창이 뜨는 걸 확인했다.

 

Ajax 사용할 생각을 못했던 이유는 몰라서가 아니라 오히려 알고 있었기 때문이다.

 

앞서 졸업작품(Django)에서 Ajax를 사용해 새로 고침하지 않고 페이지를 로드해서 사용했는데 Ajax는 이런 용도로 쓰는 거구나, 해서 alert랑 전혀 상관없는 줄 알았다.

 

 

 

기존 코드 vs Ajax 사용 코드

---

 

기존 코드

 

frontend/src/components/SignUpPage.vue

signup() {
            this.axios.post('http://localhost:3000/signup',  { 
            headers : {
                "Content-Type" : "application/x-www-form-urlencoded"
            },
            id : this.id,
            password : this.password,
            name : this.name,
            address : this.postcode,
            phone : this.phone
                
            }).then((response) => { //이 부분이 아예 동작 안함
                    alert(response.data.message); 
                
            
                
            }).catch((error) => {  
                this.error=error    
            
                
            })
        
        }

 

 

backend/routes/index.js

router.post('/signup', (request, response) => { //회원 가입
  console.log('success served');
  var ck = true;
  User.find((err, users) => { //id 중복체크 
      users.forEach((item) => {
        if(item.id == request.body.id){ // 평문끼리비교하는거라 배포시에는 이렇게 하면 안됨 암호화 필수
          ck = false;
          response.json({message : '사용할 수 없는 ID입니다.'})
          //response.redirect('http://localhost:3000');
        }
        
      })
    if(ck==true){
      User.create ({
        id:request.body.id,
        password:request.body.password,
        name:request.body.name,
        address:request.body.postcode + ' ' + request.body.roadAddress + ' ' + request.body.detailAddress + request.body.extraAddress,
        phone:request.body.phone,
      });
      response.redirect('/');
    }
});


});

 

 

Ajax 코드

 

frontend/src/components/SignUpPage.vue

signup() {
            jQuery.ajax({
                url: "http://localhost:3000/signup",
                method: "POST",
                headers: { "Content-Type": "application/json" },
                data: {
                    id : this.id,
                    password : this.password,
                    name : this.name,
                    address : this.postcode,
                    phone : this.phone
                    },
                error : function (){
                        alert("이미 존재하는 아이디입니다.");
                } 
            });
        },

 

 

backend/routes/index.js

router.post('/signup', (request, response) => { //회원 가입
  console.log('success served');
  var ck = true;
  User.find((err, users) => { //id 중복체크 
      users.forEach((item) => {
        if(item.id == request.body.id){ // 평문끼리비교하는거라 배포시에는 이렇게 하면 안됨 암호화 필수
          ck = false;
          response.status(400);
        }
        
      })
    if(ck==true){
      User.create ({
        id:request.body.id,
        password:request.body.password,
        name:request.body.name,
        address:request.body.postcode + ' ' + request.body.roadAddress + ' ' + request.body.detailAddress + request.body.extraAddress,
        phone:request.body.phone,
      });
      response.redirect('/');
    }
});


});

 

 

 

닫는 글

---

 

아직 고쳐야 하는 부분은 2가지다.

 

로그인/로그아웃 세션으로 구현하기, redirect 서브 페이지 안되는 거 해결하기

 

이 외에는 편의성 개선? 정도 인데 이 부분은 시간이나 여력이 되면 해보는 걸로!