MVC, Database 구현

---

MVC  ✔️

Model View Controller

 

SW 아키텍쳐 디자인 패턴이다.
애플리케이션의 기능을 분리한다.
체계화된 프로그래밍을 가능케한다.

ex) Ruby on Rails (Ruby) / Laravel (PHP) / Codeigniter (PHP) / Django (python) / Express (JS)

 

 

Model 

어플리케이션이 무엇을 할 것인지 정의한다.

 

내부 로직을 처리하기 위한 역할을 한다.
데이터 저장소(DB)와 연동하여 사용자가 입력한 데이터나 사용자에게 출력할 데이터를 다룬다.

* Model은 다른 컴포넌트들에 대해 알지 못한다. 

 

View

사용자에게 화면(UI)을 보여준다. 화면에 무엇을 보여주기 위한 역할이다.

 

모델이 처리한 데이터나 그 작업 결과를 가지고 사용자에게 출력할 화면을 만든다.
만든 화면은 웹 브라우저가 출력한다.

* View도 마찬가지로 다른 컴포넌트들에 대해 알지 못한다. 

 

Controller 

Model과 View 사이에 있는 컴포넌트이다. Model이 데이터를 어떻게 처리할지 알려주는 역할이고
클라이언트의 요청을 받으면 해당 요청에 대한 실제 업무를 수행하는 Model을 호출한다.
클라이언트가 보낸 데이터가 있다면, 모델을 호출할 때 전달하기 쉽게 적절히 가공한다.

 

Model이 업무 수행을 마치면, 그 결과를 가지고 화면을 생성하도록 View에 전달한다.
즉, 클라이언트의 요청에 대해 Model과 View를 결정하여 전달하는 중간 다리 역할을 한다.

 

데이터베이스 구현  ✔️

 

코드를 보고서는 데이터베이스에 대한 감이 오지 않아서 스키마로 우선 구현했다.

 

App.js를 보면 indexRouter로 간 다음

app.use('/', indexRouter);​

 

index.js에서 items.js와 users.js로 나뉘고

// TODO: Endpoint에 따라 적절한 Router로 연결해야 합니다.
router.use('/items', itemsRouter);
router.use('/users', usersRouter);​

 

users.js의 내용을 추가해준 다음

const router = require('express').Router();
const controller = require('./../controllers');

router.get('/:userId/orders', controller.orders.get);
router.post('/:userId/orders', controller.orders.post);​

 

controller폴더의 index.js파일을 작성한다. 
여기에서 각각 주어진 변수들을 잘 활용하는 것이 중요!

orders: {
    get: (req, res) => {
      const userId = req.params.userId;
      // TODO: 요청에 따른 적절한 응답을 돌려주는 컨트롤러를 작성하세요.
      if (!userId) return res.status(404).send('not id') 
      else {
        models.orders.get(Number(userId),(error, result) => {
          if (error) {
            res.status(404).send('FAIL GET');
          } else {
            res.status(200).json(result);
          }
        });
      }
      

    },
    post: (req, res) => {
      const userId = req.params.userId;
      const { orders, totalPrice } = req.body;
      // TODO: 요청에 따른 적절한 응답을 돌려주는 컨트롤러를 작성하세요.
      if (!userId || !orders || !totalPrice) return res.send(400).send('NOT')
      else {
        models.orders.post(userId, orders, totalPrice,(error, result) => {
          if (error) {
            res.status(400).send('FAIL POST');
          } else {
            res.status(201).json(result);
          }
        });
      }
    },​

 

그리고 model폴더의 index.js 파일에서 실제 로직을 구현했다.
SQL문을 막상 적용하려니 쉽지 않았고, 이것들로 db.query하는 과정에서 시간이 꽤 걸렸다...

orders: {
    get: (userId, callback) => {
      // TODO: 해당 유저가 작성한 모든 주문을 가져오는 함수를 작성하세요
      const queryString = `SELECT orders.id, name, image, price, total_price, order_quantity
      FROM orders
      LEFT JOIN users
      ON orders.user_id =users.id 
      LEFT JOIN order_items
      ON orders.id = order_items.order_id
      LEFT JOIN items
      ON items.id = order_items.item_id
      WHERE users.id = ?`
        const params = [userId]
        db.query(queryString, params, 
          (error, result) => {
          callback(error, result);
        });
    },
    post: (userId, orders, totalPrice, callback) => {
      // TODO: 해당 유저의 주문 요청을 데이터베이스에 생성하는 함수를 작성하세요
      const queryString = `
        INSERT INTO 
        orders (user_id, total_price)
        VALUES (?,?)
      `;
      const params = [userId, totalPrice]

      db.query(queryString, params, 
        (error, result) => {
          if (error) callback(error, null);
          else {
            const queryString2 = `
            INSERT INTO 
            order_items (order_id, item_id, order_quantity)
            VALUES ?
            `
            const params2 = orders.map((order) => {
              return [result.insertId, order.itemId, order.quantity]
            })
            return db.query(queryString2, [params2], (error, result) => {
              if (error) callback(error, null)
              else {
                callback(null, result)
              }
            })
          }
      });
    }​

 

실제로 진행하면서 느낀 점
: 직접 sql문을 적용하는 것은 다른 느낌이었고 폴더 하나 하나에 나누어 담아서 구현해놓은 다음 보기에는 매우 편하지만, 막상 만드는 입장에서는 조목조목 따져가며 만드는 부분들이 정교한 작업들이라 쉽지 않았다.

---