본문 바로가기

JavaScript36

Loading To Dos part 2 이제 parsedToDos array 내부의 item들을 가지고 그 item을 나타내보자. 이미 item을 화면에 그려주는 paintToDo function을 가지고 있기 때문에 이 function이 필요로 하는 것은 newToDo 하나 뿐이다. 아래의 코드에서 item은 예를 들면 a, b, c 에 해당하기 때문에 사실상 우리가 보내기를 원하는 텍스트라고 할 수 있어서, 그냥 paintToDo를 호출하기만 하면 된다. 왜냐하면 paintToDo는 텍스트를 받는데 JS는 그 텍스트를 paintToDo에게 전달해주기 때문이다.(JS는 paintToDo에 "a", "b", "c" 와 같은 것들을 넣어줌) 이제 새로고침을 해도 내가 입력한 todo를 화면에 그대로 가져오는 것을 확인할 수 있다. 그런데 이때 .. 2022. 3. 18.
Loading To Dos part 1 현재 우리의 toDos 는 localStorage에 있는데, 새로고침을 하면 toDos가 localStorage에는 남아 있지만 화면에는 나타나지 않는다. 이번에는 이를 해결해보도록 하자 먼저 array를 stringify 하는 방법이 있다. stringify를 확인하면 array이가 단순히 string으로 바뀐것을 볼 수 있는데, 우리는 값을 string으로 저장하고 싶을 때 이것을 많이 사용할 것이다. 또 다른 방법은, '[1,2,3,4]' 와 같은 단순한 string을 가지고 살아있는 JavaScript object 로 만들어줄 수 있다는 것이다. 이렇게 JSON.parse를 사용하여 string을 JavaScript가 이해할 수 있는 살아있는 array로 만들 수 있다. 이번엔 이걸 복사해서 co.. 2022. 3. 15.
Saving To Dos 이번에는 작성한 toDo를 저장할 수 있게 만들어보자 저장을 하려면 localStorage를 이용하면 되는데 즉, 내가 a, b, c 를 입력하면 이것들을 localStorage에 저장하고 그 후에 새로고침 하면 다시 localStorage에서 그것들을 불러와서 화면에 표시한다는 것이다. 먼저 array를 만들어보자 그리고 이제 newTodo 가 실행될 때마다 작성되는 text를 array에 push하게 만들어보자 그래서 newTodo를 그리기 전에 toDos array를 가지고 와서 newTodo를 push하게 할것이다. 이제 toDo 에 a, b, c 를 입력하고 콘솔창에 toDos를 입력하면 toDos array가 생성된 것을 확인할 수 있다. 이제 이 array를 localStorage에 넣어보자.. 2022. 3. 11.
Deleting To Dos 이번에는 toDo를 삭제하는 button을 추가해보자 이때 button은JS에서 추가할 것이고, html에서는 이것들이 어떻게 보일지 디자인하면 된다. span은 toDo의 텍스트를 가리키고 button은 event를 수신하고 있어야 한다. 이제 이 button에 대한 click event를 만들어보자 먼저 button을 만들어 내용을 X로 정해준 다음 li 안에 button을 추가하도록 코드를 작성했다. 새로고침 후 실행해보면 입력한 li 들 옆에 X 버튼이 함께 출력되는 것을 확인할 수 있다. 여기까지의 과정을 처음부터 정리해보면(위의 전체코드 사진 참고), 우리는 li를 만들고 span을 만들고 span의 텍스트를 변경한 다음 button을 만들고 button의 텍스트를 변경했다. 그리고 span을.. 2022. 3. 9.

티스토리툴바