밤양갱

자바 스크립트의 동작원리

-자바스크립트는 싱글쓰레드 언어이다. (머리가 하나) 
-한번에 한가지 일 밖에 처리할수 없다. 멀티케스팅이 불가함 (Call stack 콜스텍)
-실행하고있는 함수가 있는경우 다른 일을 할 수가 없고 다른 일들이 블락된다
-브라우저에서 오래걸리는 작업이 실행될경우 웹 페이지 UI는 멈춰버리고 사용자는 아무것도 못하게된다.

비동기 콜백
*JS Engine 은 js 코드를 이해하고 실행을 도와줌 대표적인 JS Engine으로 V8엔진 (Chrome, Node.js)이 있으며 이외에도 각 브라우저 별로 여러가지 엔진이 존재함 js 엔진은 크게 
*Memory Heap: 데이터를 임시 저장하는 공간, 함수와 변수, 함수를 싱핼할때 사용하는 값들을 저장함 
*Call Stack: 코드가 실행되면코드 내부의 실행순서를 기록후 하나씩 순차적으로 진행되게 도와줌

런타임

js engine 싱글 스레드 기반 언어이기 때문에 다른 작업을 수행하려면 현재 수행중인 작업이 끝날때까지 기다려야하는

문제점이 있음 

능동적으로 일하기
*Callback Function: 함수 실행이 끝나면 다음에 실행할 일을 알려주는 함수
*Browser Web APIs: 브라우저 안에 DOM event, AJAX request, setTimeout 등 비동기 이벤트를 처리함 
(js는 싱글쓰레드의 영향을 받지않고, 독립적으로 이벤트 처리가 가능함)
*Callback Queue: Browser Web API에 있는 event가 실행되고 나면 js에서 실행할 Callback 저장하고있는 저장소
*Event Loop: Call Stack이 비어있는지를 주기적으로 확인해 Callback Queue에서  Callback Fumction을 가져와 
Call Stack에서 js코드가 실행될수록 돕는 역활을 한다.

{ js는 기본적으로 단일 스레드에 동기식 언어, 웹 브라우저나 런타임들의 도움을 받아서 비동기 작업들을 처리 할 수 있고, 멀티 스레드인 것처럼 동작할 수 있는 언어이다. }

오늘은 전에 하던 입력창에 데이터 입력시 데이터가 자동으로 저장되고 삭제버튼 마무리단계와

날씨 온도 지역 만들기

function saveToDos(){
    localStorage.setItem("TODOS_KEY", JSON.stringify(toDos));
    //JSON.stringify() 자바스크립트의 값을JSON문자열로 변환
} //toDos가 여기에 저장

*삭제버튼을 눌렀을시에 button의 부모인 li와 같이 삭제되는 코드

HTML

<ul id="todo-list"></ul>

JS

function deleteToDo(event){
    const li = (event.target.parentElement);
    li.remove(); //button의 부모인 li를 삭제
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id)); 
    //li > id를 삭제함
    saveToDos();
    
}

li에 id를 부여하고 li가 생성될때마다 새로운id생성

const li = document.createElement("li"); //li만듬
    li.id = newTodo.id;
const span = document.createElement("span");//span만듬
    span.innerText = newTodo.text;
const button = document.createElement("button"); //html에 button만듬

 li.appendChild(span); //span을 li에 집어넣음(자식)
 li.appendChild(button); //button을 li에 집어넣음(자식)

paintToDo({text:"a", id:random}) 이렇게 텍스트와 랜덤한 아이디를  object에 저장시켜주는 코드이다

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
    //(item) => console.log("this is the turn", item)
    //function을 사용하지않고 간단히 사용가능한 방법
}
//sayHello("h"); 배열추가

날씨 표시하기 (날씨, 온도, 지역)

API-KEY를 API홈페이지에서 가져온다

const API_KEY = "19777beab672c364eabbcda6461de192";

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
//navigator 네비게이터 (브라우저에 대한 정보를 가지고있는 객체)
//geolocation.getCurrentPosition 장치의 현재위치를 가져옴

위치확인을 거절할시 문구를 표시해준다

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

HTML

<div id="weather"> <!-- 날씨데이터 -->
    <span></span>
    <span></span>
  </div>

JS

날씨데이터는 꼭 세 변수의 값이 있어야한다, API-key, lat, log 세 변수 데이터를 API사이트에서 가져오고

변수 데이터를 적용시켜준다 (${lat}, ${log}, ${API_KEY}) fetch(url)을 사용해 URL을 얻는다

weather 데이터와 city데이터를 받아온후 3가지(날씨, 온도, 위치)를 표시한다.

function onGeoOk(position){
    const lat = position.coords.latitude; //경도
    const log = position.coords.longitude; //위도
    console.log("You live it", lat ,log);
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${log}&appid=${API_KEY}&units=metric`; 
    fetch(url)
    .then((response) => response.json())
    .then((data) => {
            const weather = document.querySelector("#weather span:first-child") //첫번째 자식 span 출력
            const city = document.querySelector("#weather span:last-child") //마지막 span 출력
        city.innerText  = data.name;
        weather.innerText = `${data.weather[0].main} /${data.main.temp}` ; //현재 날씨데이터를 텍스트로 변환
    }); 
    //fetch 원격 API호출하기
}