Dynamic Todolist (Node.js, SQL)
์น๊ตฌ๊ฐ ์๋ฐ ์๋ธ๋ฆฟ ๊ธฐ๋ฐ์ TodoList ์น์ ๋ง๋๋ ๊ฒ์ ๋ณด๊ณ , MySQL๊ณผ NodeJS๋ฅผ ํ์ฉํ๋ฉด ์๋ก๊ณ ์นจ ์๋ TodoList๋ฅผ ๋ง๋ค ์ ์์ ๊ฒ ๊ฐ์์ ๋ฐ๋ก ์งํ์ ๋์ ํ๋ค. ํ์ง๋ง ๋ ธ๋๋ฅผ ์๋ฒฝํ ๊ณต๋ถํ์ง ์๊ณ ์ ๊ทผํ๋ค ๋ณด๋ ์ง์ ์ฅ๋ฒฝ์ด ๊ฝค ๋์๋ค. ํ๋ก ํธ์๋์ ๋ฐฑ์๋์ ์์ฐ์ค๋ฌ์ด ์ฐ๊ฒฐ์ด ๊ด๊ฑด์ด์๋ค. ์ด๋ฒ TodoList์ ํต์ฌ์ "์๋ก๊ณ ์นจ์ ์์ด์ผ ํ๋ค"์๋ค.
๊ทธ๋ ๊ฒ ์ ๋นํ ์ด๋ฆ์ ์ง๊ณ ์์ํ ๊น ํ๋ค๊ฐ "๋ด์ผ ํ ์ผ"์ด๋ผ๋ ๋ ธ๋์ ์ ๋ชฉ์ด ๋ง์์ ๋ค์๊ณ ๊ฐ๋ฐ์ ๋์ ํ๋ค.
์ด์ ๋ง๋ค์ด์ผ ํ๋ ๋์์ ํ ์ผ ๋ฑ๋ก์ ํตํด ์ผ์ ์ถ๊ฐํ๋ฉด ์ฒซ๋ฒ์งธ "ํ ์ผ" ๋ฐ์ ์๋ก๊ณ ์นจ ์์ด ์ถ๊ฐ๋๊ณ , ๊ฐ๊ฐ์ ํ ์ผ๋ง๋ค ์ ์นธ(ํ๊ณ ์๋ ์ผ, ํ ์ผ)์ผ๋ก ์ด๋ํ ์ ์๊ฒ ํ์ดํ๋ฅผ ์ญ์๋ ์๋ก๊ณ ์นจ ์์ด ์ฎ๊ธธ ์ ์์ด์ผ ํ๋ค๋ ๊ฒ์ด์๋ค. ๋ง์ง๋ง์ผ๋ก ํ ์ผ๋ก ๋ค์ด๊ฐ๋ฉด ํด๋น ํ ์ผ ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ ์ ์๊ฒ ํ๊ณ ์ถ์๋ค.
์ ๋ฆฌํ๋ฉด "์ผ ์ถ๊ฐํ๊ธฐ", "ํ ์ผ ์ฎ๊ธฐ๊ธฐ", "๋๋ ์ผ ์ญ์ ํ๊ธฐ"๋ฅผ ์๋ก๊ณ ์นจ ์์ด ๊ตฌํํ๋ ๊ฒ. ๊ทธ๋ฆฌ๊ณ ์ด ๋ชจ๋ ๊ฒ์ SQL์ ๋ฐ์ดํฐ์ ์ฐ๋ํด์ผ ํ๋ค๋ ๊ฒ์ด๋ค.
๋ชฝ๊ณ DB๋ฅผ ์ฌ์ฉํ ์ง MySQL์ ์ฌ์ฉํ ์ง ๊ณ ๋ฏผํ๋ค๊ฐ ๋น ๋ฅธ ์๋๋ณด๋ค๋ ์ ์ฅ๊ณผ view๊ฐ ์์ ์ ์ธ(๋ด๊ฐ ๋ณด๊ธฐ์ ํธํ) ๊ด๊ณํ DB๊ฐ ๋์ ๊ฒ ๊ฐ์์ ๊ฐ๋จํ๊ฒ MySQL์ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค.
๊ตฌํ ์ค ๊ฐ์ฅ ์ด๋ ค์ ๋ ๊ฒ์ ์ผ์ ์ถ๊ฐํ๋ฉด ๋์ฒด ์ด๋ป๊ฒ ํ ์ผ์ ์ผ์ด ๋ค์ด๊ฐ ์ง์๋ค. appendChild ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํ๋๋ฐ ๊ทธ๋ ๊ฒ ํ๋ฉด ๊ฐ๊ฐ์ node ๊ฐ์ฒด์ ๋ํ ์ฒ๋ฆฌ๊ฐ ๋งค์ฐ ํ๋ค์ด์ง ๊ฒ ๊ฐ๊ณ , css๋ฅผ ์ผ๊ด๋๊ฒ ์ค์ ํ๊ธฐ์๋ ๋ฌธ์ ๊ฐ ๋ง์๋ค. ํ์ฐธ์ ๊ณ ๋ฏผ ๋์ Table์ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค. ejs์ table์ ์ฌ์ฉํ๋ค๋ฉด ๋ค์ด๋๋ฏนํ ์น์ ๋ง๋ค ์ ์์ ๊ฒ ๊ฐ์๋ค.
ํ ์ผ ํ์ด์ง์ Table
๋ถ๋ถ๋ง ๋ณด๋ฉด
<table>
<% doneList.forEach(function(item, index){ %>
<tr>
<td class="t_title" colspan="2"><%= item.title %></td>
</tr>
<tr>
<td class="t_detail">์์ฑ <%= item.day %>, <%= item.who %>, <%= item.rank %>์์</td>
<td class="t_del" onclick="location.href = '/process/deltodo/<%= item.id %>'">
ร
</td>
</tr>
<% }); %>
</table>
Node์์ HTML๋ก ejs๋ฅผ ๋ ๋๋งํ ๋ ๊ฐ๊ฐ์ todolist ๋ฐ์ดํฐ๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ๋ณด๋ด๊ณ , forEach ๋ฉ์๋๋ฅผ ์ด์ฉํ์ฌ ๊ฐ๊ฐ ์ต์ (ํ ์ผ, ํ ์ผ, ํ๊ณ ์๋ ์ผ)๋ง๋ค ์ผ์ ๊ฐ์์ ๋ง๊ฒ ํ ์ด๋ธ์ ์ ์ํ๋ฉด ๋๋ ๊ฒ์ด์๋ค.
MySQL์์ mytodo DB๋ฅผ ๋ง๋ ํ todo์ ๋ฆด๋ ์ด์ ์ ๋ฃ๋๋ค. ํ ์ผ, ํ ์ผ์ status ์ปฌ๋ผ์ ์ซ์๋ก ๊ตฌ๋ถํ๊ณ , ์์ฑ์ผ์ ๋ ธ๋์์ ์ค๋ ๋ ์ง๋ก sql์ ์ฝ์ ํ๋ค.
๋ด์ผ ํ ์ผ ํ์ด์ง๋ฅผ ์์ฑํ๊ณ ๋ญ๊ฐ ๋ ์์ฑ๋์๋ ํ๋ก์ ํธ๋ก ๋๋ด๊ณ ์ถ์ด์ ๋ก๊ทธ์ธ์ ํตํด ์๋น์ค ํ ์๋ ์๊ฒ ๋ง๋ค์ด๋ณด์๋ค. ํ์๊ฐ์ ์ ๊ทธ๋ฅ ๋ง ์ํค๋ฉด ์์ด๋๊ฐ ๊ผฌ์ฌ๋ฒ๋ ค ์์ฒญ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ๊ฒ์ด๊ณ , ๊ฒ์ฆํ๋ ํจ์๊ฐ ํ์ํ๋ค.
//ํ์๊ฐ์
๊ฒ์ฆ ํจ์
var checkReg = function (id, pw, pw2, name) {
if (pw != pw2) {
return '๋น๋ฐ๋ฒํธ๊ฐ ๋ค๋ฆ
๋๋ค.';
} else if (pw.length < 4) {
return '๋น๋ฐ๋ฒํธ๋ฅผ 4์ ์ด์ ์
๋ ฅํ์ธ์.';
} else if (id.length < 4) {
return '์์ด๋๋ฅผ 4์ ์ด์ ์
๋ ฅํ์ธ์.';
} else if (name.length < 2) {
return '์ด๋ฆ์ 2์ ์ด์ ์
๋ ฅํ์ธ์.';
}
return 1;
}
์ด๋ ๊ฒ ๊ธฐ๋ณธ์ ์ธ ํ์๊ฐ์ ์ ๋ํ ๋ฐ์ดํฐ๋ฅผ ๊ฒ์ฆํ๋ ํจ์๋ฅผ ๋ผ์ฐํฐ๋ฅผ ํตํด ๊ฑฐ์ณ๊ฐ ์ ์๊ฒ ์์ฑํ๊ณ , ์์ด๋ ์ค๋ณต ํ์ธ์ (์ด ๊ฒฝ์ฐ๊ฐ ๊ฐ์ฅ ๊น๋ค๋ก์ ๋ค)
//ํ์๊ฐ์
๊ฒ์ฆ ํจ์์์ ํต๊ณผ๋๋ฉด
//์์ด๋ ์ค๋ณต ๊ฒ์ฌ
mySqlClient.query('select userid from user where userid = ?', [paramId], function (error, row) {
if (row.length > 0) {
fs.readFile('./public/register.html', 'utf8', function (error, data) {
res.send(ejs.render(data, {
focus: 'userid',
reginfo: '์ค๋ณต๋ ์์ด๋์
๋๋ค.',
username: paramName,
userid: paramId,
regroute: paramReg
}));
});
return true;
} else { ...
์ด๋ ๊ฒ userid์ ๋ํ row๊ฐ 0๋ณด๋ค ํฌ๋ฉด ์ค๋ณต๋ ์์ด๋๊ฐ ์๋ค๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ row ๊ฐ์ฒด์ ๊ธธ์ด๊ฐ 0๋ณด๋ค ํฌ์ง ์์ ๊ฒฝ์ฐ ํ์๊ฐ์ ์ ์งํํ๋ค. ์๋ ์ด ์ฝ๋๋ฅผ ๊ฒ์ฆ ํจ์์ ๋ฃ๊ณ ์ถ์๋๋ฐ ๋น๋๊ธฐ์์ผ๋ก ์ฝ๋๊ฐ ๋์ด๊ฐ๋ค ๋ณด๋ ๊ณ์ ๊ผฌ์ฌ๋ฒ๋ ค์ ํ์๊ฐ์ ๋ผ์ฐํฐ์ ์ถ๊ฐํ ์ ๋ฐ์ ์์๋ค.