[데브코스] 🎾테니스 마켓 백엔드 연결하기(node.js, mariaDB)

어제 퍼블리싱한 테니스 마켓 페이지에 백엔드를 연결해주었다.

---

🎫DB

데이터베이스 생성

먼저 상품 정보를 저장할 테이블 product를 만들어주었다.

CREATE TABLE product(
    -> id INT,
    -> name VARCHAR(30),
    -> description VARCHAR(100),
    -> price INT)

\

Node.js에서 MariaDB 연결하기

Node.js에서 MariaDB를 연결하기 위해선 mysql 모듈을 설치해주어야 한다.(MariaDB 모체가 MySQL)

npm install mysql --save

 

다음으로, 데이터베이스 연결 파일을 생성해준다. database/connect/mariadb.js 파일을 만들어, 데이터베이스 연결 정보를 설정했다.

const mariadb = require("mysql"); //모듈 임포트

const conn = mariadb.createConnection({
  host: "localhost",
  port: 3306,
  user: "",
  password: "",
  database: "Tennis",
});

module.exports = conn;

• mysql 모듈 임포트
• 데이터베이스 연결 정보 생성
• 연결 객체 내보내기

서버 구조는 다음과 같이 설계했다.

 

index.js

let router = require("./router");
let server = require("./server");
let requestHandler = require("./requestHandler");

const mariadb = require("./database/connect/mariadb");
mariadb.connect(); //연결

server.start(router.route, requestHandler.handle);

• 서버의 진입점으로, 필요한 모듈들을 불러오고 데이터베이스 연결을 시작한 후, 서버를 실행한다.

requestHandler.js

const mariadb = require("./database/connect/mariadb");

function main(response) {
  console.log("main");

  mariadb.query("SELECT * FROM product", function (err, rows) {
    console.log(rows);
  });

  response.writeHead(200, { "Content-Type": "text/html; charset=UTF-8" });
  response.write("황다경");
  response.end();
}

let handle = {}; //key:value
handle["/"] = main;
handle["/login"] = login;

exports.handle = handle;

• 메인 페이지에 접속하면 main 함수가 호출된다.
• 데이터베이스에서 정보를 조회하여 결과를 콘솔에 출력한다.

콘솔에서 DB의 데이터를 출력하는 것을 확인할 수 있다.

 

---

🎾테니스 마켓에 백엔드 연결하기

우선 테니스 마켓을 위한 새로운 데이터베이스 테이블 생성했다.

CREATE TABLE orderlist(
    -> product_id INT,
    -> order_date VARCHAR(100) );

 

 

HTML 페이지 띄우기

require('fs')로 html 파일을 가져온다.

 

requestHandler.js

const fs = require("fs"); //html 파일을 가져옴
const main_view = fs.readFileSync("./index.html", "utf-8");
...
response.write(main_view);

 

HTML은 보이지만 이미지와 스타일이 적용되지 않았다. 콘솔에서 확인해보면, CSS와 이미지가 경로값으로 넘어오고 있다.

 

이렇게 main.css와 이미지가 경로값으로 넘어오고 있다.

 

왜 CSS와 이미지가 자동으로 적용되지 않을까?

브라우저는 <link> 나 <img> 경로로 정적 파일 요청을 보내지만, 서버는 직접 경로 지정된 요청만 처리하기 때문에, 정적 파일 요청에 응답할 수 있는 핸들러가 필요하다. 

⭐ handle 객체에 직접 지정된 경로만 응답할 수 있기 때문에, 이미지나 CSS는 별도의 handle 객체추가가 필요!

 

해결

function blueRacket(response) {
  fs.readFile("./assets/blue.png", function (err, data) {
    response.writeHead(200, { "Content-Type": "image/png; charset=UTF-8" });
    response.write(data);
    response.end();
  });
}

function yellowRacket(response) {
  fs.readFile("./assets/yellow.png", function (err, data) {
    response.writeHead(200, { "Content-Type": "image/png; charset=UTF-8" });
    response.write(data);
    response.end();
  });
}

function blackRacket(response) {
  fs.readFile("./assets/black.png", function (err, data) {
    response.writeHead(200, { "Content-Type": "image/png; charset=UTF-8" });
    response.write(data);
    response.end();
  });
}

function handleCSS(response) {
  fs.readFile("./main.css", function (err, data) {
    response.writeHead(200, { "Content-Type": "text/css; charset=UTF-8" });
    response.write(data);
    response.end();
  });
}

let handle = {}; //key:value
handle["/"] = main;

handle["/assets/blue.png"] = blueRacket;
handle["/assets/yellow.png"] = yellowRacket;
handle["/assets/black.png"] = blackRacket;
handle["/main.css"] = handleCSS;

이제 잘 적용됨!

 

 

주문 기능 구현

 

index.html

 <input class="card_button" type="button" value="order" onClick="location.href='/order?productId=1'">

 

server.js, router.js에 productId 파라미터 추가한다.

 

requestHandler.js

function order(response, productId) {
  response.writeHead(200, { "Content-Type": "text/html; charset=UTF-8" });

  mariadb.query(
    "INSERT INTO orderlist VALUES (" +
      productId +
      ", '" +
      new Date().toLocaleDateString() +
      "');",
    function (err, rows) {
      console.log(rows);
    }
  );

  response.write("");
  response.end();
}

...

handle["/order"] = order;

 

테니스 마켓 페이지에서 order 버튼 클릭 시, 데이터베이스에 데이터가 삽입된 것을 확인할 수 있다.

 

주문 내역 출력: HTML + 동적 데이터

우선 orderlist.html 을 받아와 브라우저에 표시하도록 orderlist_view 생성한다. orderlist 함수를 만들고, orderlsit_view를 받아온다.

 

orderlist 함수 내에서 데이터베이스에서 데이터를 받아와, 테이블로 뿌리는 코드를 만들어줘야 한다.

  mariadb.query("SELECT * FROM orderlist", function (err, rows) {
    response.write(orderlist_view);

    rows.forEach((element) => {
      response.write(
        "<tr>" +
          "<td>" +
          element.product_id +
          "</td>" +
          "<td>" +
          element.order_date +
          "</td>" +
          "</tr>"
      );
    });

    response.write("</table>");

 

기존의 orderlist.html 테이블에도 약간의 수정을 해주어야 한다.

  <table>
        <th>Product</th>
        <th>Order Date</th>

 

테이블을 구성하는 요소는 orderlsit 함수에서 rows에 있는 값들을 데이터를 받아와, 화면에 테이블로 출력한다.