sprint - Cmarket Database

https://www.npmjs.com/package/mysql#establishing-connections --- mysql 공식 문서

초기 세팅 순서 ---

DB 생성 >> schema ( 테이블 ) 복사 >> 테이블에 데이터 저장 >> .env 파일 생성

1. mysql 접속 후 cmarket DB 생성 ---

mysql> CREATE DATABASE cmarket;

2. mysql CLI 종료 후 cmarket server 레포로 이동 후 CLI 접속


3. JS 파일에 미리 구축해놓은 Cmarket 스키마 ( 테이블 구조 ) 를 기반으로 MySQL의 cmarket DB에 연동 ---

mysql -u root -p < server/schema.sql -Dcmarket;


4. 만들어진 테이블에 값 (데이터) 입력 ---

mysql -u root -p < server/seed.sql -Dcmarket;

이제 클라이언트단과 서버단의 상호작용 시퀀스를 대략적으로 알아보면

1. 고객이 주문내역 페이지에 접속하면 다음 구문이 실행된다
   
   

client/pages/Orderlist 의 useEffect(() => {
    dispatch(
      fetchData(`http://localhost:4000/users/${userId}/orders`, setOrders)
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); 
  
  // 포트번호가 4000인 서버단의 users 컴포넌트로 setOrder 데이터를 전송한다 

2. Server/app.js에서 아래의 코드를 통해 routes로 분기 된다
   
   

const indexRouter = require('./routes');
app.use('/', indexRouter);

3. Server/routers/index.js로 도착하면 여기서 요청받은 주소에 따라 분기가 일어난다
   
   

router.use('/items', itemsRouter);
router.use('/users', usersRouter);

4. users.js에서는 요청이 들어오면 controller 컴포넌트에서 get요청이냐 post 요청이냐 구분해서 다른 응답을 돌려준다
   
   

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

볼 수 있듯 app.js에서 차근차근 올라가면 된다.

app.js --- routes --- controller --- models --- db

routes 컴포를 먼저 완성 시킨 후 models부터 거슬러 올라가는 방식으로 진행하면 이해가 빠르다.

server/routes/index.js

const express = require('express');
const router = express.Router();
const itemsRouter = require('./items');
const usersRouter = require('./users');

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

module.exports = router;

server/routes/items.js

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

// GET /items Router와 Controller를 연결합니다.
router.get('/', controller.items.get);

module.exports = router;

server/routes/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);

module.exports = router;

server/controllers/index.js

https://www.w3schools.com/nodejs/nodejs_mysql_insert.asp

다중 Insert 를 위해서는 물음표 1개만 사용한다. 자세한건 위의 링크 참고

result.insertId ---- 상위 구문에서 Id를 내려받기 위한 변수. 자세한건 위의 w3school 링크 참고

const models = require('../models');

module.exports = {
  items: {
    get: (req, res) => {
      models.items.get((error, result) => {
        if (error) {
          res.status(500).send('Internal Server Error');
        } else {
          res.status(200).json(result);
        }
      });
    },
  },
  orders: {
    get: (req, res) => {
      const userId = req.params.userId;
      // TODO: 요청에 따른 적절한 응답을 돌려주는 컨트롤러를 작성하세요.
      
      if (!userId) { //사용자가 잘못된 요청을 보냈을 경우
        return res.status(400).send("Error 400"); //return을 통해서 400에러를 보내주고 함수를 종료시켜야 한다.
      }
      models.orders.get(userId, (error, result) => { // Model과 Controller가 대화하는 부분
        if (error) {
          res.status(500).send("Internal Server Error");
        } else {
          res.status(200).json(result); //Model과 대화를 통해 얻어낸 결과를 클라이언트의 요청에 대한 응답을 보내준다.
        }
      });
    },
    post: (req, res) => {
      const userId = req.params.userId;
      const { orders, totalPrice } = req.body;

      if (!orders || !totalPrice) { //사용자가 잘못된 요청을 보냈을 경우
        return res.status(400).send("Error 400");
      }
      models.orders.post(userId, orders, totalPrice, (error, result) => {
        if (error) {
          res.status(500).send("Internal Server Error");
        } else {
          res.status(201).json("success post!");
        }
      });
    },
  },
};

server/models/index.js

const db = require('../db');

module.exports = {
  items: {
    get: (callback) => {
      // TODO: Cmarket의 모든 상품을 가져오는 함수를 작성하세요
      const queryString = `SELECT * FROM items`;

      db.query(queryString, (error, result) => {
        callback(error, result);
      });
    },
  },
  orders: {
    get: (userId, callback) => {
      // TODO: 해당 유저가 작성한 모든 주문을 가져오는 함수를 작성하세요

      const queryString = `
SELECT orders.id, orders.created_at, orders.total_price, items.name, items.price, items.image, order_items.order_quantity
FROM orders
JOIN order_items ON orders.id = order_items.order_id
JOIN items ON order_items.item_id = items.id
WHERE user_id=${userId}`; 

      const params = [userId];
      db.query(queryString, params, (err, result) => {
        callback(err, 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, (err, result) => {
        if (result) {
          const queryString2 = `INSERT INTO order_items (item_id, order_quantity, order_id) VALUES ?;`; // // 다중 주문 접수를 위할 땐 물음표 1개
          const values = orders.map((order) => [
            order.itemId,
            order.quantity,
            result.insertId, // orders의 id키 내려받기
          ]);
          return db.query(queryString2, [values], (err, result) => {
            callback(err, result);
          });
        }
        callback(err, result);
      });
    },
  },
};