28일차 프론트엔드 공부 - API

- 프론트엔드 공부 28일차 -

API

어떠한 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어 둔 인터페이스

 

ex) 우리가 사이트라는 음식점에 갔다. 이후 음식점에서가 API 명세서라는 메뉴판을 받았다. 우리는 API명세서를 참고하여 주문을 하였는데 이 과정을 요청(request)라고 한다. 점원이 주방에 가서 요청받은 주문을 전달하는 것을 API라고 한다. 전달받은 것을 주는 과정을 응답(response)라고 한다.

 

HTTP (Hypertext Transfer Protocol)

서버와 클라이언트가 통신하기 위해 정의된 규약

 

GET : 서버와 데이터를 조회하는 Method

POST : 서버와 데이터를 등록하는 Method

PUT : 서버 내 데이터를 수정하는 Method

PATCH : 데이터를 일부 수정하는 Method

DELETE : 서버의 데이터를 삭제하는 Method

OPTIONS : 서버가 허용하는 Method를 확인하기 위한 Method

 

동기, 비동기

 

동기 

서버에서 요청을 보냈을때 응답을 받아야 다음 동작을 할 수 있다.

 

비동기

서버에서 요청을 보냈을때 응답과 상관없이 다음 동작을 한다

 

자바스크립트는 동기적으로 동작한다.

그러나 비동기 동작도 가능하다.

 

stack, queue

 

stack : LIFO(Last In First Out)으로 내부 데이터가 처리된다. 먼저 들어온 함수, 데이터가 가장 마지막에 처리되는 구조 

queue : FIFO(First In First Out)으로 내부 데이터가 처리된다. 먼저 들어온 함수, 데이터가 가장 먼저 처리되는 구조

 

실습

Todo list 만들기( 내지역 날씨 가져오기)

 

참고 사이트

 

 

내 위치 위도와 경도 가져오는 APIhttps://developer.mozilla.org/ko/docs/Web/API/Geolocation_API

 

날씨 알려주는 APIhttps://openweathermap.org/

Current weather and forecast - OpenWeatherMap

 

JS

const todoInput = document.querySelector("#todoInput");
const todoList = document.querySelector("#todoList");

const savedTodoList = JSON.parse(localStorage.getItem("save-Items"));

const createTodo = function (storageData) {
  let todoContents = todoInput.value;
  if (storageData) {
    todoContents = storageData.contents;
  }

  const newLi = document.createElement("li");
  const newSpan = document.createElement("span");
  const newBtn = document.createElement("button");

  newBtn.addEventListener("click", () => {
    newLi.classList.toggle("complete");
    saveItem();
  });

  newLi.addEventListener("dblclick", () => {
    newLi.remove();
    saveItem();
  });

  if (storageData?.complete === true) {
    newLi.classList.add("complete");
  }

  newSpan.textContent = todoContents;
  newLi.appendChild(newBtn);
  newLi.appendChild(newSpan);
  todoList.appendChild(newLi);
  todoInput.value = "";
  saveItem();
};

const keyCodeCheck = function () {
  if (window.event.keyCode === 13 && todoInput.value !== "") {
    createTodo();
  }
};

const deleteAll = function () {
  const liList = document.querySelectorAll("li");
  for (let i = 0; i < liList.length; i++) {
    liList[i].remove();
  }
  saveItem();
};

const saveItem = function () {
  const saveItems = [];
  for (let i = 0; i < todoList.children.length; i++) {
    const toDoObj = {
      contents: todoList.children[i].querySelector("span").textContent,
      complete: todoList.children[i].classList.contains("complete"),
    };
    saveItems.push(toDoObj);
  }
  if (saveItems.length === 0) {
    localStorage.removeItem("save-Items");
  } else {
    localStorage.setItem("save-Items", JSON.stringify(saveItems));
  }
};

if (savedTodoList) {
  for (let i = 0; i < savedTodoList.length; i++) {
    createTodo(savedTodoList[i]);
  }
}

const weatherSearch = function (position) {
  const openWeatherResponse = fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=내API키`
  )
    .then((res) => {
      return res.json();
    })
    .then((json) => {
      console.log(json.name, json.weather[0].description);
    })
    .catch((err) => {
      console.error(err);
    });
};

const accessToGeo = function (position) {
  const positionObj = {
    latitude: position.coords.latitude,
    longitude: position.coords.longitude,
  };
  weatherSearch(positionObj);
};

const askForLocation = function () {
  navigator.geolocation.getCurrentPosition(accessToGeo, (error) => {
    console.log(error);
  });
};

askForLocation();

 

사이트가 최초로 켜지면 위치 권한 팝업이 출력된다.

 

사이트가 열리면 내 위치와 날씨를 알려준다