옵셔널 체이닝 객체명?.속성 (ex : storageData?.complete) 객체가 undefined이거나 다른 사용할 수 없는 값인 경우에는 뒤 속성을 찾지 않는다. 객체가 실제로 존재할 때만 뒤 속성을 찾는다. input box에 데이터를 넣으려하자 에러가 난다. complete라는 속성을 읽을 수 없다는데 localStorage에 저장되어 있던 데이터가 아니라 inputbox로 들어오는 데이터의 경우 createTodo 함수를 호출하는 경우 매개변수 없이 호출하기 때문에 storageData가 정의되어있지 않다. 그런 상태에서 storageData의 속성 complete을 사용하니 당연히 읽을 수 없다. 이럴 때 사용하는게 옵셔널 체이닝(Optional Chaining)이다. 정상적으로 작동한다.

새로고침하면 정보가 남아있긴 한데 수행체크된 내용은 저장되어 있지 않다. 조건문이 필요하다. 매개변수를 받아오는 storageData에 complete 여부를 체크한다. storageData에 complete정보가 true라면 newLi에 "complete"를 추가한다. 이러면 새로고침해서 이전 데이터를 다시 복기시킬 때 complete도 만들어진다. 1번을 아예 삭제한 후 새로고침하면 다시 살아있다. → 더블 클릭할 때 localStorage에 저장을 안 해줬기 때문 더블 클릭했을 때도 localStorage에 저장하면 된다.

1단계 : 선언 단계 → 선언한 변수를 식별자(변수명)가 담기는 객체에 할당하는 단계 2단계 : 초기화 단계 → 변수에 할당할 메모리 공간을 부여하는 단계 3단계 : 할당 단계 → 정의된 변수에 데이터가 할당되는 단계 선언단계와 초기화 단계 사이, 변수에 할당할 메모리가 부여되기 전 단계 TDZ가 존재한다. TDZ 공간에 변수가 있는 동안에는 제대로 동작하지 않는다.

local storage에 저장하기 → 문자열만 가능 : saveItems라고 하는 '배열'을 '문자열'로 변환해서 저장해야 한다. JSON 문자 텍스트형 데이터 포맷 (데이터 타입X) 객체나 배열 자체를 문자열로 변환해줄 수 있음 데이터 통신할 때 많이 사용 JSON으로 저장되고 있다. 이제 문자열 됐으니까 local storage에 저장하자 저장만 하는 게 아니라 꺼내서 사용할 수 있어야 한다. 새로고침하거나 브라우저 껐다 켰을 때 localStorage에 있는 데이터 확인해서 자동으로 생성해주면 된다. 1. localStorage 안에 있는 데이터를 확인한다. getItem으로 가져올 데이터 key를 넣으면 된다. 데이터가 확인은 되는데 지금은 문자열 형태로 가져왔다. 우리가 쓰려면 객체 형태여야하..

할 일들이 쌓여있으니 지저분하다. 더블 클릭 하면 삭제되는 기능을 추가하자. 목록을 삭제해줄 것이니까 의 remove메소드를 사용한다. 더블클릭했더니 삭제됐다. querySelectorAll() - 소괄호 안에 들어온 그 값을 기준으로 해당 태그들을 모두 가져온다. 들을 생성하고 전체 삭제 버튼을 누르면 querySelectorAll에 대한 결과로 배열이 생성된다. 반복문을 이용해서 바로 배열의 원소들을 삭제해준다. '전체 삭제' 버튼을 누르면 다 사라진다. todo-list를 계속 쓸 수 있도록 local Storage를 사용하자. todoList를 밖으로 뺀다. (#todo-list 는 를 담고 있다.) todoList.children → 의 원소를 배열로 가진다. children - 하위에 존재하고..

현재 todo-list의 결함은 수행 여부를 알 수 없는 것이다. 그러므로 수행한 일정에 대해서는 체크할 수 있는 버튼을 추가하자. 먼저 함수를 분리한다. 밑에 keyCodeCheck 함수는 입력창에 엔터키가 눌리고 내용이 있는지를 검사해서 그렇다면 위의 createTodo 함수를 실행시킨다. 입력된 할 일에 버튼을 추가할 것이기 때문에 태그 생성 메소드 createElement를 사용했다. createElement('생성할 태그') - tagName의 HTML 요소를 만들어 반환 할 일을 입력하면 button 태그가 생성되는 것을 확인했다. 새로운 버튼을 클릭했을 때 newLi 태그(li)에 담겨져 있는 이 요소에 어떠한 조작을 가하겠다. addEventListner('이벤트타입', 실행할 함수) - ..