[Node.js, Vue.js] res.json으로 Vue에 값 전달하기

 

 

DB를 사용하고 있는 만큼 생성과 삭제, 수정 기능 전부를 구현해보고 싶었다.

 

그래서 이제 수정 기능만 구현하면 되는데 마침 마이페이지-개인정보수정 기능을 넣으면 딱이겠다, 싶어서 만들기 시작했다.

 

다른 공식 페이지들을 보면 개인정보 수정하러 들어가면 폼에 기존 값이 입력되어져있다.

 

즉, 수정 페이지에 들어가면 화면에 DB값을 입력시켜 놓아야 한다는 것이다.

 

 

 

---

 

 

문제1  json 전송

 

DB값을 가져와 VUE에 뿌려야했는데 이 부분이 문제였다.

 

보통은 res.json/res.send로 json을 vue로 보내는 방식을 쓰는 듯한데 내가 res.json/send를 쓰면 페이지가 아래처럼 된다.

 

 

빈 화면에 값만 출력된다.

 

새로고침해도 저런 화면으로 뜨는 데 테스트를 여러 번 해보니 get 방식으로 전송하는 페이지를 새로고침할 경우 새로고침하면 그 페이지의 get 요청이 실행되어버린다.

 

그래서 처음엔 새로고침을 막을까도 생각했지만 근본적인 해결이 안되기때문에 고민하다가 도메인 연결할 때 참고했던 포스팅에서 frontend랑 backend 경로를 다르게 설정했던 게 떠올랐다.

 

frontend에서는 /login로, backend에서는 /api/login로 설정하고 frontend랑 backend랑 ip도 다르게 설정하셨던 것 같은데 처음 봤을 때는 왜 굳이 이렇게 설정하지? 라는 생각이 들었는데 구글링하다보니 이렇게 설정하시는 분이 많아서 나도 이렇게 해야하나..? 라는 생각까지 들었다.

 

그래도 난 저렇게 설정 안해도 문제 없었고 굳이? 라는 생각이 들어서 넘겼는 데 갑자기 이 기억이 생각나면서

 

데이터를 /mypage로 보내니까 json이 /mypage에 띄워져버리는 거라면 /api/mypage로 json을 보내되 출력은 /mypage에서 하면?

 

라는 생각이 들어서 해봤는데 뜻밖에도 내 가정대로 동작했다.

 

게다가 새로고침해도 멀쩡하고 /api/mypage가 눈에 보이지도 않았다.

 

사실 이렇게 해결하는 게 맞는 지 모르겠지만 다른 분들이 backend에서 /api 를 덧붙이는 이유가 서버동작처리용 경로이라고 추측했기 때문에 저런 가정을 해봤다.

 

++확인해보니 주소창에 직접 /api/mypage를 칠 경우 빈 화면에 json이 그대로 보여서 완전히 해결된 상태는 아닌 것 같은데 어떻게 고쳐야 할 지 모르겠다...

 

 

 

 

문제2  접속 시 DB값 띄우기

 

 

 이건 문제 1을 해결하려다가 우연히 해결하게 됐다.

 

vue의 created()를 쓰면 화면 접속 시 DB값이 띄워져 있는 상태로 볼 수 있다.

 

화면을 그릴 때 응답을 받아서 성공하면 화면을 띄우는 방식이라 내가 원하던 대로 동작한다.

 

 

/components/mypage.vue

<script>
import axios from 'axios'

export default {
    name : "MyPage",
    data(){
        return{
            mydata:''
        }
    },
        created() {
            axios.get('http://olrang.shop:3000/api/mypage',  { 
                withCredentials: true,
                headers : {
                    "Content-Type" : "application/json"
                },
            }).then((response) => { 
                this.mydata = response.data.phone
                
            }).catch((error) => {  
                this.error=error    

            })
        },
    }

</script>

 

 

/routes/index.js

router.get('/api/mypage', (req, res) => { //마이페이지 정보 수정
  User.findOne({name : req.cookies.session},(err, users) => { 
      if(!req.cookies.session || err) {  // 쿠키 없거나 에러 났을 때
        res.redirect('/');
      } else {
        res.set('Content-Type', 'application/json');
          var mydata = {phone : users.phone};
          res.json(mydata);
      }
  })
})

 

 

app.js

app.use('/api/mypage');

 

 

---

 

 

사실 구현하면서 안되는 부분이 많았다. (빈 화면에 json이 뜨는 문제는 몇 달전부터 인지하고 있었고 지금은 해결되었지만 axios에서 전송만 되고 받기가 안되는 문제가 있었다.)

 

안 고쳐지는 부분이라고 생각해서 놔뒀고 더 솔직하게 말하면 모른 척했다.

 

그러나 그 부분들이 모여서 결국 이렇게 다시 맞닥뜨리게 됐을 때 너무나 복잡하고 큰 문제들로 다가와서 찰나지만 '모른 척하지 말 걸 그랬다, 손 댈 수가 없을 정도로 코드가 엉망인 것 같다, 코드를 갈아엎어야하나?' 라는 생각까지 들었다.

 

근데 해결해나가면서 든 생각은 "역시 안되는 건 안되는 이유가 있다" 였고 이젠 안 고쳐지는 게 아니라 이유가 있어서 안되는 거니 이유를 찾자 라는 생각이 들게 됐다!

 

확실히 에러들을 만날 때마다 힘들지만 해결하고 나면 또 하나 알게됐다는 성취감이 든다.