210304

😂To.Do.List 완성

api를 활용해서 날씨정보를 실시간으로 받아오는 작업까지 해서 드디어 완성을 했다. 비록 내머리속에서 제로부터 다 만들 수는 없지만 그래도 js를 활용하는것에 한층 더 익숙해진 것 같다. 처음부터 완성한 코드 참조 안 하고 ToDo를 구현하는 것을 해야할지 아니면 패캠 스타벅스 홈페이지 클론코딩을 해볼지 고민이다.

✔api fetch 코드

<script>
const tem = document.querySelector(".js-tem");
const weather = document.querySelector(".js-weather");
//API에서 받아온 Key
const API_KEY = "880e7431987ae4b28d156d09f1896c04";
const COORDS = "coords";

function getWeather(lat, lng) {
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
  )
    .then(function (response) {
      return response.json();
    })
    .then(function (json) {
      console.log(json);
      const temperature = json.main.temp;
      const place = json.name;
      tem.innerText = `${temperature}°C`;
      weather.innerText = `${place}`;
    });
}

function saveCoords(coordsObj) {
  localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}

function handleGeoSucces(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  const coordsObj = {
    latitude: latitude,
    longitude: longitude,
  };
  saveCoords(coordsObj);
  getWeather(latitude, longitude);
}

function handleGeoError() {
  console.log("Cant access geo location");
}

function askForCoords() {
  navigator.geolocation.getCurrentPosition(handleGeoSucces, handleGeoError);
}

function loadCoords() {
  const loadedCoords = localStorage.getItem(COORDS);
  if (loadedCoords === null) {
    askForCoords();
  } else {
    // getWeather
    const parseCoords = JSON.parse(loadedCoords);
    getWeather(parseCoords.latitude, parseCoords.longitude);
  }
}

function init() {
  loadCoords();
}

init();
</script>

✔pug를 활용한 페이지 생성

doctype html 
html
   head     
      link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU", crossorigin="anonymous")
      title #{pageTitle} | #{siteName}
   body
      header 
         include ../partials/header
      main   
         block content  
      include ../partials/footer

pug는 이런식으로 태그를 따로 닫지 않고 들여쓰기로 html문서를 작성한다.
또 페이지에 하나의 양식을 만들면 다른 페이지에서 만든 양식을 불러와서 만들 수 있다.

🙄생각

지금 적으면서 한 생각이지만 강의를 들으면서 배운것들을 치열하게 정리하지 않고 그냥 머리로만 이해하고 넘어갔다는 생각이 들었다. 이제는 옛날 코코아톡 클론코딩할때처럼 세세하게 정리하면서 공부해야겠다.