[๋ฐ๋ธŒ์ฝ”์Šค] ๐ŸŽพํ…Œ๋‹ˆ์Šค ๋งˆ์ผ“ ๋ฐฑ์—”๋“œ ์—ฐ๊ฒฐํ•˜๊ธฐ(node.js, mariaDB)

2025. 4. 4. 22:15ยท๐Ÿ•Š๏ธํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค/ํ”„๋กœ์ ํŠธ

์–ด์ œ ํผ๋ธ”๋ฆฌ์‹ฑํ•œ ํ…Œ๋‹ˆ์Šค ๋งˆ์ผ“ ํŽ˜์ด์ง€์— ๋ฐฑ์—”๋“œ๋ฅผ ์—ฐ๊ฒฐํ•ด์ฃผ์—ˆ๋‹ค.


๐ŸŽซ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์— ์žˆ๋Š” ๊ฐ’๋“ค์„ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€, ํ™”๋ฉด์— ํ…Œ์ด๋ธ”๋กœ ์ถœ๋ ฅํ•œ๋‹ค.

 

'๐Ÿ•Š๏ธํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค > ํ”„๋กœ์ ํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[๋ฐ๋ธŒ์ฝ”์Šค] BOOK STORE ํ”„๋กœ์ ํŠธ API ์„ค๊ณ„(2)  (0) 2025.05.09
[๋ฐ๋ธŒ์ฝ”์Šค] BOOK STORE ํ”„๋กœ์ ํŠธ API ์„ค๊ณ„(1)  (2) 2025.05.08
[๋ฐ๋ธŒ์ฝ”์Šค] ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ชจ๋ธ๋ง ํ”„๋กœ์ ํŠธ(ERD, DDL)  (0) 2025.04.09
[๋ฐ๋ธŒ์ฝ”์Šค]๐ŸŽพํ…Œ๋‹ˆ์Šค ๋งˆ์ผ“ ๋งŒ๋“ค๊ณ  ๋ฐฐํฌํ•˜๊ธฐ(HTML,CSS,Netlify)  (0) 2025.04.03
'๐Ÿ•Š๏ธํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค/ํ”„๋กœ์ ํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [๋ฐ๋ธŒ์ฝ”์Šค] BOOK STORE ํ”„๋กœ์ ํŠธ API ์„ค๊ณ„(2)
  • [๋ฐ๋ธŒ์ฝ”์Šค] BOOK STORE ํ”„๋กœ์ ํŠธ API ์„ค๊ณ„(1)
  • [๋ฐ๋ธŒ์ฝ”์Šค] ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋ชจ๋ธ๋ง ํ”„๋กœ์ ํŠธ(ERD, DDL)
  • [๋ฐ๋ธŒ์ฝ”์Šค]๐ŸŽพํ…Œ๋‹ˆ์Šค ๋งˆ์ผ“ ๋งŒ๋“ค๊ณ  ๋ฐฐํฌํ•˜๊ธฐ(HTML,CSS,Netlify)
ํ‚ํ‚์ž‰
ํ‚ํ‚์ž‰
๋ฟŒ๋ก ํŠธ ๊ฐœ๋ฐœ์ž(์ง€๋ง์ƒ)์˜ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž ๋„์ „๊ธฐ
  • ํ‚ํ‚์ž‰
    monicx.dev
    ํ‚ํ‚์ž‰
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (73) N
      • ๐Ÿ–ฅ๏ธdevelop (11)
        • Github (2)
        • Frontend (4)
        • Backend (5)
        • Mobile (0)
        • CS (0)
        • Three.js (0)
        • Docker (0)
      • ๐Ÿ“•review (15)
        • ์ฑ… (10)
        • ํ–‰์‚ฌ (0)
        • ํšŒ๊ณ  (2)
      • โญproject (5)
        • petiary (2)
        • ๆšŽ่ฉ  (0)
        • ์ธํ„ด (2)
      • ๐Ÿ˜ถ‍๐ŸŒซ๏ธalgorithm (0)
      • ๐Ÿ’กtips (1)
      • ๐Ÿ˜Ždaily (10)
      • ๐Ÿ•น๏ธgame (0)
      • ๐Ÿ•Š๏ธํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค (31) N
        • TIL (22)
        • ํ”„๋กœ์ ํŠธ (5) N
        • ํšŒ๊ณ  (4)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
  • ๋งํฌ

    • ๋ฒจ๋กœ๊ทธ
  • ์ธ๊ธฐ ๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
ํ‚ํ‚์ž‰
[๋ฐ๋ธŒ์ฝ”์Šค] ๐ŸŽพํ…Œ๋‹ˆ์Šค ๋งˆ์ผ“ ๋ฐฑ์—”๋“œ ์—ฐ๊ฒฐํ•˜๊ธฐ(node.js, mariaDB)
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”