hye-log

#24 navigator.geolocation.getCurrentPosition(successCallback,errorCallback) successCallback : 모든게 잘 되었을 때 실행될 함수 errorCallback : 에러가 발생했을 때 실행될 함수 #4~#5 경도와 위도는 getCurrentPosition에서 불러온 postion parameter에서 latitude와 longtitude를 가져온다. #7 api.openweathermap.org 에서 API_KEY를 받아서 날씨 정보를 가져온다 #8~#16 fetch는 Javascript가 대신 URL을 돌려주는 함수이다. reponse의 JSON을 얻어서 날씨 정보와 지역 정보를 가져온다.

- Deleting Todos 앞에서는 Todos의 보이는 부분을 삭제하는 일을 했다. 이번에는 local storage에 저장된 Todos를 삭제하는 일까지 해본다. 여기서 주의할 점은 우리가 생성한 item들의 동일한 값에 대해서 array가 구분하지 않는다는 것이다. 따라서 각각의 item에 id를 만드는 것이 필요하다. 우리는 현재 시간을 기준으로 id를 만들고, id와 value를 하나의 object로 정의한다. 그리고 array에서 item을 삭제할 때 array는 어떻게 저장되는걸까? array에서 특정 item을 빼는게 아니라, 특정 item을 제외하고 새로운 array를 생성한다. 이때 사용하는 것이 filter 인데, filter로 특정 item을 제외하고 새로운 array만을 선택한다..

- Loading Todos 페이지를 새로고침할 때마다 local storage에 todo가 저장되어 있지만, 화면에는 나타나지 않는다. 따라서 화면에 todo를 불러오는 코드가 추가되어야 한다. #5 에서 local storage에 저장한 "todos"를 자주 사용하므로 하나의 변수로 정의해서 사용한다. #7 에서 array 에 값을 더하거나 빼는 것처럼 변경이 필요하므로 let으로 정의한다. #45 에서 local storage에서 TODOS_KEYS의 item을 가져와서 저장한다. 이때, 저장되는 값은 string이다. #47 에서 가져온 saveTodos(TODOS_KEYS의 value)가 null이 아니면, #48 parsedTodos에 saveTodos를 parse해서 넣어준다. parse는 ..

- Adding ToDos 우리가 만든 ToDo로 새로운 ToDo를 추가할 수 있지만, 지울 수는 없다. 또한, 웹페이지를 새로고침하면 ToDo가 모두 사라지게 된다. 따라서 Todo를 저장하는 수단을 만드는 것이 필요하다. #5~#11 에서 paintTodo function은 newTodo를 받아서 span에 넣어주는 역할을 한다. #6 에서 li tag를 정의한다. li 는 list의 약자로 목록을 만드는 태그이다. #7 에서 span tag를 정의한다. span 은 inline-element를 하나로 묶을 때 사용하는 태그이다. #8 에서 li tag 안에 span tag를 정의한다. #9 에서 span의 innerText는 newTodo로 정의한다. #10 에서 todoList에 li 를 chil..

이제 ToDo 리스트를 만들어보자. 먼저 index.html 에서 todoForm, todoInput, todoList를 정의한 다음 todo.js에서 불러온다. #5~#9 는 form에 submit 동작이 발생했을 때 기본 동작을 막고 input을 빈 값으로 채워주는 function 이다. #6 에서 submit의 기본 동작이 웹페이지 새로고침이므로 기본 동작을 막아주는 function을 사용한다. #7 에서 newTodo에 todoInput으로 사용자가 입력한 값을 복사한다. #8 에서 todoInput은 value를 빈 값으로 채워준다. 사용자가 값을 입력하고 새로고침하면 웹페이지가 새로고침 되지 않고, input에 빈 값만 남게 된다. 새로운 개념은 없고 앞서서 배운 개념을 가지고 적용시키기만 했다.