2023.02.28
데이터 생성 (Create)
MySQL로 생성한 서버에 데이터를 추가하는 방법입니다. 기본 설정은 GCP SQL 연결하는 방법 이 방법으로 설정하였습니다.
데이터의 추가와 수정, 삭제를 좀 더 유동적으로 확인하기 위해 클라이언트와 서버 파일을 수정하겠습니다. 먼저 'server/server.js' 파일에서 다음과 같은 코드를 추가합니다. 아래 코드는 테이블을 서버로 가져와 읽을 수 있도록 하는 코드입니다.
const {
Teacher,
Sequelize: { Op }
} = require('./models');
sequelize.query('SET NAMES utf8;');서버가 해당 테이블을 읽어오기 위해서는 반드시 'server/models/index.js' 파일 안에 해당 테이블이 아래와 같이 정의되어 있어야 합니다.
db.Teacher = require('./teacher')(sequelize, Sequelize);완료 되었으면, 클라이언트로부터 받아오는 값을 조회할 수 있는 API를 작성합니다. 데이터를 받는 함수는 express의 post 함수를 이용합니다. express에는 GET, POST, PUT, DELETE 라는 4가지의 HTTP Method들이 있고 아래와 같은 역할을 합니다.
- GET : getting data
- POST : creating data
- PUT : updating data
- DELETE : deleting data
저는 위 메소드들 중에서 post를 이용하여 데이터를 추가할 것입니다.
post 함수 추가
'server/server.js' 파일 안에 아래와 같은 구문을 추가합니다. '/add/data/' 경로로 데이터 요청이 들어오면, 해당 데이터를 받아 처리하는 부분입니다. 데이터가 들어오면 출력을 한 후 앞서 server.js 파일에 수정했던 Teacher을 불러와 데이터를 생성하고 그 결과를 보냅니다.
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;
})
});클라이언트가 '/add/data'의 주소로 보내는 모든 데이터는 서버로 전송됩니다. 그런데, 클라이언트가 보내는 데이터를 읽기 위해서는 'body-parser'라는 모듈이 필요합니다.
body-parser
node.js의 모듈로, 클라이언트 POST request data의 body로부터 파라미터를 편하게 추출하는 모듈입니다. body-parser를 쓰는 이유는 undefined 때문입니다. 예를 들어 다음과 같은 데이터를 body에 담아 POST request 를 보내고자 합니다.
{
userID: "아이디",
password: "비번"
}서버단에서 express를 써서 POST request를 처리하는 방법은 다음과 같습니다.
var express = require('express')
var app = express()
app.post('/profile', function(req, res) => {
console.log(req.body)
})그런데, 위 코드 기준 5번째 줄 console.log(req.body) 라인에서 undefined Error를 마주하게 됩니다. req.body는 body-parser를 사용하기 전에는 디폴트 값으로 Undefined이 설정되기 때문입니다. (출처: Express Docs) 이를 해결하는 방법이 body-parser 입니다.
body-parser 설치
npm install body-parser이 후 'server/server.js' 파일에 아래 구문을 추가합니다.
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.json());Express 빌트인 body-parser
다행스러운 점은, express ^4.18.2 기준으로 빌트인 body-parser가 있습니다. 따라서 express를 쓴다면, 따로 import 하지 않아도 되었습니다. import 부분을 주석처리 해도 데이터를 정상적으로 받을 수 있었습니다.
클라이언트에서 데이터 전송
이제 클라이언트로 가서 '/src/App.js' 파일에 데이터 전송 코드를 추가합니다. axios를 이용하여 전송하게 됩니다.
import React, { useState, useEffect } from 'react';
import axios from "axios";
import './App.css';
const App = () => {
const [name, setName] = useState('none');
const addData = async(e) => {
e.preventDefault();
const res = await axios('/proxy/5000/add/data', {
method: 'POST',
data: {
'data': name
},
headers: new Headers()
});
if (res.data) {
alert("데이터를 추가하였습니다.");
}
};
return (
<div className="App">
<form method='POST' onSubmit={addData}>
<input type='text' maxLength='10' onChange={(e) => setName(e.target.value)} />
<input type='submit' value='Add' />
</form>
<p>{name}</p>
</div>
);
}
export default App;클라이언트 전송 시 주의사항
이제 Add 버튼을 누르면 '/add/data' 주소로 {data: name} 이라는 값을 보내게 됩니다. 이 때 주의해야 할 점은, 클라이언트에서 보내는 키의 이름과 서버에서 받아오는 키의 이름이 동일해야 합니다. 이번 연습파일의 경우 'server/server.js' 파일에
app.post('/add/data', (req, res) => {
...
Teacher.create({
name: req.body.data
})
...
});위와 같은 형태로 키 값은 data로 선언하였습니다. 따라서 클라이언트에서 보낼 때도 이와 동일한 data로 보내야 합니다. 따라서 클라이언트에서 데이터를 전송할 때 사용할 키 값도 data가 되므로
const res = await axios('/proxy/5000/add/data', {
method: 'POST',
data: {
'data': name
},
headers: new Headers()
});위와 같이 'data': name 이라는 구문이 들어가게 됩니다. 마지막으로 npm start로 프로젝트를 실행시키고 내용을 입력하여 Add 버튼을 누르면 데이터가 전송되는 것을 확인할 수 있습니다. mysql 쉘로 가서 select*from teachers; 로 테이블을 확인해보면 정상적으로 추가된 것을 확인할 수 있습니다.
