DB테이블

사용자가 회원가입을 할 때 데이터를 저장할 테이블을 만들었다.

member 테이블

CREATE TABLE member (
member_number INT PRIMARY KEY NOT NULL AUTO_INCREMENT,
userid VARCHAR(30) UNIQUE KEY NOT NULL,
userpassword VARCHAR(100) NOT NULL,
username VARCHAR(100) NOT NULL,
phone VARCHAR(11) NOT NULL,
email VARCHAR(100) NOT NULL,
admin_check CHAR(1) DEFAULT 0,
created_at TIMESTAMP NOT NULL DEFAULT NOW()
);

member_number를 기본키로 userid를 유니크키로 생성했다. admin_check부분은 관리자 설정하는 컬럼이다. 0일 경우는 기본회원이고 1일 경우에는 관리자로 인식할 예정이다.

View 설정

View폴더에 member폴더를 만들어줬다. 그리고 그곳에 join.ejs 파일을 만들어 회원가입 페이지를 설정했다.

join.ejs

<%- include('../includes/head-nav.ejs')%>
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 align-items-center my-5 ">
            <form action="/joinAction" method="POST">
                <label for="username"> 이름 </label>
                <input type="text" name="username" id="username">
                <label for="userid"> 아이디 </label>
                <input type="text" name="userid" id="userid">
                <label for="userpassword"> 비밀번호 </label>
                <input type="password" name="userpassword" id="userpassword">
                <label for="phone"> 전화번호 </label>
                <input type="text" name="phone" id="phone" placeholder="숫자만 입력해주세요">
                <label for="email"> 이메일 </label>
                <input type="email" name="email" id="email">
                <button type="submit" class="btn btn-primary"> 회원가입 </button>
            </form>
        </div>
    </div>
<%- include('../includes/footer.ejs')%>        

앞 뒤로 레이아웃을 설정하고 딱 회원가입 폼만 설정했다. css는 기능이 다 끝날 때 수정할 예정이다.

Routes 설정

member만 따로 다룰 memberRoutes 파일을 routes폴더에 새롭게 설정해주었다.

memberRoutes.js

const express = require('express');

const memberConroller = require('../controllers/member/join');

const routes = express.Router();

routes.get('/join', memberConroller.getJoin);

routes.post('/joinAction', memberConroller.AddJoinAction);

module.exports = routes;

이 파일에서 회원가입 페이지를 들어가는 경로를 get으로 설정했다. 그리고 사용자가 회원가입을 할 때 이루어지는 동작을 연결하는 것도 post로 동작하게 했다.

Controller 설정

Controller로 View와 마찬가지로 member 폴더를 따로 만들어서 join파일을 만들어주었다.

controllers/member/join.js

const Member = require('../../models/member/join');

exports.getJoin = (req, res, next) => {
  res.render("member/join", { pageTitle: "E-Book Join" });
};

exports.addJoinAction = (req, res, next) => {
  let username = req.body.username;
  let userid = req.body.userid;
  let userpassword = req.body.userpassword;
  let phone = req.body.phone;
  let email = req.body.email;

  console.log(username);

  let member = new Member(username, userid, userpassword, phone, email);
  member.addJoinMember();
  
  res.redirect("/");
};

join 컨트롤러에서 join과 관련한 것들을 다룬다. getJoin은 회원가입 페이지를 연결하고, addJoinAction은 회원가입을 진행하는 코드를 Model에서 가져온다.

Model 설정

지난번에는 다루지 못했지만, 이번에 회원가입 설정을 통해 데이터를 다루게 되어 Model을 설정했다.

models/member/join.js

const mysql = require('mysql');

const conn = {
  host: "127.0.0.1",
  port: "3306",
  user: "root",
  password: "password",
  database: "ebook"
};

let connection = mysql.createConnection(conn);
connection.connect();

class Member {
  constructor(username, userid, userpassword, phone, email) {
    this.username = username;
    this.userid = userid;
    this.userpassword = userpassword;
    this.phone = phone;
    this.email = email;
  }

  addJoinMember() {
    var sql =
      "INSERT INTO member (username, userid, userpassword, phone, email) VALUES (?, ?, ?, ?, ?)";
    var param = [this.username, this.userid, this.userpassword, this.phone, this.email];

    connection.query(sql, param, (err, row, fields) => {
      if (err) {
        console.log(err);
      } else{
        console.log('Success Join!!');
      }
    });

    connection.end();
  }
}

module.exports = Member;

이번에는 다룰 내용이 조금 있다.

1. MySQL 연결

npm install mysql

통해 우선 package.json에 mysql을 설정해준다. 그리고 시작하는 세 문단으로 mysql을 연결시켜준다.

2. class Member

그리고 class Member로 사용자를 객체화 시켜준다. 객체화 시켜주는 이유는 코드를 그룹화하여 재사용에 용이하게 해주기 때문이다. class 속에 constructor 메서드는 인스턴스 객체를 생성하고 초기화 해주는 역할을 한다.(인스턴스, 클래스로부터 만들어진 객체)

3. addJoinMember

addJoinMember함수가 이번 글에 핵심이다. 사용자가 보낸 정보를 MySQL과 연결하여 DB에 저장할 수 있다. 저장하는 방법으로 connection.query에 설정한 변수 sql과 그 값인 param 배열을 넣어주면 query함수가 sql을 작성해준다.

결과

회원가입 페이지에서 데이터를 입력하면 DB에 값이 잘 저장된다.

app.js

마지막으로 app.js는 간단하게 memberRoutes를 연결만 해주면 된다.

app.js

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

정리하기

배운 내용을 적절히 활용하고 모르는 부분을 찾아서 본격적으로 시작했다. 준비를 하면서 얼마 걸리지 않을 거라 생각했는데, 역시 에러가 나올 때마다 처리하는 것이 쉽지 않다. SQL도 연결하고 처음으로 DB를 사용했으니 그랬으리라 생각한다. 내일은 오늘보다 좀 더 성장했기를 바란다.