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

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

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

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

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

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

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

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

빈 화면에 값만 출력된다.

그래서 어디가 문제인지 생각해봤고 axios 코드를 수정해 본 후 문제점을 찾았다.

(db 개발하기 시작하면서 axios에서 .then이 작동하지 않았기 때문에 vue->nodejs는 되는데 nodejs->vue는 안된다고 생각하던 중이었는데 this.axios.get -> import axios from axios 쓰고 axios.get 쓰니까 then이 잘 작동한다 ㅠㅠㅠ 처음부터 this 붙여서 썼는데 처음부터 써왔던 코드도 의심해봐야하는구나..)

vue에서 값을 못 받고 있다.

저 값만 띄워져있는 페이지를 f12 눌러서 확인해보면 완전 빈 페이지에 값만 출력되는데 주소는 또 맞다.

새로고침해도 저렇게 뜬다.

그렇다면 node.js는 왜 자꾸 빈 페이지에다가 값을 보내는 걸까.

해결 후 추후 작성해보겠다.

from http://codelist.tistory.com/82 by ccl(A) rewrite - 2021-12-26 17:01:19