mongodb 에 있는 데이터 모두 출력해보기

[유용환]

app.get('/', function(req, res) {

  db.collection.find('post').toArray((err, result)=>{
    console.log(result)
  })

  res.render('EachContents.vue')
  res.send('qwer')
})

홈 화면에 들어가면 vscode 콘솔창에 결과가 몽고디비에있는 것이 나와야하는데 안나옵니다. 이거 왜 그런건가요
콘솔창에 아무런 반응이 없습니다.

[codingapple]

res.send를 toArray 콜백함수안으로 옮깁시다 
collection('post') 같군요

[유용환]

app.get('/', (req, res)=> {

  db.collection('post').find().toArray((err, result)=>{
    // res.send('qwer')
    console.log(result)
    res.render('EachContents.vue', {posts : result})
  })})

이렇게 했을때 콘솔에 디비에 저장되어있는것이 안나옵니다.
그리고 데이터를 가져와서 바인딩 할때 뷰로 하려고 하면 검색했을때 axios를 사용하라고 하고 다른데서는 다른 방법으로하고 제각각인데 axios로 하는것이
제일 쉬운 방법인가요

[codingapple]

.render에서 vue파일은 못보냅니다 .send() 아니면 .json() 으로 데이터만 보내고 
프론트엔드에서 ajax요청으로 받아옵시다 axios가 가장 쉽습니다

[유용환]

잘 이해가 안가는 부분이 디비에 저장되어 있는것을 프론트엔드에 나타내려고 하는데 그러면은 우선 서버에서 디비에 저장되어
있는 데이터들을 가지고 온다음 프론트엔드에서 가져온 데이터가 있는 서버로 ajax요청을 하면 된다는 건가요

그리고 

app.get('http://localhost:8080', (req, res)=> {

  db.collection('post').find().toArray((err, result)=>{
    console.log(result)
    
  })

})
강의에서 위처럼 했을때 디비에 있는데 데이터가 vscode 콘솔창에 나오는데 제것에는 나오지가 않습니다.
이거 왜 그런건가요

[codingapple]

맞습니다
크롬콘솔창에 안나오면 서버에서 데이터를 보내는코드도 작성하고 ajax요청도 잘 합시다

[유용환]

서버 

app.get('http://localhost:3000', (req, res)=> {

  db.collection('post').find().toArray((err, result)=>{
    console.log(result)
    
  })

})  => 디비에서 데이터를 가져오고

프론트엔드 
return{
      
      userTitle : axios.get('http://localhost:3000').then((result)=>{
        this.userTitle = result[0].제목
      }),
}   =>  변수에 서버에 있는 데이터들을 가져와서 저장.

html에서 데이터 바인딩으로 this.userTitle 이렇게 했는데 "[object promise]"  이런 것이 나와서 콘솔창을 봤는데

localhost/:1 Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:3000/:1          Failed to load resource: net::ERR_FAILED
localhost/:1 Uncaught (in promise) AxiosError

검색해도 해결이 잘 안되는데 어떻게 수정해야하나요 axios는 잘 설치하고 임포트 했습니다.

[codingapple]

nodejs 마지막강의 하단에 cors 어쩌구 셋팅 그대로 따라하면 됩니다

[유용환]

강의에서 npm run build를 하면 index.html이 생기는데 vue에서는 이미 생겨서 빌드는 안해도 되나요

[codingapple]

처음 한번 해놓으면 좋고 나중에 사이트 어디 올려서 발행할때만 npm run build 하면 됩니다

[글쓴이]

글