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

 

 

++해결

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

 

 

 

아래 글은 해결X 삽질 기록

 

여는 글

---

 

 

저번 포스팅에서 id 중복체크 기능을 구현했고 이를 사용자에게 알리기 위해 팝업창을 띄우는 기능이었다.

 

3일 동안 해결하려 했지만(사실 3일이면 오래 붙잡은 편도 아니지만 계속 붙잡으면 다른 기능 구현할 시간이 없기 때문에 눈물을 머금고 넘긴다..) 도저히 못 하겠어서, 그래도 추후 고치게 된다면 같은 삽질은 하지 말자라는 개념으로 삽질 기록을 남기려고 한다.

 

 

시도해 본 방법

---

 

Node.js에서

 

 

1. response.send 사용하기

 

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.send("<script>alert('사용할 수 없는 ID입니다');</script>"); //이 부분
        }
        
      })
    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,
      });
    }
});


});

 

저렇게 하면 팝업창은 잘 뜨는데 뜨고 나면 페이지가 빈 화면으로 바뀐다.

 

뒤로가기해도 안된다.

 

 

2. 그래서 response.send 밑에 response.redirect를 넣어봤다.

 

일단 alert 띄우고 다시 회원가입페이지로 넘어가길 바랬는데 오류가 떴고 오류를 구글링해보니 send(또는 write, json까지 다 해봤다)와 redirect 연속 사용은 안된다는 내용인 것 같다.

 

서버에 한 번에 요청을 두 번 보내게 되서 에러가 난다는 듯 하다.

 

+ redirect 단독으로만 사용했을 때는 redirect('http://localhost:3000');은 되지만 redirect('http://localhost:3000/signup');은 404에러가 났다.

 

 

 

3. response.send말고 response.render를 사용해봤다.

 

 

render는 해당 페이지에 텍스트를 보낼 수 있다.

 

예를 들어 backend/routes/index.js

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

 

위 코드는 기본으로 제공되는 코드이고 저렇게 작성해 놓으면 backend/views/index.js에 <%= title %>에 Express라는 텍스트가 출력된다.

 

근데 render를 사용하려면 페이지 파일이 nodejs쪽에 있어야 했다.

 

즉 내 경우에는 backend/views 아래에 페이지 파일이 있어야했지만 나는 frontend/src 밑에 있었기 때문에 경로 에러가 떴고 render 기본 경로는 backend/app.js에서 고칠 수 있다고 해서 고쳤는데도 똑같은 경로 에러가 났다.

 

backend/app.js

var views = [
  path.join(__dirname, 'views')
]

app.set('views', views);

 

여기를 보면 기본 경로가 views로 되어있고 이 views는 backend/views 하위 파일들을 사용할 수 있도록 등록한다는 것을 의미한다.

 

그래서 나는 views 경로를 배열로 만들어서 frontend/src 경로도 연결해주었고 연결된 것까지 에러 출력된 것을 보고 확인했는데 에러가 떠서 포기했다.

(에러 코드에 보면 frontend/src/components에서 못 찾겠다고 출력된다.)

 

이외에도 popup 패키지 설치, renderVue 패키지 설치 등등 해봤지만 만족할 만한 결과를 얻지 못했다.

 

 

 

Vue.js에서

 

그렇다면 다시 response.json으로 돌아가서, 여기까지는 그래도 실행이 된다.

 

빈 화면에 텍스트만 나와서 그렇지.

 

그렇다면 vue에서 response를 받아서 alert를 실행하도록 하면 되지 않을까? 라고 생각했다.

 

이게 제일 이상적인 방법이기도 했고 구글링했을 때도 다른 분들은 잘 되는 듯 했다.

 

먼저 backend/routes/index.js에서

response.json({message : '사용할 수 없는 ID입니다.'})

 

이렇게 작성하고 frontend/src/components/SignUpPage.vue에서

 methods : {
        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    
            
                
            })
        
        },

 

이렇게 해주면 되지 않을까라고 생각했다.

 

실제로 이렇게 하면 실행된다는 포스팅을 여러 번 보기도 했고.

 

근데 난 안된다.

 

그래서 response 함수의 문제인가 해서 여러 번 테스트해봤다.

 

먼저 response를 받긴 하는 건지 궁금해서 console.log를 써서 확인해보려고 했는데 console.log가 아예 동작하지 않는다.

 

response를 못 받아서? 그래서 무조건 실행되도록 함수 밖에 써봤는 데도 안 먹히는 걸보고 frontend에서는 console 명령어가 아예 안 먹는 것 같다.

 

backend에서는 잘 돌아가지만. 

 

 

 

결론

---

 

backend에서는 respose.send든 json이든 write든 메시지를 잘 보낸다. 

 

앞에서도 말했지만 빈 화면에 텍스트를 잘 출력한다.

 

그렇다면 두 가지로 원인을 추측 해볼 수 있다.

 

node.js에서 Vue로 아예 전달이 안된다.

 

전달은 됐지만 Vue에서 node.js 메시지 핸들링을 못하고 있다.

 

내 경험상 보통 vue가 안 될때가 잦아서 아마 이번에도 후자의 이유이지 않을까...

 

 

닫는 글

---

 

Node.js 공부의 필요성을 뼈저리게 느꼈다.

 

로그인 기능처럼 필수 기능이 아니라서 일단은 넘어가긴 하는데...

(id 중복 생성은 안되게 해 놓은 상태고 그걸 사용자한테 알리는 기능이 안되는 것이다)