API(Application Programming Interface): 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단 - 오직 데이터만 가져오는 것이다. - 이런 API를 제공하는 웹사이트를 이용하면 해당 웹사이트를 통해 데이터를 얻을 수가 있는데 우리가 가져올 것은 데이터 뿐이다. 디자인이나 다른 것은 필요하지 않다. - 그러니까 이런 API는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된 것 - 여기 저장된 데이터는 우리가 local storage에 저장한 데이터랑 똑같이 생겼다. 데이터가 string으로 되어있 https://openweathermap.org/current 여기보면 지리좌표를 이용하는 “By geographic coordinates” API가 있다. 이게..

이제 우리가 할 것은 Location 정보를 가져오는 것이다. 유저의 Location 좌표 정보를 읽어서 그 정보를 local storage에 저장하는.. (위도와 경도를 읽어노는 것) 일단 init() 함수를 만들고 맨 마지막에 호출하는 코드를 넣는다. const COORDS = 'coords'; function loadCoords(){ const loadedCoords = localStorage.getItem(COORDS); if(loadedCoords === null){ askForCoords(); } else{ //getWeather } } function init(){ loadCoords(); } init(); loadCoords() 함수를 다음과 같이 일단 작성한다. 만약 loadCoords가..

To-do list를 지우기 위해서는 2가지를 해야 한다. 1) local storage에서 todo 하나를 지워야 하고 그리고 저장해야 한다. 2) 그리고 HTML 에서도 지워야 한다. 먼저 HTML을 먼저 지우는 것부터 하겠다. 우리는 li를 지울 것이다. 그러기 위해서 함수를 하나 만든다. deleteToDo라는 함수 만들기 function deleteToDo(event){ } delBtn.addEventListener("click",deleteToDo); paintToDo 함수에서, delBtn(삭제버튼)을 눌렀을 때 deleteToDo 함수가 실행되도록 addEventListener를 사용한다. function deleteToDo(event){ console.log(event); } consol..

★to-do를 저장하기 이제 to-do(할 일)를 저장하는 것부터 시작할 것이다. 그리고 to-do list(할 일 목록)는 array가 되어야 한다. 왜냐하면 할 일 항목이 많아질 수 있기 때문이다. 해야할 일을 하나만 저장하는 게 아니라 여러 개가 모인 목록으로 저장해야 하는 것이다. const toDos = []; toDos라는 이름의 빈 배열을 만들어 준다. 처음엔 빈 배열로 만들고, 해야할 일을 생성했을 때 그게 이 toDos라는 Array에 추가되도록 한다. 그러기 위해서 일단 toDoObj 라는 것을 만들어야 한다. const toDoObj = { text: text, id : toDos.length + 1 //맨 처음엔 toDos Array가 비어있으니까 id 값은 1일 것이다. } toD..

★html 코드 작성 Greeting 부분 아래에 to-do list가 들어갈 form을 만든다. ★Todo.js 작성 const toDoform = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"); toDoList = document.querySelector(".js-toDoList"); todo.js 파일에서 이렇게 객체를 가져온다. ★Init() 함수 function init(){ } init(); 니콜라스의 방식으로 init() 함수를 만들어서 init()를 실행시키는 코드를 먼저 작성해주고 function init(){ loadToDos(); } init(); init 함수안에 들어갈 코드는 l..

form은 default에 의해서 enter를 누르면 입력 값을 다른 곳으로 보낸다. 그런데 아무것도 설정하지 않고 enter를 누르면 마치 새로고침한 것 같이 다 날라간다. (이게 기본 동작) form에서 입력한 데이터를 저장하기 위해서는 이 이벤트를 삭제하고 새 이벤트를 addEventListener로 추가해주어야 한다. (정확히는 기본 동작을 막고 submit했을 때 다른 함수를 만들어 추가) -->기본 동작을 막기 위해서 preventDefault 메소드를 사용한다. 또한 자바스크립트 코드에서 새로운 li를 생성하고 싶으면 createElement("li")를 사용한다. appendChild() -> 부모 element 안에 넣음