NodeJS Todo list
- todo list 웹 페이지를 NodeJS 서버를 통해 호스팅
- todo list 저장 및 불러오기 API 구현
Todo list API
# index.js
var express = require('express');
var app = express();
//var todos = {};
var todos = { "자바스크립트 공부하기": true };
app.use(express.json());
app.use(express.static("public"));
app.post("/todos", function(req, res) {
todos = req.body.todos;
console.log(req.body);
res.status(200).send({ message: "success" });
});
app.get("/todos", function(req, res) {
res.status(200).send(todos);
})
app.listen(3000, function() {
console.log("3000 포트로 웹서버 실행!");
});
- http://localhost:3000/todos
- 응답 : { “자바스크립트 공부하기”: true }
- app.use(express.static(“public”));
- 웹 시작 디렉토리 : D:\…\my_todolist\public
- 여기에 클라이언트 html, css, js 파일 위치
- 메서도 체인(Method Chaining)
- res.status(200).send({ message: “success” });
- 함수를 연속해서 호출
- 각 함수들이 자신을 리턴해서 가능 ( return this; )
Todo 클라이언트
function saveTodos() {
$.ajax({
url: "http://localhost:3000/todos",
method: "POST",
data: JSON.stringify({ todos: todos }),
dataType: "json",
contentType: "application/json"
}).done(function() {
console.log("POST done");
})
}
function inputTemplate(text, checked) {
var inputTag = $('<input type="checkbox" id="checkBox">');
inputTag.data('value', text);
inputTag.attr('checked', checked);
return inputTag;
}
- 추가버튼, 체크박스, 삭제버튼 클릭시 저장함수 saveTodos(); 호출
$.ajax("http://localhost:3000/todos").done(function(result) {
console.log(result);
todos = result;
for (const todo of Object.keys(todos)) {
$(".contents ul").append(liTemplate(todo, todos[todo]));
}
});