할 일을 추가해 보겠습니다.
할 일 추가는 ADD 페이지에서 이루어집니다.
할 일 제목과 내용이 들어가며 내용은 빈칸으로 입력이 가능합니다.

1.프론트처리 (frontend/src/commponents/page/add.vue)

<template>
    <div class="add">
        <h2 class="comm__title">ADD</h2>
        <div class="ipt__box">
            <input type="text" ref="tit" class="ipt" v-model="newTodoTitle" placeholder="Inser Todo" v-on:keyup.enter="addTodo">
        </div>
        <div class="ipt__box">
            <input type="text" class="ipt" v-model="newTodoDesc" placeholder="Insert Content" v-on:keyup.enter="addTodo">
        </div>
        <div class="ipt__btn">
            <a href="#" class="btn btn--confirm btn--large" v-on:click="addTodo">ADD</a>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newTodoTitle :'',
            newTodoDesc :''
        }
    },
    methods : {
        addTodo() {
            if (!this.newTodoTitle) {
                alert('할일을 입력해주세요.');
                return false;
            }
            this.$http.post('/api/todo/add',{title : this.newTodoTitle, desc : this.newTodoDesc}).then((response) => {
                if (response.data.success == true) {
                    alert('등록되었습니다.');
                    this.$router.push('/list');
                }
            });
        },
        clearInput() {
            this.newTodoTitle ='';
            this.newTodoDesc ='';
            this.$refs.tit.focus();
        }
    }
}
</script>

[ADD] 버튼을 클릭하면 addTodo 함수가 실행되고 API로 할일 타이틀과 할일 내용이 전달됩니다.
제대로 입력되었을시 등록완료 얼렛창을 띄웁니다.

2.할일 추가 API 추가 (backend/app.js)

app.post('/api/todo/add',function (req,res,next) {
    var params = [req.body.title,req.body.desc];
    var userNo = req.session.userNo;
    connection.query(
        "INSERT INTO `todos` VALUES ('',?,?,"+userNo+",0,NOW())",params,
        function (error,result,fields) {
            if (error) console.log(error);
            res.json({
                success : true
            })
        }
    )
})

프론트에서 호출된 API에서는 제목과 내용을 DB에 저장합니다.
성공적으로 등록되었을 시 true를 리턴합니다.