📝 오늘 한 것

1. Date.now() / navigator.geolocation.getCurrentPosition() / weather API / fetch API

📚 배운 것

1. To Do List

어제 공부에서 이어서

🔎 삭제 버튼 클릭 시 로컬 스토리지에 저장된 todos 함께 삭제하기

• 클릭한 todo가 무엇인지 즉, 삭제해야 할 todo가 무엇인지 알 수 있도록 todos 배열을 수정했다. 원래는 todos 텍스트만 todos 배열에 push 해줬지만, todos 텍스트를 고유의 id와 함께 newTodoObject에 담아 todos 배열에 push 해주었다. 고유의 id는 밀리초를 반환하는 Date.now()를 이용해 만들었다.

• 화면에 to do list를 표시하기 위해 li 요소를 만들 때 그 요소의 id 값으로 todo 오브젝트의 id를 넣어주었다. 이때 todo 오브젝트의 id는 숫자인 반면, li 태그의 id는 문자열이다.

• 삭제 버튼을 클릭해 화면에서 해당 to do list를 삭제할 때, 이후에 새로고침을 해도 여전히 삭제한 to do list는 화면에 보이지 않도록, 로컬 스토리지에서도 to do list를 삭제하고자 한다. li 요소마다 설정해준 id 값과 array.filter()를 이용해 todos 배열을 업데이트해준 후, 이를 바탕으로 saveToDos() 함수를 실행해 로컬 스토리지도 업데이트해준다.

const toDoForm = document.querySelector('#todo-form');
const toDoInput = toDoForm.querySelector('input');
const toDoList = document.querySelector('#todo-list');

const TODOS_KEY = 'todos';

let todos = [];

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(todos));
}

function deleteToDo(event) {
  const li = event.target.parentNode;
  li.remove();
  todos = todos.filter(todo => todo.id!== parseInt(li.id)); // todos 배열 업데이트 후
  saveToDos(); // 이를 바탕으로 로컬 스토리지도 업데이트 해줘야 한다 !
}

function paintToDo(newToDo) {
  const li = document.createElement('li');
  li.id = newToDo.id; // li 요소에 id 값 부여
  const span = document.createElement('span');
  span.innerText = newToDo.text;
  const delBtn = document.createElement('button');
  delBtn.innerText = '❌';
  delBtn.addEventListener('click', deleteToDo);
  li.appendChild(span);
  li.appendChild(delBtn);
  toDoList.appendChild(li);
}

function onToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  toDoInput.value = '';
  const newToDoObject = { text: newToDo, id: Date.now() };
  todos.push(newToDoObject); // 고유의 id 값과 todo 텍스트를 모두 담고 있는 오브젝트를 todos 배열에 push
  paintToDo(newToDoObject);
  saveToDos();
}

toDoForm.addEventListener('submit', onToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos) {
  const parsedToDos = JSON.parse(savedToDos);
  todos = parsedToDos;
  parsedToDos.forEach(todo => paintToDo(todo));
}

2. Weather

1) 현재 위치(위도 & 경도) 받아오기

• navigator.geoloction.getCurrentPosition() 메서드를 이용해 사용자의 현재 위치(위도와 경도)를 받아올 수 있다.

💡 navigator.geoloction.getCurrentPosition(성공 시 콜백 함수, 실패 시 콜백 함수)

인자로 들어가는 콜백 함수들은 위치 정보 객체를 유일한 인자로 받는다

function onGeoOk(position) { // position : 위치 정보 객체
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
}

function onGeoError() {
  alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

2) weather API 이용하기

💡 날씨 정보를 알려주는 API

http://openweathermap.org(中 Current weather data)에서 city name, geographic coordinates 등을 통해 해당 지역의 날씨를 알 수 있다.

ex. 지리 좌표를 이용해 날씨 정보를 얻어오는 방법

https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric

위 url에 위도와 경도 정보를 입력하면, 해당 url이 날씨 정보를 응답한다. (units=metric 옵션을 추가하면, 화씨 온도를 섭씨 온도로 측정 단위를 바꿔준다.)

[TIL] 210920 3.fetch API 부분 참고

• 실제로 url에 방문하지 않아도 위 url로부터의 정보를 얻을 수 있도록 자바스크립트가 fetch()를 이용해 위 url을 부르도록 한다. 제대로 불러왔는지는 개발자 도구의 네트워크 탭에서 확인해볼 수 있다.

const API_KEY = 'ec0fa8b152f1731f40ff6e8e9a1e9328';

const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;

fetch(url);

• 계속해서 fetch()를 이용해 현재 지역의 이름(data.name)과 날씨(data.weater[0].main) 정보를 얻어 화면에 표시한다.

<div id="weather">
  <span></span>
  <span></span>
</div>

const API_KEY = 'ec0fa8b152f1731f40ff6e8e9a1e9328';

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
  fetch(url).then(response => response.json()).then(data => {
    const weather = document.querySelector('#weather span:first-child');
    const name = document.querySelector('#weather span:last-child');
    weather.innerText = `${data.weather[0].main} / ${data.main.temp}℃`;
    name.innerText = data.name;
  });
}

function onGeoError() {
  alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

✨ 내일 할 것

1. 모멘텀 마무리