JS-Do it! JS - #12일 (17,18)

17. 웹 API 활용하기

 

API (Application Programming Interfase)

애플리케이션에서 프로그램을 작성할 때 하나의 프로그램과 다른 프로그램 사이에 쉽게 정보를 주고받을 수 있게 도와주는 인터페이스

 

쿠키와 웹 스토리지

쿠키

사용자가 웹 사이트에 접속해서 웹 사이트를 서핑하는 동안 사용자 컴퓨터에 저장되는 텍스트 파일

웹 사이트뿐만 아니라 접속했던 개인의 정보가 저장->사생활 침해 우려,보안문제

웹 스토리지

웹사이트와 관련된 정보를 저장

사용자가 일부러 스토리지 정보를 서버로 전송하지 않는 이상 

서법에서 사용자 PC로 들어와 스토리지 정보를 읽어가지 못한다

- 구성

세션 스토리지: 웹 브라우저를 여는 순간부터 닫을때까지를 하나의 세션이라고 한다, 창이 닫히면 데이터 삭제

로컬 스토리지: 세션이 끝나도 데이터를 보관하는 스토리지, 사용자가 직접 삭제하기 전까지 보관

 

.parentElement()

해당 노드의 부모 요소(Element Object)를 가지고 있다. 부모 요소가 없거나 부모가 DOM 요소가 아닌 경우에는 null을 갖는다.

 

.children()

어떤 요소의 자식 요소를 선택합니다.

 

 

geolocation 객체

간단한 위치를 알아내고 움직이는 사용자의 위치까지 추척 가능

window.navigator객체의 자식 객체인 geolocation 객체에 포함되어 있다

 

- 사용자의 현재 위치 확인 getCurrentPosition(성공시콜백함수(,실패시 콜백함수, 옵션))

-지정한 시간마다 위치 확인 watchPosition(성공시콜백함수(,실패시 콜백함수,옵션)) + clearWatch(id)

로컬 스토리지에 저장하여 TodoList 만들기

const todoInput=document.querySelector("#todo-input");
const addBtn=document.querySelector("#add-button");
const todoList=document.querySelector("#todo-list");

document.addEventListener("DOMContentLoaded",getLocal);
addBtn.addEventListener("click",addTodo);
todoList.addEventListener("click",manageTodo);

function addTodo(e){
    e.preventDefault();
    const newDiv=document.createElement("div");
    newDiv.classList.add("todo");

    const newTodo=document.createElement("li");
    newTodo.innerText=todoInput.value;
    newTodo.classList.add("todo-content");
    newDiv.appendChild(newTodo);

    saveToLocal(todoInput.value);

    const completeBtn=document.createElement("button");
    completeBtn.innerText="완료";
    completeBtn.classList.add('complete-btn');
    newDiv.appendChild(completeBtn);

    const deleteBtn=document.createElement("button");
    deleteBtn.innerText="삭제";
    deleteBtn.classList.add("delete-btn");
    newDiv.appendChild(deleteBtn);

    todoList.appendChild(newDiv);
    todoInput.value="";
}

function saveToLocal(todo){
    let todos;
    if(localStorage.getItem("todos")===null){
        todos=[];
    }else{
        todos=JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos",JSON.stringify(todos));

}
function getLocal(){
    let todos;
    if(localStorage.getItem("todos")===null){
        todos=[];
    }else{
        todos=JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo){
        const newDiv=document.createElement("div");
        newDiv.classList.add("todo");
        const newTodo=document.createElement("li");
        newTodo.innerText=todo;
        newTodo.classList.add("todo-content");
        newDiv.appendChild(newTodo);

        const completeBtn=document.createElement("button");
        completeBtn.innerText="완료";
        completeBtn.classList.add("complete-btn");
        newDiv.appendChild(completeBtn);

        const deleteBtn=document.createElement("button");
        deleteBtn.innerText="삭제";
        deleteBtn.classList.add("delete-btn");
        newDiv.appendChild(deleteBtn);

        todoList.appendChild(newDiv);

        todoInput.value="";
    });

}

