node.js와 mysql 연동하기

1. mysql 설치

는 여기가 설명이 잘 되어이따.

https://velog.io/@joajoa/MySQL-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%8F-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95

MySQL 다운로드 및 설치 방법

 

 

2. MySQL 8.0 Command Line Client 열기

mysql 전용 cmd같은건데 열고 비밀번호 치고 들어가서 대충 데이터 넣어줌

// box라는 db를 만듬
create database box;

// 지금부터 box db를 쓸꺼임
use box;

// box db안에 user라는 테이블을 하나 만들꺼임
create table user(ID int primary key, NAME varchar(20), AGE int)

// 만들어진 테이블 한번 보자
show tables;

box 안에 있는 user 테이블

// 데이터 한줄 넣어봄
insert into user(ID, NAME, AGE) values(1, '아이언맨', 40)

// 데이터 보여줘
select * from user;

잘 들어감

 

자세한 쿼리문은 아래 있음 예전에 정리해두길 잘했

https://peamexx.tistory.com/46?category=732255 

SQL 기본 문법

 

 

3. node.js 설정

npm init
npm i express
npm i --save-dev dotenv nodemon
npm i mysql

뭐 이런거 해서 하나씩 설치하라는 의미

 

자세한 설명은 여기서 5번까지만 하면 됨

https://peamexx.tistory.com/92?category=930021 

👾한번 해봄 시리즈👾 REST API 혹은 mongoDB 활용전 기본과정

※ 중간에 nodemon설정할 때 package.json에서

"scripts": {
    "start": "nodemon server.js"
  },

devStart말고 그냥 start라고 해주셈.. 맨날 npm devStart이렇게 시작하기 귀찮응께...

 

 

4. db.js에 설정 써주기

config라는 폴더 만들고 안에 db.js 만들어서 아래와 같이 써줌

const mysql = require('mysql');
const dbInfo = {
    host: 'localhost',
    port: '3306',
    user: 'root',
    password: 'mysql 비밀번호를 쓰시오',
    database: 'box'
};

module.exports = {
    init: function () {
        return mysql.createConnection(dbInfo);
    },
    connect: function(conn) {
        conn.connect(function(err) {
            if(err) console.error('mysql 연결 에러 : ' + err);
            else console.log('mysql 연결 성공');
        });
    }
};

 

 

5. server.js에 아래와같이 써주기

server.js는 제일 바깥에 새로 파일 생성해줌

var express = require('express');
var app = express();
var dbConfig = require(__dirname + '/config/db.js');
var conn = dbConfig.init();

dbConfig.connect(conn);

app.listen(3000, () => console.log('포트 3000번에서 시작'));

그리고 터미널에 npm start치면 정상적으로 db까지 연결된다.

 

※ 만약 Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client 에러가 뜬다면

MySQL 8.0 Command Line Client 열어서 비번치고 아래와같이 써주고 다시 하면 된다.

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'mysql비밀번호'

 

 

6. ejs 설치

이제 연결은 했으니 화면에 한번 뿌려봐야함😎

 

여기 가서 2번까지만 하면 된다

https://peamexx.tistory.com/99

mongoDB의 데이터를 index.html에 불러오기

 

 

7. server.js에 이 부분 추가

var express = require('express');
var app = express();
var dbConfig = require(__dirname + '/config/db.js');
var conn = dbConfig.init();

dbConfig.connect(conn);

// 추가 (이건 그냥 별거 아님)
app.get('/', function (req, res) {
    res.send('메인');
});

// 추가 (이게 핵심)
app.get('/list', function (req, res) {
    var sql = 'SELECT * FROM user';
    conn.query(sql, function (err, rows, fields) {
        if(err) console.log('query is not excuted. select fail...\n' + err);
        else res.render('index.ejs', {list : rows});
    });
});

app.listen(3000, () => console.log('포트 3000번에서 시작'));

저 핵심이라는 부분 코드의 이미는

/list에 들어가면

user 테이블에서 데이터를 가져와서

index.ejs에 list라는 변수에 담긴 데이터를 뿌려줄 것 이라는 의미임.

 

참고

https://gongbu-ing.tistory.com/32

Node.js | Node.js - MySQL : 연동하기

 

 

8. index.ejs에 간단하게 입력

<h1>테스트</h1>
    <table>
      <% for(i = 0; i < list.length; i++) { %>
      <tr>
        <td><%=i+1 %></td>
        <td><%=list[i].NAME %></td>
        <td><%=list[i].AGE %></td>
      </tr>
      <% } %>
    </table>

ejs에 기본 html태그를 써주고 그 안에 데이터가 나올 부분을 문법으로 써줌.

 

서버 실행 후 /list에 가면 이렇게 나옴!!

 

 

9. index.ejs에 아래 추가

<form action="/write" method="POST">
    id: <input type="text" name="id">
    name: <input type="text" name="name">
    age: <input type="text" name="age">
    <button type="submit">보내기</button>
</form>

이번에는 데이터를 직접 db에 넣어보자

포인트는

form에 action, method 쓰고,

input류에는 name값을 넣어주는거,

button에는 type 넣어주는거임.

 

 

10. server.js에 추가

var bodyParser = require('body-parser');

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

app.post('/write', function (req, res) {
    var body = req.body;
    var sql = 'INSERT INTO user VALUES(?, ?, ?)';
    var params = [body.id, body.name, body.age];
    
    conn.query(sql, params, function(err) {
        if(err) console.log('query is not excuted. insert fail...\n' + err);
        else res.redirect('/list');
    });
});

위에 부분들을 추가한다.

 

body-parser는 form태그 안에 있는 데이터를 받아와주는 역할을 하는 express 내장 기능임.

 

button을 눌러 /write에 접속하면,

body-parser를 통해(req.body) form태그 안에 있던 데이터를 가져오게 됨.

그리고 쿼리문(sql)과 함께 데이터(params)를 db로 보냄.

 

그럼 이러케 잘 들어간다