crongro/todo.css

## todo.css
body > button {
    margin: 2% 10%;
    width: 200px;
    height: 41px;
    cursor: pointer;
    font-size: 1.2em;
    display: block;
}

.todoStatus {
    width: 500px;
    height: 300px;
    border: 1px solid gray;
    margin: 10%;
    overflow: auto;
    padding: 1.5%;
}

.inputWrap {
    margin :  2% 10%;
}

.inputWrap input {
    width : 200px;
    height: 40px;
    padding:0.5em;
    font-size: 1em;
}

## todo.html
<html>
    <head>
        <link rel="stylesheet" href="todo.css">
    </head>
    <body>
        <button class="getdataBtn">초기데이터가져오기</button>
        <button class="getCurrentDataBtn">지금데이터보여주기</button>
        <div class="inputWrap">
            <input type="text" placeholder="add$자바스크립트 공부하기 ">
            <button class="saveInput">저장</button>
        </div>
        <section class="todoStatus"></section>
    </body>
    <script src="util.js"></script>
    <script src="todo.js"></script>
    <script>
    </script>
</html>

## todo.js
const curry = (fn) => {
    return function curryFn(...args1) {
        if (args1.length >= fn.length) {
            return fn(...args1);
        } else {
            return (...args2) => curryFn(...args1, ...args2);
        }
    }
}

const appendHTML = (target, data) => target.innerHTML = data;
const splitString = (gubun, str) => str.split(gubun);

//TODO
const todo = (function() {

    let store = { 'todo' : [], 'doing' : [], 'done' : [] };

    function getData(url) {
        return fetch(url)
          .then(res => res.json())
          .then(json => {
            store = json[0];
            return store;
          })
          .then(store => {
              //step1
          })
    }

    return {
        getData
    }
})();


!(function() {
    //초기 데이터 가져오기
    const dataBtn = document.querySelector('.getdataBtn');
    const url = "http://127.0.0.1:8080/todos.json";
    dataBtn.addEventListener('click', () => todo.getData(url));

    //입력을 저장.
    const saveInput = document.querySelector('.saveInput');
    saveInput.addEventListener('click', ({target}) => {
        const inputValue = target.previousElementSibling.value;
    });
})();

## todos.json
[
    {
     "todo" : [
         {"name" : "자바스크립트공부하기", "id" : 1},
         {"name" : "스크립트개발", "id" : 2},
         {"name": "공부하기",  "id" : 3}
     ],
     "doing" : [
         {"name" : "테스트하기", "id" : 4}
     ],
     "done" : [
         {"name" : "블로그쓰기", "id" : 5}
     ]
    }
]

## util.js

//https://gist.github.com/kaizhu256/4482069
const uuid4 = function () {
    //// return uuid of form xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
    var uuid = '', ii;
    for (ii = 0; ii < 32; ii += 1) {
      switch (ii) {
      case 8:
      case 20:
        uuid += '-';
        uuid += (Math.random() * 16 | 0).toString(16);
        break;
      case 12:
        uuid += '-';
        uuid += '4';
        break;
      case 16:
        uuid += '-';
        uuid += (Math.random() * 4 | 8).toString(16);
        break;
      default:
        uuid += (Math.random() * 16 | 0).toString(16);
      }
    }
    return uuid;
  };
	body > button {
	margin: 2% 10%;
	width: 200px;
	height: 41px;
	cursor: pointer;
	font-size: 1.2em;
	display: block;
	}

	.todoStatus {
	width: 500px;
	height: 300px;
	border: 1px solid gray;
	margin: 10%;
	overflow: auto;
	padding: 1.5%;
	}

	.inputWrap {
	margin : 2% 10%;
	}

	.inputWrap input {
	width : 200px;
	height: 40px;
	padding:0.5em;
	font-size: 1em;
	}
	<html>
	<head>
	<link rel="stylesheet" href="todo.css">
	</head>
	<body>
	<button class="getdataBtn">초기데이터가져오기</button>
	<button class="getCurrentDataBtn">지금데이터보여주기</button>
	<div class="inputWrap">
	<input type="text" placeholder="add$자바스크립트 공부하기 ">
	<button class="saveInput">저장</button>
	</div>
	<section class="todoStatus"></section>
	</body>
	<script src="util.js"></script>
	<script src="todo.js"></script>
	<script>
	</script>
	</html>
	const curry = (fn) => {
	return function curryFn(...args1) {
	if (args1.length >= fn.length) {
	return fn(...args1);
	} else {
	return (...args2) => curryFn(...args1, ...args2);
	}
	}
	}

	const appendHTML = (target, data) => target.innerHTML = data;
	const splitString = (gubun, str) => str.split(gubun);

	//TODO
	const todo = (function() {

	let store = { 'todo' : [], 'doing' : [], 'done' : [] };

	function getData(url) {
	return fetch(url)
	.then(res => res.json())
	.then(json => {
	store = json[0];
	return store;
	})
	.then(store => {
	//step1
	})
	}

	return {
	getData
	}
	})();


	!(function() {
	//초기 데이터 가져오기
	const dataBtn = document.querySelector('.getdataBtn');
	const url = "http://127.0.0.1:8080/todos.json";
	dataBtn.addEventListener('click', () => todo.getData(url));

	//입력을 저장.
	const saveInput = document.querySelector('.saveInput');
	saveInput.addEventListener('click', ({target}) => {
	const inputValue = target.previousElementSibling.value;
	});
	})();
	[
	{
	"todo" : [
	{"name" : "자바스크립트공부하기", "id" : 1},
	{"name" : "스크립트개발", "id" : 2},
	{"name": "공부하기", "id" : 3}
	],
	"doing" : [
	{"name" : "테스트하기", "id" : 4}
	],
	"done" : [
	{"name" : "블로그쓰기", "id" : 5}
	]
	}
	]

	//https://gist.github.com/kaizhu256/4482069
	const uuid4 = function () {
	//// return uuid of form xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
	var uuid = '', ii;
	for (ii = 0; ii < 32; ii += 1) {
	switch (ii) {
	case 8:
	case 20:
	uuid += '-';
	uuid += (Math.random() * 16 \| 0).toString(16);
	break;
	case 12:
	uuid += '-';
	uuid += '4';
	break;
	case 16:
	uuid += '-';
	uuid += (Math.random() * 4 \| 8).toString(16);
	break;
	default:
	uuid += (Math.random() * 16 \| 0).toString(16);
	}
	}
	return uuid;
	};