Node.js / Express에서 DB 연동하기

Framework/Express

Node.js / Express에서 DB 연동하기

서리★ 2024. 7. 28. 18:43

🚀 개발 환경

💾 Visual Studio Code

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

💾 MySQL Workbench

MySQL :: Download MySQL Workbench

Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Red Hat Enterprise Linux / Oracle Linux Fedora macOS Source Code Select OS Version: All Windows (x86, 64-bit) Recommended Download: Other Downloads: Windows (x86, 64-bit), M

dev.mysql.com

💾 Node.js

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

💾 Express.js

Express.js 설치 명령어
npm install express

💾 MySQL2

MySQL2 설치 명령어
npm install mysql2

💾 Nodemon

Nodemon 설치 명령어
npm install nodemon

💾 Nunjucks

Nunjucks 설치 명령어
npm install nunjucks

1. MySQL Database 설정

MySQL Workbench에서 데이터베이스와 테이블을 만든다.

예시로 'nodejs' 스키마에 member 테이블을 만들었다.

CREATE TABLE `nodejs`.`member` (
  `id` VARCHAR(50) NULL,
  `pw` VARCHAR(50) NULL,
  `nick` VARCHAR(50) NULL);

2. Express.js 기본 폴더 생성

해당 프로젝트 아래에 다음과 같은 폴더들을 생성한다.

📂 config : 설정에 관련된 정보들을 저장 (DB 연결 정보, API KEY 등)

📂 public : 정적인 파일들을 관리하는 공간 (CSS, JS, IMG, VIDEO 등)

📂 routes : 경로를 관리하는 공간

📂 views : 동적인 웹페이지를 관리하는 공간

3. Node.js / Exress.js와 MySQL DB 연동

아래 예시는 회원가입과 로그인을하는 과정이다.

1) app.js

📂 project > 📑 app.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const nunjucks = require("nunjucks");
const mainRouter = require("./routes/mainRouter");
const userRouter = require("./routes/userRouter");

app.use(bodyParser.urlencoded({ extended: true }));

app.set("view engine", "html");
nunjucks.configure("views", {
  express: app,
  watch: true,
});

app.use("/", mainRouter);
app.use("/user", userRouter);

app.listen(3000);

2) db.js

DB와 관련된 정보는 config 폴더 아래의 db.js에 작성한다.

📂 config > 📑 db.js

// mysql2 모듈 불러오기
const mysql = require("mysql2");

// DB 연결 정보
const conn = mysql.createConnection({
  host: "localhost",
  port: 3306,
  user: "root",
  password: "1234",
  database: "nodejs",
});

// 연결 시작
conn.connect();
console.log("DB 연결 성공!");

module.exports = conn;

3) html

📂 views > 📑 main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>회원관리 시스템</h1>
    <a href="join">회원가입</a>
    <a href="login">로그인</a>
  </body>
</html>

📂 views > 📑 join.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>회원가입 페이지</h1>
    <form action="http://localhost:3000/user/join" method="post">
      id : <input type="text" name="id" /> <br />
      pw : <input type="password" name="pw" /> <br />
      nick : <input type="text" name="nick" /> <br />
      <input type="submit" />
    </form>
  </body>
</html>

📂 views > 📑 login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>로그인 페이지</h1>
    <form action="http://localhost:3000/user/login" method="post">
      id : <input type="text" name="id" /> <br />
      pw : <input type="password" name="pw" /> <br />
      <input type="submit" />
    </form>
  </body>
</html>

4) router.js

📂 routes > 📑 mainRouter.js

const express = require("express");
const router = express.Router();

// 1. 메인
router.get("/", (req, res) => {
  res.render("main");
});

// 2. 회원가입
router.get("/join", (req, res) => {
  res.render("join");
});

// 3. 로그인
router.get("/login", (req, res) => {
  res.render("login");
});

module.exports = router;

📂 routes > 📑 userRouter.js

const express = require("express");
const router = express.Router();
const conn = require("../config/db");

// 1. 회원가입
router.post("/join", (req, res) => {
  let { id, pw, nick } = req.body;
  
  // DB와 연결해서 데이터 처리
  // 1) 처리할 sql문 작성
  // 2) 입력할 데이터가 있는 경우에 매개변수에 값을 넣어주기
  // 3) 데이터를 처리할 콜백함수 제작
  
  let sql = "insert into member values(?, ?, ?)";
  
  conn.query(sql, [id, pw, nick], (err, rows) => {
    console.log("회원가입 DB 결과 : ", rows);
    
    // 결과값이 있는 경우
    if (rows) {
      res.redirect("/");
    }
  });
});

// 2. 로그인
router.post("/login", (req, res) => {
  let { id, pw } = req.body;
  
  // DB와 연결해서 데이터 처리
  // 1) 처리할 sql문 작성
  // 2) 입력할 데이터가 있는 경우에 매개변수에 값을 넣어주기
  // 3) 데이터를 처리할 콜백함수 제작
  
  let sql = "select * from member where id = ? and pw = ?";
  conn.query(sql, [id, pw], (err, rows) => {
    console.log("로그인 DB 결과 : ", rows);
    
    // select문을 사용 시 주의점
    // 1) Data를 반환할 때 배열 형태로 제공
    // 2) 조회 결과가 없더라도 비어있는 배열을 반환한다.
    // 3) 조건을 비교할 때 배열의 길이를 가지고 확인한다.
    // rows > 0로 비교하면 안되는 이유 : 배열과 숫자를 비교하면 항상 false이다.
    
    if (rows.length > 0) {
      console.log("로그인 성공");
      res.redirect("/");
    } else {
      console.log("로그인 실패");
    }
  });
});

module.exports = router;

4. 요약 정리

Express.js 설치 -> Express 기본 폴더 생성 -> app.js 작성 -> db.js 작성 -> html 작성 -> router 작성

* 추가로 MySQL2을 설치하여 데이터베이스 연결, Nodemon을 설치하여 자동 서버 재시작 기능 구현, , Nunjucks를 설치하여 템플릿 엔진으로 동적 HTML 페이지 생성 등 다양한 라이브러리를 설치하여 프로젝트의 기능성을 확장하고 개발 편의성을 높일 수 있다.