개인 블로그 만들기(3)

express + quasar axios 통신

이번에 쓸 글은 back인 express와 front인 quasar간의 통신이다.

전글에 작성한 내용과 달리 proxy설정이 살짝 변경되었다.

/frontend/quasar.conf.js의 devServer 부분

 devServer: {
      server: {
        type: 'http'
      },
      port: 8080,
      open: true, // opens browser window automatically
      proxy:{
        '/':'http://localhost:3000',
        changeOrigin: true,
        pathRewrite:{
          '^/':''
        }
      },
      historyApiFallback: true
    },

/api를 없애고 '/'을 넣었다.
historyApiFallback은 나중에 추가로 install 해야될 history-api-fallback에서 언급하겠다.

프록시 설정을 했으면 이제 '/'를 넣으면 back인 express의 url이 붙는다.

front

Board.vue로 이동

<template>
<div>
  <div
    v-for="(bo,i) in board"
    :key="i"
  >
    <h1>{{bo.title}}</h1>
    <h1>{{bo.writer}}</h1>
  </div>
</div>

</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Board',
  data: ()=>({
    board: []
  }),
  created() {
       this.$axios.get('/board').then((res)=>{
         this.board = res.data.board
        }).catch((err)=>{
          console.log(err)
        })
  },
})
</script>
<style></style>

axios에 관해서는 전 글에 기재되어 있다.

(backend) connect-history-api-fallback

Router 모드를 history로 할 것이기 때문에 install을 해준다. hash를 사용하고 싶으면 이 부분은 넘어가도 좋다.

npm install --save connect-history-api-fallback

(backend) app.js 이동

(생략)
var history = require('connect-history-api-fallback');
(생략)
app.use(history());
// history는 선언하는 위치를 높게 해놓는게 좋다.

Vue 는 SPA로 동작하기 때문에 외부에서의 새로운 요청에는 경로를 찾아갈 수 없다. router로만 이동이 가능하기 때문에
새로고침, 주소창에다가 동일한 url을 입력한 경우에는 404에러가 난다. 나의 경우에는 화면은 나오지 않고 express에서
가져온 데이터가 흰 화면에 그대로 들어간 것을 확인 할 수 있었다. express 에서 res.json()으로 응답하는 결과만 주고
화면은 반응하지 않았으므로 당연한 결과이다.

(backend) routes/board.js

(생략)
router.get('/',(req,res)=>{
       Board.findAll()
            .then(boards =>{
                if(!boards.length) return res.status(500).send('데이터 없음')

                return res.status(200).json({board:boards})
            })
            .catch(err =>
                res.status(500).send(err)
            );
})
(생략)

저기 res 부분에는 return을 해주는게 좋다. 아니면 exception이 난다.
res.send가 같은 위치에 여러 개 있으면 동시에 응답이 가므로 exception이 난다고 한다.
그래서 return으로 하나의 res.send만 하고 끝나게끔 해줘야한다.

실행

cd frontend
quasar dev

cd backend
npm start

localhost:8080/board로 요청을 보냈을 때 나오는 화면이다.

번외

MongoDB userCreate 및 Collection 생성 Document 입력

Collection : RDB의 Table 이라고 생각
Document : RDB의 row라고 생각

먼저 MongoDB cli에 들어가서 해당 명령어를 순서대로 쳐준다.

처음 MongoDB를 생성한 경우에는 이렇게 하면 된다.

use admin

db.createUser({user:"<아이디>",pwd:"<password>",roles:[{"role":"dbAdminAnyDatabase","db":"admin"}]})
# dbAdminAnyDatabase 는 쓰기,읽기,db생성 및 삭제가 가능하게 하는 권한

#계정확인
db.auth("<아이디>","비밀번호")

> 1 # return 값이 1이 나오면 성공.

#생성할 DB
use <생성할 DB명>

#이 DB에 대한 계정 생성
db.createUser({user:"<id>",pwd:"pwd",roles:[{"role":"readWrite","db":"생성한 db명"}]})

#이렇게 되면 생성된게 아니라 값을 넣어줘야지 생성이 완료된다.
#나는 한번에 만드는 방법을 몰라서 이 방법을 쓴다.

db.<아무 collection 명>.insert({name:"asdf",d:"sdaf"})

# 이렇게 하면 완성 된다.

나는 docker를 이용해서 MongoDB를 설치했다.

mongod.conf.orig

conf 파일에

#security:

이렇게  되 있는 경우가 있다.

확인하는 방법은 docker의 mongodb cli를 실행 한 후에 /etc 경로에 mongod.conf.orig라는 게 있다.

그것을 vim으로 수정하면 된다.

vim이 없는 경우에는 설치를 하면 된다.

apt-get update

apt-get install vim

#설치 완료 후 /etc에서

vi mongod.conf.orig

security : 
    authorization: 'enable'

#또는 주석 처리 되 있다면 주석을 지운 후 위와 동일하게 설정해주면 된다.

이렇게 설정까지 완료되었으면 접속이 가능해진다.