[Web Project #1] Todo List Day8 - CREATE 구현

nunu·2023년 7월 4일

Todo List

목록 보기
9/9
app.get('/', (req, res) => {
    db_conn.query('SELECT * FROM LIST', (err, rows) => {
        if(err) throw err;
        res.render("home.ejs", {rows:rows});            //rows 변수 안에 rows를 담아서 home.ejs로 전달
    })
});

//리스트 추가
app.post('/create', (req, res) => {

    const content = req.body.content;
    const done = 0;
    const sql = 'INSERT INTO LIST (CONTENT, DONE) VALUES (?, ?)';

    const params = [content, done];

    db_conn.query(sql, params, (err, rows, fields) => {
        if(err) throw err;
        console.log(rows);
    });

    res.write("<script>alert('success')</script>");
    res.write("<script>window.location=\"/\"</script>");
});

처음에는 const db_index에 현재 리스트의 길이를 저장해서 create할 때+1한 값을 SQL에 이용하려고 했다.
하지만 const db_index 부분에서 에러가 발생했다.

const, var, let 자료형 차이인가 싶어서 찾아봤다.
https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/#:~:text=var%20%EC%84%A0%EC%96%B8%EC%9D%80%20%EC%A0%84%EC%97%AD%20%EB%B2%94%EC%9C%84%20%EB%98%90%EB%8A%94%20%ED%95%A8%EC%88%98%20%EB%B2%94%EC%9C%84%EC%9D%B4%EB%A9%B0%2C%20let,%EC%84%A0%EC%96%B8%20%EB%91%98%20%EB%8B%A4%20%EB%B6%88%EA%B0%80%EB%8A%A5%ED%95%98%EB%8B%A4.

기본적인 것도 모르고 코드 짜는 이... 무식한...(이렇게 배워가는 거다!!)

var db_index;
app.get('/', (req, res) => {
    db_conn.query('SELECT * FROM LIST', (err, rows) => {
        if(err) throw err;
        db_index = rows.length;                         //create할때 num값 시스템에서 주어줄 수 있도록 현재 리스트의 길이 저장
        res.render("home.ejs", {rows:rows});            //rows 변수 안에 rows를 담아서 home.ejs로 전달
    })
});

이때 var db_index = 0 으로 초기화 시키면 안됨!

그 다음 문제는...

app.post('/create', (req, res) => {
    const content = req.body.content;
    const done = 0;
    const sql = 'INSERT INTO LIST (NUM, CONTENT, DONE) VALUES (?, ?, ?)';

    const params = [num, content, done];

    db_conn.query(sql, params, (err, rows, fields) => {
        if(err) throw err;
        console.log(rows);
    });

content 부분에 아무것도 들어오지가 않아서 console에 req.body 부분을 출력했더니

아예 정의되지 않는 값이라고 나왔다.

https://stackoverflow.com/questions/27237744/node-js-express-html-form-req-body-is-undefined

위 링크를 참고해 body-parser 설정을 빼먹어서 생긴 오류라는 것을 확인해 아래 코드를 추가했다.

app.use(require('body-parser').urlencoded());

앞서 사용했던 var db_index를 이용해서 데이터베이스에 새 데이터 추가할때 node js 단에서 자동으로 num값을 증가해서 넣고 싶었는데 그게 잘 안돼서 MySQL에서 제공하는 auto_increment를 사용했다.
기존에 그냥 int형으로 지정 되어 있던 num 컬럼을 아래 DDL을 사용해 MySQL에서 자동적으로 값을 부여해서 insert 할 수 있도록 하였다.(전달인자 num값 안줘도 됨)

alter table LIST modify NUM int auto_increment;

데이터 베이스에 insert가 완료되면 assert 창이 뜨고 확인을 누르면 다시 홈화면으로 돌아가 추가된 리스트까지 화면에 출력된다.

//리스트 추가
app.post('/create', (req, res) => {

    const content = req.body.content;
    const done = 0;
    const sql = 'INSERT INTO LIST (CONTENT, DONE) VALUES (?, ?)';

    const params = [content, done];

    db_conn.query(sql, params, (err, rows, fields) => {
        if(err) throw err;
        console.log(rows);
    });

    res.write("<script>alert('success')</script>");		//assert창 생성
    res.write("<script>window.location=\"/\"</script>");	//홈화면으로 돌아가기
});

원래 redirect를 사용하려고 했는데 그러면 새로고침하기 전까지 추가된 리스트가 반영이 되지 않는다.

동영상 녹화도 했는데... 동영상 업로드가 안되는구나..ㅎ

뿌듯한 마음으로 내일은 나머지 update와 delete를 구현해보자!
(알고리즘은 또 언제푸냐고...)

profile
Hello, I'm nunu

0개의 댓글