Day+3. axios로 db 삽입, 수정, 삭제, 조회

오늘은 어제 하던 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} })