[Node.js, Vue.js] alert 띄우기

 

저번 글(https://codelist.tistory.com/80)에서 마무리에 

 

제일 좋은 건 백엔드->프론트로 response를 전달해서 프론트에서 response를 받아 alert를 띄우는 거지만 지금의 나에겐 이 방식이 최선인 것 같다.

 

라고 했었다.

 

알고보니 axios 문제였고 해결 된 지금은 내가 원하던 대로 백엔드->프론트로 response를 전달해서 프론트에서 response를 받아 alert를 띄우는 게 가능해졌다.

 

원래는 아래처럼 작성했었다.

<script>

    methods : {
        login(){
            this.axios.post('http://olrang.shop:3000/login',  { //이 줄의 this가 문제였음
                withCredentials: true,
            id : this.id,
            password : this.password
                
            }).then((response) => { 
                this.response = response
                
            }).catch((error) => {  
                this.error=error    
            })
        },
    }
}
</script>

 

backend로 전송은 되니까 코드 자체에 문제가 없다고 생각했다.

 

받기가 안되는 건 nodejs의 문제거나 then에서 받는 코드를 잘못 작성했을 거라고만 생각했지 axios 코드 자체가 잘못됐다고 생각하지 못했다.

 

 

<script>

import axios from 'axios'

    methods : {

        login(){
            axios.post('http://olrang.shop:3000/login',  { 
                withCredentials: true,
            id : this.id,
            password : this.password
                
            }).then((response) => { 
                this.response = response
            
                
            }).catch((error) => {  
                this.error=error    
            
                
            })

        },

        

    }

}
</script>

 

위 코드로 받으니까 then부분이 잘 동작했다.

 

물론 alert도 잘 띄운다.

 

이제야 드디어 내가 원하던 방식으로 alert를 띄울 수 있게 됐다.

 

DB 연결할 때 참고한 포스팅에서 보고 8월 중순부터 this 붙여서 썼는데 처음부터 써왔던 코드도 의심해봐야하는구나.. 라고 생각했다.