{"id":1321,"date":"2022-03-02T16:07:48","date_gmt":"2022-03-02T07:07:48","guid":{"rendered":"http:\/\/mylittleforest.kr\/wordpress\/?p=1321"},"modified":"2025-01-15T11:32:37","modified_gmt":"2025-01-15T02:32:37","slug":"cordova-todo-list","status":"publish","type":"post","link":"http:\/\/mylittleforest.kr\/wordpress\/blog\/2022\/03\/02\/1321\/","title":{"rendered":"Cordova Todo List"},"content":{"rendered":"\n

Cordova Todo List \ud504\ub85c\uc81d\ud2b8<\/h2>\n\n\n\n

mytodolist \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \ubc0f \uc2dc\ud5d8<\/h3>\n\n\n
\nD:\\cordova>\n> cordova create mytodolist com.example.mytodolist MyTodoList\n> cd mytodolist\n> cordova platform add android\n> cordova run android\n<\/pre><\/div>\n\n\n
NodeJS \uc11c\ubc84<\/h3>\n\n\n\n
index.js<\/p>\n\n\n
\nvar todos = [];\n<\/pre><\/div>\n\n\n
\ud074\ub77c\uc774\uc5b8\ud2b8<\/h3>\n\n\n\n
mytodolist.js<\/p>\n\n\n
\nvar todos = [];\n\n$.ajax("http:\/\/localhost:3000\/todos").done(function(result) {\n    console.log(result);\n\n    todos = result;\n    for (const todo of todos) {\n        $(".contents ul").append(liTemplate(todo.text, todo.checked));\n    }\n});\n\n$("#addButton").click(function() {\n    var text = $("#inputBox").val();\n    todos.push({ text: text, checked: false });\n    $("#inputBox").val("");\n    console.log(todos);\n\n    $(".contents ul").append(liTemplate(text, false));\n    saveTodos();\n});\n\nfunction liTemplate(text, checked) {    \n    var li = $('<li><\/li>');\n\n    alert(text);\n    li.attr('value', text);\n    li.append(inputTemplate(text, checked));\n    li.append(text);\n    li.append(buttonTemplate());\n\n    li.click(function(event) {\n        var el = $(event.target);\n        var index = el.index("li");\n        console.log(index);\n    \n        if (el.is("button")) {\n            todos.splice(index, 1);\n            $("li")[index].remove();\n        }\n        else if (el.is("input[type='checkbox']")) {\n            var isChecked = el.is(":checked");\n            if (isChecked) {\n                $($("li")[index]).addClass("checked");\n                todos[index].checked = true;\n            } else {\n                $($("li")[index]).removeClass("checked");\n                todos[index].checked = false;\n            }\n        }\n\n        saveTodos();\n    });    \n\n    return li;\n}\n\nfunction inputTemplate(text, checked) {\n    var inputTag = $('<input type="checkbox" id="checkBox">');\n    inputTag.attr('checked', checked);\n    return inputTag;\n}\n\nfunction buttonTemplate(text) {\n    var buttonTag = $('<button id="delButton">X<\/button>');\n    return buttonTag;\n}\n<\/pre><\/div>\n\n\n
\ube4c\ub4dc \ubc0f \uc2dc\ud5d8<\/h3>\n\n\n
\n> npm run start\n\nnpm ERR! Missing script: "start"\n==>\npackage.json\n"scripts": {\n    "start": "node index.js"\n  },\n\nError: Cannot find module 'express'\n==>\n> npm install -save express\n\n> cordova run android\n<\/pre><\/div>\n\n\n
\ud50c\ub7ec\uadf8\uc778 \uc124\uce58<\/h3>\n\n\n\n
\ub0a0\uc9dc\uc120\ud0dd \ud50c\ub7ec\uadf8\uc778<\/h4>\n\n\n\n