react와 express 서버 연동익히기 6편 -DB에 데이터 추가-

1. 추가, 수정, 삭제를 확인하기 위한 코드 작성

 

데이터 추가, 수정, 삭제를 유동적으로 확인하기 위해 클라이언트와 서버 파일 수정

 

//server.js
const {
    Teacher,
    Sequelize: { Op }
} = require('./models')

sequelize.query('SET NAMES utf8;');

 

당연한거지만, 서버가 해당 테이블을 읽어올려면 반드시 models/index.js에 해당 테이블을 정의해야함.

 

server.js에 클라이언트로부터 받아오는 값을 조회할 수 있는 API 작성

 

//server.js

app.post('/add/data', (req,res) => {
    console.log(req.body)
})

 

이제 클라이언트가 /add/data로 보내는 모든 데이터는 서버로 전송된다.

 

 

2. body-parser 설치

 

클라이언트가 보내는 데이터를 읽기 위해 body-parser 설치

 

npm install body-parser

 

그리고 server.js에 다음 코드 추가

 

//server.js

const bodyParser = require('body-parser')

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

 

3. axios 요청

 

app.js로 들어가서 API를 사용하는 코드 추가

 

 //frontend/app.js
 
 async function addData() {
    console.log(await axios('/add/data',{
      method: 'POST',
      data: {'test':'Complete'},
      headers: new Headers()
    }))
  }

  useEffect(() => {
    addData();
  },[])

 

리액트 재시작하면, /add/data 주소로 {test:complete}라는 데이터를 보내게 된다.

 

test라는 키 안에 complete라는 value를 담아 보낸다.

 

잘 보내지고 있다면 위 그림과 같이 {test:'Complete'}가 콘솔에 보일 것이다.

 

 

4. app.js 수정

 

유동적으로 확인하고자, app.js를 다음과 같이 수정한다.

 

import React, {useState} from 'react';
import './App.css';
import axios from 'axios';

const App = (props) => {
  const [name,setName] = useState('')

  async function addData(e) {
    
    e.preventDefault();

    const res = await axios('/add/data', {
      method : 'POST',
      data : { 'data' : name },
      headers: new Headers()
    })

    if (res.data) {
      alert('데이터를 추가했습니다.')
      return window.location.reload
    }
  }

  function nameUpdate(e) {
    setName({name:e.target.value})
  }

  return (
      <div className='App'>
        <h3> welcome to <u> daehyuck </u> blog! </h3>
        <h5> 대혁이다 </h5>

        <br />

        <form method= 'POST' onSubmit={(e) => addData(e)}>
          <input type="text" maxLength='10' onChange={(e) => nameUpdate(e)}/>
          <input type="submit" value="Add"/>
        </form>
      </div>
    )


}

export default App;

 

변경후, 실행해보면... input창이 새로 추가됨

 

 

이 input은 유저가 기입한 데이터를 서버로 전송시켜서 sequelize로 데이터를 삽입시키게 하는 매개체

 

 

5. 클라이언트에서 전송된 데이터를 sequelize로 추가해보기

 

server.js에서 /add/data/ router를 다음과 같이 수정하기

 

//server.js

const {
    Teacher,
    Sequelize: { Op }
} = require('./models')

sequelize.query('SET NAMES utf8;');

app.post('/add/data', (req,res) => {
    console.log(req.body)

    Teacher.create({
        name: req.body.data
    })
    .then( result => {
        res.send(result)
    })
    .catch( err => {
        console.log(err)
        throw err;
    })
})

 

Teacher 테이블을 서버에서 읽어올 수 있게 코드 추가

 

const {
    Teacher,
    Sequelize: { Op }
} = require('./models')

 

이렇게 읽어오는 테이블은 'create' 메소드로 데이터를 추가

 

app.post('/add/data', (req,res) => {
    console.log(req.body)

    Teacher.create({
        name: req.body.data
    })

 

name 컬럼에 클라이언트로 넘어온 req.body.data 값을 추가한다

 

여기서 'data'는 클라이언트가 아래와 같이 서버로 data를 전송할 때 해당 밸류값을 담고 있는 키 네임

 

  async function addData(e) {
    
    e.preventDefault();

    const res = await axios('/add/data', {
      method : 'POST',
      data : { 'data' : name },
      headers: new Headers()
    })

    if (res.data) {
      alert('데이터를 추가했습니다.')
      return window.location.reload
    }
  }

 

 

당연하지만, 반드시 클라이언트가 보낸 키 이름과 서버에서 받아온 키 이름은 동일해야함

 

클라이언트에서 'name' 이름으로 value를 보낼때, 서버에서 'data'로 받으면 에러

 

 

6. 테스트

 

input에 넣을 데이터를 입력

 

 

Add를 눌러서 데이터 추가 확인

 

 

sql workbench에서 실제로 들어갔는지 확인

 

 

 

참조

 

React로 블로그 만들기 07 : [Sequelize] 1. 데이터 추가 (Insert) 하기 : 네이버 블로그 (naver.com)

React로 블로그 만들기 07 : [Sequelize] 1. 데이터 추가 (Insert) 하기