[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 6주차 (1): MVC 패턴, MySQL 연결

MVC: Model View Controller

• 소프트웨어 설계와 관련된 디자인 패턴

💡MVC 흐름

💡Router와 MVC의 상호작용

 

💻 폴더구조

- controller : view와 model연결
  └ Cmain.js
 - model : 데이터 처리
  └ index.js
 - routes : 경로 설정
  └ index.js
 - views : UI관련 처리
  └ 404.ejs
  └ index.ejs
 - app.js
 - .gitignore
 - package.json

---

MySQL과 연결

// model/User.js

const mysql = require('mysql');
const conn = mysql.createConnection({
  host: 'localhost',
  user: 'sesac', 
  password: '4321',
  database: 'sesac',
});

// model/User.js

// 1. 특정 회원정보 등록
// POST /user/signup
exports.post_signup = (data, cb) => {
  const sql = `INSERT INTO user (userid, name, pw) 
  VALUES ('${data.userid}','${data.name}','${data.pw}')`;
  conn.query(sql, (err, rows) => {
    if (err) {
      throw err;
    }

    console.log('post_singup', rows);
    // OkPacket {
    //     fieldCount: 0,
    //     affectedRows: 1,
    //     insertId: 0,
    //     serverStatus: 2,
    //     warningCount: 0,
    //     message: '',
    //     protocol41: true,
    //     changedRows: 0
    //   }

    // View & Controller에서 회원정보 사용하지 않기 때문에
    // 데이터 보내주지 않고 응답 종료
    cb();
  });
};

// 2-1. 특정 회원정보 조회
//  userid와 password 기준으로 조회
// POST /user/signin
exports.post_signin = (data, cb) => {
  const sql = `
  SELECT * FROM user 
  WHERE userid='${data.userid}' AND pw='${data.pw}' 
  LIMIT 1`;
  // LIMIT1을 걸어주는 이유
  // 회원가입시 중복 id 검사하지 않아서 겹치는 id 생길 수 있음
  conn.query(sql, (err, rows) => {
    if (err) {
      throw err;
    }

    console.log(rows); // [ {회원 데이터} ]
    cb(rows);
  });
};

// 2-2. 특정 회원정보 조회
// userid 기준으로 조회
// 로그인한 유저 한 명을 가져옴!
// POST /user/profile
exports.post_profile = (userid, cb) => {
  const sql = `
  SELECT * FROM user
  WHERE userid='${userid}'
  LIMIT 1`;
  conn.query(sql, (err, rows) => {
    if (err) {
      throw err;
    }

    console.log('Model User: ', rows); // [ {회원데이터} ]
    cb(rows);
  });
};

// 3. 특정 회원정보 수정
// POST /user/profile/edit
exports.edit_profile = (data, cb) => {
  console.log(data);
  // const sql = `UPDATE user SET userid='${data.userid}', name='${data.name}', pw='${data.pw}' WHERE id='${data.id}'`;
  const sql = `UPDATE user SET name='${data.name}', pw='${data.pw}' WHERE id='${data.id}'`;
  conn.query(sql, (err, rows) => {
    if (err) {
      throw err;
    }

    console.log('Model edit profile', rows);
    // OkPacket {
    //   fieldCount: 0,
    //   affectedRows: 1,
    //   insertId: 0,
    //   serverStatus: 2,
    //   warningCount: 0,
    //   message: '(Rows matched: 1  Changed: 1  Warnings: 0',
    //   protocol41: true,
    //   changedRows: 1
    // }

    cb(); // 암것도 안보내줘도 ok
  });
};

// 4. 특정 회원정보 삭제
// POST /user/profile/delete
exports.delete_profile = (id, cb) => {
  const sql = `DELETE FROM user WHERE id='${id}'`;
  conn.query(sql, (err, rows) => {
    if (err) {
      throw err;
    }

    cb();
  });
};

-- 데이터베이스 목록 확인
SHOW databases;

-- sesac 데이터베이스 선택
USE sesac;

-- sesac 데이터베이스의 테이블 목록 확인
SHOW tables;

-- 이미 user 테이블이 있다면 기존 테이블 지움
DROP TABLE IF EXISTS user;

-- TODO: user 데이터베이스 생성
CREATE TABLE user (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    userid VARCHAR(20) NOT NULL,
    name VARCHAR(20) NOT NULL,
    pw VARCHAR(20) NOT NULL
);

-- user 테이블 구조 보기
DESC user; 

-- user 데이블 데이터 추가
INSERT INTO user (userid, name, pw) VALUES ('allie', 'allie', '1234');
INSERT INTO user (userid, name, pw) VALUES ('test', 'test', '1234');
INSERT INTO user (userid, name, pw) VALUES ('apple', 'apple', '1234');
INSERT INTO user (userid, name, pw) VALUES ('hello', 'hello', '1234');

 

분명 MVC도 잘 이해했고 SQL도 수월하게 따라 갔었는데 그 둘을 합치니 따라가는게 쉽지 않았다..! 그래도 이렇게 정리하면서 보니 좀 낫다🥲