[Nuxt.js] Express를 미들웨어로 사용하여 DB 연결하기

브리셀·2021년 10월 5일
express.jsmiddlewarenuxt.js
0

Vue.js

목록 보기
4/6

각 코드는 더 다양하게 활용할 수도 있지만, 이 포스트에서는 기본적인 구성만 하는 것을 목표로 했다.

미들웨어(Middleware)

  • 두 시스템(여기서는 프론트엔드와 백엔드)이 서로 데이터를 주고받을 수 있도록 그 사이(middle)에서 중개해주는 역할을 하는 프로그램
  • 프론트엔드와 백엔드를 완전히 분리해서 별개의 프로젝트로 개발할 수도 있지만, 단일 프로젝트 내에서 모두 해결할 때에 필요한 프로그램
  • Node.js 기반에서는 Express가 대표적으로 사용됨

미들웨어 구성하기

  1. (백엔드 프로젝트가 아니라 통합 프로젝트임을 전제로 설명한다.)

    • 시작점 외에는 큰 차이가 없을 것 같다.

  2. Nuxt.js 등의 프로젝트를 만들 때 Express를 사용하도록 체크하거나, 생성 당시 체크하지 못했을 경우 패키지를 추가로 설치한다.
    npm install express

  3. 프로젝트 설정 파일이 nuxt.config.js 등으로 분리되어있는 경우 해당 파일 마지막에,
    혹은 분리되어 있지 않은 경우 package.json 파일 마지막에 아래 코드를 작성한다.

    serverMiddleware: ['~/api/index.js']

    위 내용은 <root>/api 폴더에 있는 index.js을 이용하여 미들웨어를 구축하겠다는 선언이다.

  4. <root>/api/index.js 파일을 만들고 Express 코드를 작성한다.

    const express = require('express');
const app = express();
// 미들웨어이기 때문에 port는 따로 지정하지 않아도 되는 것 같다.

// route를 직접 작성할 경우
app.get('/', function (req, res) {
  res.send('Hello World!')
});

// route 설정을 분리할 경우
// 물론 여럿 추가할 수 있음
const users = require('./routes/users');
app.use('/users', users);

module.exports = {
  path: '/api',
  handler: app
};

    위에서 볼 수 있듯이 Express의 기본 형태는 express() 인스턴스에 METHOD와 path를 명시해주고, req(uest)와 res(ponse)를 인수로 갖는 함수를 넘겨주는 것이다.
    위 코드대로라면 localhost:3000/api/(포트 3000은 Nuxt.js 프로젝트의 기본 개발 포트)로 접속했을 때 브라우저에 Hello World!라는 문구가 나타날 것이다.

    1. route 설정은 위 코드에서 require 문에 넣은 것처럼, <root>/api/routes 폴더에 users.js 등의 파일을 만들어 할 수 있다.

      const { Router } = require('express');
const router = Router();

// 위에선 app.METHOD의 형태로 작성한 코드가
// 여기서는 router.METHOD의 형태라는 점만 다르다.
router.post('/register', function (req, res) {
  ...
});

// 같은 uri에 여러 메소드를 바인딩 할 경우
router.route('/foo')
  .get(function (req, res) {
    ...
  })
  .post(function (req, res) {
    ...
  });

// 함수 부분을 controller로 분리하는 방법도 있다.
const usersController = require('../controllers/usersController');
router.post('/login', usersController.login);

module.exports = router;

    2. controller를 이용한 설정은 <root>/api/controllers 폴더에 usersController.js 등의 파일을 만들어 할 수 있다.

      module.exports.login = function (req, res) {
  ...
};

    3. function (req, res) 리턴값 예시

      • res.send('문자열');
      • res.json({ k1: v1, k2: v2, ... });
      • res.redirect('/foo/bar/');
      • res.status(404).send('문자열');

  5. DB에 연결할 때에는

    1. MongoDB, MySQL 등의 DB 서버 따로 준비
    2. 각 데이터베이스에 맞는 패키지 설치 (예: npm install mongoose)
    3. <root>/api/index.js에서 DB 연결하기
      • 연결 코드 자체는 분리할 수 있지만 해당 코드를 index.js에서 불러와야 함
      • mongoose 예시
        // <root>/api/db.js
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/DatabaseName', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback() {
  console.log('MongoDB Connected...');
});

module.exports = db;
        // <root>/api/index.js
...
const db = require('./db');
...
        코드를 이렇게 분리하면 ESLint가 'db' is assigned a value but never used.라는 메시지를 띄우지만,
        프로젝트를 실행시켜보면 MongoDB Connected... 라는 메시지가 잘 뜬다.

API 불러오기

  • .vue의 <script>를 아래처럼 구성한다. (axios 필요)
    export default {
  ...
  async asyncData({ app, query }) {
    const hello = await app.$axios.$get('/api/test');
    return { hello };
  },
  ...
};

참고한곳

profile
브리셀
풀스택도 프론트부터
이전 포스트

[Vue.js] ESLint와 Prettier

다음 포스트

[Express] Mongoose 구성하기

0개의 댓글