오늘은 어제 하던 data insert에 이어서 select, update, delete를 테스트했다.
routing과 sequelize를 이용한 data 조작은 의외로 재밌었다.
단, 항상 주의할 점은 데이터를 통신할 때 key는 양측에서 동일해야 한다. ex) data: {‘key’:value},
data insert
- client에서는 async, await, axios(POST)를 이용해 업데이트할 데이터 전송
- 성공했다는 response를 받으면 알람을 띄우고, window reload
//app.js
const addData = async(e) => {
e.preventDefault();
const nameInput = name; //name은 useState로 정의
const res = await axios('/axios/add', {
method: 'POST',
data: {'data': nameInput},
headers: new Headers()
}
if(res.data){
alert('Added Data');
return window.location.reload();
}
}
- server에서는 create메소드를 이용해 데이터를 삽입, 성공할 경우 response를 보내고 실패할 경우 err를 보냄
//server.js
app.post('/axios/add', (req, res) => {
Table.create({
name: req.body.data
})
.then(result => res.send(result))
.catch(err => throw err;)
})
data select
- client에서는 useEffect를 사용해 처음 화면에 데이터를 모두 가져온다. 단 data가 없을 경우엔 비어있는 리스트를 만들어서 리스트를 채운다.
app.js
const getData = async() => {
const res = await axios.get('/axios/select');
if(res.data[0] === undefined){
let tmp = [];
tmp.push(res.data);
return setList(cover); //useState로 빈 list 정의
setList(res.data); //list를 이용해 component 구현해서 보기
}
- server에서는 findAll method를 사용해 모든 데이터를 가져와 client로 response한다.
- 특정 데이터를 조회하려면 where절을 추가하면 되고, 한 개만 찾을 경우 findOne을 사용한다.
- findAll로 select하면 객체 배열이 오고, findOne을 객체가 온다.
server.js
app.get('/axios/select', (req, res) => {
Table.findAll()
.then(result => {res.send(result)})
.catch(err => throw err)
// // 특정데이터만 조회하기
//findOne을 사용할 경우 배열이 아닌 객체로 전송되며, where절이 필수이다. 또한 처리방식에 예외처리가 필요하다.
//where: {column: 'value'}
//여러개의 조건 선택(or, and)
//where: {[Op.or]: [{id: 1}, {column: 'value'}]}
//})
data update
- client에서는 prompt에서 변경할 값을 받고, 값과 id를 object로 전송한다.
- 해당 data를 구별할 수 있도록 id값을 꼭 같이 전송해야 한다.
app.js
const updateDate = async(li) => {
const change = prompt("변경 할 " + li.titme + "값");
if(change !== null){
const data = {
title: change,
id: li.id }
const res = await axios('/axios/update', {
method: 'POST',
data: {'change' : data},
headers: new Headers()
})
if(res.data){
alert('Updated data!');
return window.location.reload();
}}}
- server에서는 update method를 사용하고, 속성을 변경한다. 이때, id와 where절을 사용해 수정할 데이터를 구별한다.
server.js
app.post('/axios/update', (req, res) => {
Table.update({title: req.body.change.title}, {
where: {id: req.body.change.id}})
.then(result => res.send(result))
.catch(err=>{throw err})
})
data delete
- client에서는 confirm method를 이용해 삭제 확인을 받는다.
- 삭제할 데이터를 구별하기 위해 id값을 post형식으로 전송한다.
app.js
const deleteData = async(li) => {
const del = window.confirm(li.title + "를 삭제할까요?");
if(del){
const data = {id: li.id}
const res = await axios('/axios/delete', {
method: 'POST',
data: {'del": data},
headers: new Headers()
})
if(res.data){
alert('Deleted data!');
return window.location.reload();
}}}
- server에서는 destroy method를 이용해 전송된 id와 where where조건으로 해당 데이터를 삭제한다.
- 삭제가 완료된 경우, Status200을 response해 client에게 알린다.
server.js
app.post('/axios/delete', (req, res) => {
Table.destroy({
where: {id: req.body.del.id}
})
.then(res.sendStatus(200))
.catch(err=>throw err)
})
내맘대로 정리해보기
client | server | |
select | get방식 -> setList(res.data) | findAll() ([{where}]) |
insert | post방식 | create({key: req.body.key}) |
update | prompt / input -> post방식 (id!) | update({key: req.body.key}, { where: {key: value} }) |
delete | confirm -> post방식 (id!) | destroy({where: {key: req.body.data.id} }) |