[TIL] 200305, Thu : JS 현재위치 받아 로컬스토리지 저장하기 / API로 외부데이터값 가져오기

rimu·2020년 3월 6일
0

Done today

  • Todo list 제거 기능 복습
  • 앱 현재 위치 받아서 로컬스토리지 저장하기
  • API 이용해서 외부 데이터 적용하기

New learning

1. 랜덤으로 백그라운드 사진 띄우기

1-1. 임의의 숫자 생성하기

const IMG_NUMBER = 4;
function genRandom() {
  const number = Math.floor(Math.random() * IMG_NUMBER);
  return number;
}

Math.floor(): 숫자를 (바닥으로) 내림하여 정수로 만든다.
Math.ceil(): 숫자를 (천장으로) 올림하여 정수로 만든다.

1-2. 화면에 띄우기

function paintImage(imgNumber) {
  const image = new Image();
  image.src = `img/${imgNumber + 1}.jpg`;
  image.classList.add("bgImage");
  body.appendChild(image);

이미지에 대한 새로운 클래스 값이 필요한 이유는 css 스타일링을 위해.

2.현재 위치 받아서 로컬스토리지 저장하기

2-1. 메인 조건문 만들기

기존 로컬스토리지 저장하기와 마찬가지 방식으로,
로컬스토리지가 비어있으면 좌표를 물어본다.

function loadCoords() {
  const loadedCoords = localStorage.getItem(COORDS);
  if (loadedCoords === null) {
    askForCoords(); //로컬스토리지가 비어있으면 좌표를 물어본다
  } else {
    //좌표가 있으면 getWeather
  }
}

2-2. 좌표 물어보는 함수 생성 + 저장하기

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

getCurrentPosition 객체는 두가지 요구사항이 있음.
1.포지션을 불러오는데 성공했을때 실행내용
2.실패했을때 실행내용

현재위치를 불러오는데 성공했을때:
위치값을 불러오고 값을 객체 안에 넣는다.

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

위치값 객체를 로컬스토리지에 저장하는 함수 만들기

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

2-3. API 이용해서 위치값에 대한 현재 날씨 불러오기

API 란?

API (Aplication Programming Interface):
다른 서버로부터 손쉽게 데이터를 가져오는 수단이다.
특정웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된것. 객체형태로 데이터가 저장되어 있고 이 저장된 데이터 객체를 json이라고 함.

function getWeather(lat, lng) {
  fetch(
    `http://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) {
      const temperature = json.main.temp;
      const place = json.name;
      weather.innerText = `${temperature}@${place}`;
    });
}

하지만 then 부분부터 너무 어려워서 1도 이해를 하지 못했다고 한다...... 다시 듣고 정리하겠음.

Feelings & Thoughts

자잘하게 에러가 계속 나서 너무 답답했다.
강의 들으면서 공부하는 것의 단점은 어쨌든 강의 코드라는 답이 있으니까 내가 혼자 머리싸매고 해결하려고 한다기 보다는 코드 한 줄 한 줄 보면서 뭐가 잘 못 된건지 오타 찾으려고 하는 나를 자꾸 발견한다.
실제 코딩을 하게 되면 이제는 내가 혼자 해야만 하는데.. 아직은 아득하기만 할 뿐. 강의를 듣는게 과연 도움이 되는가 싶은 지점까지 왔다. 물론 지식이 생기는건 맞지만 어느시점부터는 내 개인 프로젝트를 빌드업을 시작해야한다. 이제 이번주 일요일부터 8주동안 토이프로젝트를 만드는 과정에 참여한다. 어떤걸 만들어보고싶은지 고민을 한번 해봐야겠다.

To-do tomorrow

  • 토이프로젝트 주제 고민 + 어떻게 구현할지 생각해보기
  • CS공부
  • 모멘텀 앱 만드는거 전체적으로 복습하기
profile
Perfectly imperfect ✨

0개의 댓글