[React] express에서 query문을 사용하여 DB(mysql)에 데이터 저장하기 1

이전 글에서는 React로 만들 웹에서 express서버로 데이터를 주고 받는 방법을 알아보았다.

이번 글은 React에서 express로 보낸 데이터를 query문을 사용하여 DB에 저장하는 방법에 대하여 알아보자!!

 

이번 글까지 따라 오게 된다면 간단한 회원가입과 로그인을 만들 수 있게 됩니다.

 

1. 준비

• mysql
• React에서 express로 데이터를 주고 받는 방법

React에서 express로 데이터를 주고 반는 방법에 대해서 알고 있다는 전제로 진행됩니다.

mysql이 설치되어 있어야 진행할 수 있어요!!!!

 

2. database만들기 및 express에 연결하기

 

 1) 새로운 데이터베이스 만들기

mysql> create database hello;

데이터베이스를 만듭니다. 저는 hello라는 이름으로 데이터 베이스를 만들었습니다.

mysql> use hello

위의 명령어로 hello 데이터 베이스로 접속하여 줍니다.

2) 새로운 테이블 만들기

  저는 new_table이랑 이름의 테이블에 'user_key'를 PRIMARY KEY로 만들었고 'user_id' 컬럼을 하나 만들었습니다. 

CREATE TABLE new_table (  `user_key` INT NOT NULL AUTO_INCREMENT,  `user_id` VARCHAR(45) NULL,  PRIMARY KEY (`user_key`));

 

3) express에 mysql 연결하기

 먼저 mysql 모듈을 설치하여 줍니다.

npm install mysql

그 후 server.js에 아래와 같이 코드를 추가해줍니다.

이전글의 코드에 mysql 연동 부분을 추가하였습니다.

server.js

const express = require("express");
const app = express();
const port = 3001; // <- 3000에서 다른 숫자로 변경
const cors = require("cors");
const bodyParser = require("body-parser");
const mysql = require("mysql"); // << 새로 추가된 부분

var connection = mysql.createConnection({
  /// 새로 추가된 부분
  host: "localhost",
  user: "root", // mysql에 아이디를 넣는다.
  password: "root", // mysql의 비밀번호를 넣는다.
  database: "hello", //위에서 만든 데이터베이스의 이름을 넣는다.
});

connection.connect();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.use(bodyParser.json());

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.post("/text", (req, res) => {
  const user_id = req.body.inText;
  console.log(user_id);
  //////query문 추가할 곳/////
  
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

  위에 주석에 달린 내용을 확인하여 본인설정에 맞게 맞춰주세요

const user_id 변수에 웹에서 보낸 데이터를 저장하고 DB에 넣을 예정입니다.

 

 4) React 코드 작성

 웹에서 보여주는 부분은 이전 글의 코드를 조금 수정하였습니다.

 자세한 내용은 이전글을 참조하여 주시면 감사하겠습니다.

import React from "react";

export default class Example3 extends React.Component {
  state = {
    text: "",
  };

  handlChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  onclick = () => {
    const textbox = {
      inText: this.state.text,
    };
    fetch("http://localhost:3001/text", {
      method: "post", //통신방법
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(textbox),
    })
      .then((res) => res.json())
      .then((json) => {
        console.log(json);
        this.setState({
          text: json.text,
        });
      });
  };

  render() {
    return (
      <div>
        <h3>아이디 입력</h3>
        <input name="text" onChange={this.handlChange}></input>
        <button onClick={this.onclick}>전송</button>
      </div>
    );
  }
}

 이 코드를 실행시키면 아래와 같은 화면이 나옵니다.

실행 화면

아이디를 만든다고 생각하고 만들었습니다. ㅎㅎ

여기까지 작성하였다면 express와 mysql이 연결 되었습니다.

이제 query문을 작성하여 보겠습니다.

 

4. server.js에 query문 작성하기

const express = require("express");
const app = express();
const port = 3001; // <- 3000에서 다른 숫자로 변경
const cors = require("cors");
const bodyParser = require("body-parser");
const mysql = require("mysql"); // << 새로 추가된 부분

var connection = mysql.createConnection({
  /// 새로 추가된 부분
  host: "localhost",
  user: "root", // mysql에 아이디를 넣는다.
  password: "root", // mysql의 비밀번호를 넣는다.
  database: "hello", //위에서 만든 데이터베이스의 이름을 넣는다.
});

connection.connect();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.use(bodyParser.json());

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.post("/text", (req, res) => {
  const user_id = req.body.inText;
  console.log(user_id);
  //////추가 내용/////
  connection.query("INSERT INTO new_table (user_id) values(?)", [user_id]),
    function (err, rows, fields) {
      if (err) {
        console.log("DB저장 실패");
      }else{
	console.log("DB저장 성공");
    };
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

 추가 내용 밑의 내용이 mysql에 테이블을 넣는 부분입니다.

 connection.query mysql 모듈의 메서드입니다.

 쿼리문 안의 ? 는 입력할 데이터가 들어갈 부분입니다. 여기서는 user_id가 되겠죠?

 쿼리문 뒤에 ?에 들어갈 데이터를 적어줍니다.

 

 

 function은 콜백 함수로 쿼리문이 동작한 이후의 동작한 이후 동작을 작성할때 필요합니다.

 function 안의 매개변수

 err는 쿼리문 동작에 있어서 err가 발생할때 받는 매개변수 입니다.

 rows는 SELECT 문 처럼 DB를 조회하여 나오는 쿼리를 저장하고 있습니다.

 fields는 제가 잘 모릅니다. ㅠㅠ 더 공부해서 오겠습니다.

 

 여기서 node.js 콜백함수 개념이 중요한데

 콜백 함수 개념은 여기서 설명하지 않고 글 마지막에 설명이 되어 있는 블로그 주소를 하나 넣겠습니다.

 

5. 결과 확인

이제 node server.js 로 express를 서버를 키고 웹에서 입력하여 줍니다.

저는 wonyoung을 넣어 주었습니다.

전송 버튼을 누르면 아래와 같이 결과 화면이 나옵니다.

이제 DB에 저장이 되었는지 확인 해봐야겠죠??

결과 화면

아주 잘 저장되었습니다!! 

user_key는 자동을 생성되게 하여 들어가 있습니다. ㅎㅎ

 

여기까지 하면 이제 웹에서 입력한 내용을 DB에 저장할 수 있게 되었습니다!!

여러분도 이제 회원가입을 만들 수 있습니다!!

다음 글에서는 입력한 내용을 불러오는 방법에 대하여 알아보겠습니다.

글 읽어 주셔서 감사합니다!!

 

콜백함수 참고 블로그

dalkomit.tistory.com/65

[Node.js 강좌] 10. Callback 함수란 무엇인가 ?