랜덤한 아이디 만들기

function handlToDoSubmit(event){
    event.preventDefault();
        const newTodo=todoInput.value;
    todoInput.value="";
    const newTodoObj={
        text:newTodo,
        id: Date.now(),
    };
   Dos.push(newTodoObj); //리스트를 해당 배열의 ㅓ장
    paintToDo(newTodoObj);

    saveToDos();


}

• todo를 입력해 list를 만드는 코드에 id값을 만들어준다.
• newTodo로 입력되는 값을 Json을 이용해 text로 지정한다
• id는 현재 시간과 초가 밀리세컨드 단위로 지정하는 Date.now()를 이용한다, 이러면 id값이 절대 겹치지 않는다.
• 배열을 저장하던 toDos.push의 값을 새로지정한 json으로 바꾼다Dos.push(newTodoObj)

출력된 목록의 id값을 지정하기

function paintToDo(newTodo){
    const li = document.createElement('li'); //li태그 생성
    li.id= newTodo.id;
    const span = document.createElement('span'); //span태그 생성
    span.innerText=newTodo.text;
    const button = document.createElement('button');
    button.className='delete';
    button.innerText='❌';
   
    button.addEventListener("click", deleteToDo) //클릭이벤트 생성
        
    li.appendChild(span); //<li><span></spam></li>
    li.appendChild(button);
    toDoList.appendChild(li);

 
}

• 입력한 todo를 출력하는 함수이다
• 지금까지는 li태그를 이용하여 목록으로 출력하였다
• 이 li의 id를 만들어주기위해 li의 id를 newTodo의 id와 같은것으로 설정한다.
  li.id= newTodo.id;
  

이 과정을 통하여 이제 li를 삭제했을때 출력된 목록과 배열에서 모두 삭제할수 있게된다.