[Server Study] ToDo List 개발과정 3 - TODO 생성/조회/수정/삭제

지난 포스트 : ToDo List 개발과정 1 - SetUp & Table 생성 및 연결
지난 포스트 : ToDo List 개발과정 2 - 회원 생성/조회/수정

코드 링크 (Github)

https://github.com/seohyun-kim/TodoList

Tools

Node.js + JavaScript + MySql + Sequelize

9. TODO 생성 (Create)

• 미 입력 예외 처리
• 해당 id의 사용자가 없는 경우 상태 코드 리턴

/routes/todos.js

router.post('/', async (req, res, next) => {
    try {
        const todo = await Todo.create({ //INSERT
            member: req.body.id,
            content: req.body.content,
            isCompleted: req.body.isCompleted
        });
        console.log(todo);
        res.status(201).json(todo);
    } catch (err) {
        console.error(err);
        next(err);
    }
});

public/sequelize.js

// todo 등록 시
document.getElementById('comment-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const id = e.target.userid.value;
    const content = e.target.content.value;
    const isCompleted = e.target.isCompleted.checked;
    if (!id) {
        return alert('아이디를 입력하세요');
    }
    if (!content) {
        return alert('할일을 입력하세요');
    }
    try {
        await axios.post('/todos', { id, content, isCompleted });
        getTodo();
    } catch (err) {
        console.error(err);
    }
    e.target.userid.value = '';
    e.target.comment.value = '';
    e.target.isCompleted.value = false;
});

10. 회원 단건 조회 (회원 + 회원의 TODO 리스트)

회원N의 TODO 조회 버튼을 클릭하면 해당 회원의 TODO LIST 출력

/routes/members.js

router.route('/:id')
    .get(async (req, res, next) => {
        try {
            const todos = await Todo.findAll({
                include: {
                    model: Member,
                    where: { id: req.params.id },
                },
            });
            console.log(todos);
            res.json(todos);
        } catch (err) {
            console.error(err);
            next(err);
        }
    })

11. Todo 수정 기능 (완료 여부 수정 : patch-update)

/routes/todos.js

router.route('/:id')
    .patch(async (req, res, next) => {
        try {
            const result = await Todo.update({
                isCompleted: req.body.isCompleted,
            }, {
                where: { id: req.params.id },
            });
            res.json(result);
        } catch (err) {
            console.error(err);
            next(err);
        }
    })

public/sequelize.js

const edit = document.createElement('button');
edit.textContent = '수정';
edit.addEventListener('click', async () => { // 수정 클릭 시
    const newCompleted = confirm('완료는 확인, 미완료는 취소를 클릭하세요.');
    try {
        await axios.patch(`/todos/${todo.id}`, { isCompleted: newCompleted });
        getTodo();
    } catch (err) {
        console.error(err);
    }
});

12. Todo 삭제 기능 (delete-destroy)

/routes/todos.js

router.route('/:id')
    .delete(async (req, res, next) => {
        try {
            const result = await Todo.destroy({ where: { id: req.params.id } });
            res.json(result);
        } catch (err) {
            console.error(err);
            next(err);
        }
    });

public/sequelize.js

const remove = document.createElement('button');
remove.textContent = '삭제';
remove.addEventListener('click', async () => { // 삭제 클릭 시
    try {
        await axios.delete(`/todos/${todo.id}`);
        getTodo();
    } catch (err) {
        console.error(err);
    }
});

13. TODO 식별자 조회 (TODO + 회원 정보)

/routes/todos.js

router.route('/:id')
    //할 일 단건 조회
    .get(async (req, res, next) => {
        try {
            const id = req.params.id;
            const todos = await Todo.findOne({
                include: {
                    model: Member,
                    where: { id: req.params.id },
                },
            });
            console.log(todos);
            res.json(todos);
        } catch (err) {
            console.error(err);
            next(err);
        }
    })

14. TODO 전체 리스트 조회

/routes/todos.js

router.route('/')
    .get(async (req, res, next) => {
        try {
            const resTodos = await Todo.findAll({
                include: {
                    model: Member,
                    where: {  },
                },
            });
            res.json(resTodos);
        } catch (err) {
            console.error(err);
            next(err);
        }
    })

public/sequelize.js

// 전체 TODO 로딩
async function getTodo() {
    try {
        const res = await axios.get(`/todos`);
        const todos = res.data;
        const tbody = document.querySelector('#comment-list tbody');
        tbody.innerHTML = '';
        todos.map(function (todo) {
            console.log("메롱=>"+JSON.stringify(todo));
            // 로우 셀 추가
            const row = document.createElement('tr');
            let td = document.createElement('td');
            td.textContent = todo.id;
            row.appendChild(td);
            td = document.createElement('td');
            td.textContent = todo.Member.email;
            row.appendChild(td);
            td = document.createElement('td');
            td.textContent = todo.Member.name;
            row.appendChild(td);
            td = document.createElement('td');
            td.textContent = todo.content;
            row.appendChild(td);
            td = document.createElement('td');
            td.textContent = todo.isCompleted ? '⭕' : '❌';
            row.appendChild(td);

            const edit = document.createElement('button');
            edit.textContent = '수정';
            edit.addEventListener('click', async () => { // 수정 클릭 시
                const newCompleted = confirm('완료는 확인, 미완료는 취소를 클릭하세요.');
                try {
                    await axios.patch(`/todos/${todo.id}`, { isCompleted: newCompleted });
                    getTodo();
                } catch (err) {
                    console.error(err);
                }
            });
            const remove = document.createElement('button');
            remove.textContent = '삭제';
            remove.addEventListener('click', async () => { // 삭제 클릭 시
                try {
                    await axios.delete(`/todos/${todo.id}`);
                    getTodo();
                } catch (err) {
                    console.error(err);
                }
            });
            // 버튼 추가
            td = document.createElement('td');
            td.appendChild(edit);
            row.appendChild(td);
            td = document.createElement('td');
            td.appendChild(remove);
            row.appendChild(td);
            tbody.appendChild(row);
        });
    } catch (err) {
        console.error(err);
    }
}