function manageTodo(e){
    const whichButton=e.target.classList[0];
    if(whichButton ==='complete-btn'){
        const todo=e.target.parentElement;
        todo.children[0].toggle('completed');
    }else if(whichButton ==='delete-btn'){
        const todo=e.target.parentElement;
        removeLocal(todo);
        todo.remove();
    }


    function removeLocal(todo){
        let todos;
        if(localStorage.getItem("todos")===null){
            todos=[];
        }else{
            todos=JSON.parse(localStorage.getItem("todos"));
        }
        const index=todos.indexOf(todo.children[0].innerText);
        //console.log(index);
        todos.splice(index,1);
        localStorage.setItem("todos",JSON.stringify(todos));
    }
}

watchPosition 을 이용해 위도,경도

const geoBtn=document.querySelector("#getLocation");
const result=document.querySelector("#result");

geoBtn.addEventListener("click",(e)=>{
    e.preventDefault();

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition,errorPosition);
    
        const options={
            enableHighAccuracu:true,
            timeout:5000,
            maximumAge:0
        };

        let watchId=navigator.geolocation.watchPosition(showPosition,errorPosition,options);

        setTimeout(function(){
            navigator.geolocation.clearWatch(watchId);
        },30000)
    
    }else{

        alert("지오로케이션을 지원하지 않습니다.");
    }
});

function showPosition(position){
    result.innerHTML=`
    <b>위도 : </b> ${position.coords.latitude},
    <b>경도 : </b> ${position.coords.longitude}`;
};

function errorPosition(err){
    alert(err.message);
}

 

---

18.공개 API 활용하기

 

 

공공데이터의 종류

파일데이터

파일형태로 제공, 로그인하지 않아도 다운로드해서 사용 가능

오픈 API

프로그래밍에서 사용할 수 있도록 데이터를 표준화하고 공유하는 형태,실시간 정보 수정가능

항상 최신 정보 유지

표준데이터

공공기관마다 서로 다른 형식으로 제공하던 데이터를 한 가지 표준으로 통일하여 제공

 

 

캠핑장 마커 클러스터

 <script>
    const lat = 37.55684;
    const lng = 126.91404;

    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
        mapOption = { 
            center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표 - 이지스퍼블리싱
            level: 14 // 지도의 확대 레벨
        };

    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
    var map = new kakao.maps.Map(mapContainer, mapOption); 

    // 마커 클러스터러를 생성합니다 
    var clusterer = new kakao.maps.MarkerClusterer({
      map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
      averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
      minLevel: 10 // 클러스터 할 최소 지도 레벨 
    });

    // 서버에서 가져오기 (관광공사 API)
    const  url = '(작성)';
  
    fetch(url)
    .then(res => res.json())
    .then(json => {
      const data = json.response.body.items.item;

    // 마커들을 모아놓을 변수
    var markers = [];

    for(let i = 0; i < data.length; i++) {  
      // 마커를 생성합니다
      var marker = new kakao.maps.Marker({
        map: map,
        position: new kakao.maps.LatLng(data[i].mapY, data[i].mapX)
      });

      markers.push(marker);   // 마커를 배열에 추가합니다

      var infowindow = new kakao.maps.InfoWindow( {
          content : data[i].facltNm   // 인포윈도우에 표시할 내용
      });

      // 마커에 이벤트를 등록합니다
      // 이벤트 리스너로는 클로저를 만들어 등록합니다 
      // 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다

      // 마커에 마우스오버하면 makeOverListener() 실행
      kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));  
      // 마커에서 마우스아웃하면 makeOutListener() 실행
      kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));   
    }

    // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
    function makeOverListener(map, marker, infowindow) {
        return function() {
            infowindow.open(map, marker);          
        };
    }

    // 인포윈도우를 닫는 클로저를 만드는 함수입니다 
    function makeOutListener(infowindow) {
        return function() {
            infowindow.close();
        };
    }

    clusterer.addMarkers(markers);
  });  // fetch 끝
  </script>