20. HTTP/JASON/AJAX/Asychronous Javascript

HTTP/JSON/AJAX/+Asynchronous Javascript

240.HTTP/HTTPS

클라이언트와 서버 사이/ HTTP 프로토콜/ 언어?
하이퍼텍스트 트랜스퍼 프로토콜

웹브라우저가 http를 사용하여 request 요청
서버는 html로 responsd

http는 server와 연결할 수 있게 해 준다.

클라이언트(웹브라우저 이용)의 메시지 요청
서버 respond

*request
1) get : 가져오기 요청
2) post : add
3) put : update? edit?
4) delete : 삭제

*response
1)http status messages (status code)
-2xx successful
-4xx client error
-5xx server error
2)sort of data

example.com
query strings or body

HTTPS encrypt/ transport layer security or TLS or SSL 사용

241.JSON

text data만
자바스크립트 오브젝트 data는 어떻게 보낼까?
JASON : javascript object notation

• a syntax for soring and exchanging data
  a text,written with javascript object notation

XML(html 비슷) vs JASON (js object 비슷)

jason이 대세

프론트엔드- html/css/javascript
백엔드 - 여러 프로그래밍 language

JASON.parse() : JASON을 오브젝트로 바꿔서 클라이언트에 전달가능
JASON.stringify() : 오브젝트를 JASON으로 바꿔서 서버에 전달가능

242.AJAX

리로딩 없이 페이지를 보여줌

fetch API, HTTP, JSON의 콤비네이션

XML, HTTP request

fetch('/my/url').then(response=>{console.log(response);})

JSONVies chrome extension

243.Promises

fullfilled
rejected
pending

247 . Async Await

movePlayer(100, 'Left')
	.then(()=>movePlayer(400,'Left'))
    .then(()=>movePlayer(10,'Right'))
    .then(()=>movePlayer(330,'Left'))

async function playerSart(){
	const firstMove = await movePlayer(100, 'Left');
   		await movePlayer(100, 'Left');
        await movePlayer(100, 'Right');
        await movePlayer(10, 'Right');
        await movePlayer(330, 'Left');
        
        }

fetch('https://jsonplaceholder.typicode.com/users')
	.then(res=>res.json())
	.then(console.log)

비동기적

async function fetchUsers(){
	const resp = await fetch('https://jsonplaceholder.typicode.com/users')
	const data = awiat resp.json();
    console.log(data);
    
    }

동기적처럼 보임

const urls = [
'https://jsonplaceholder.typicode.com/users',
'https://jsonplaceholder.typicode.com/posts',
'https://jsonplaceholder.typicode.com/albums'
]

Promise.all(urls.map(url=>fetch(url).then(res=>res.json())
)).then(array=>{
console.log('users',array[0])
console.log('posts',array[1])
console.log('albums',array[2])
}).catch('oops');

const getData = async function(){
try{

    const [ users, posts, albums] = await Promise.all(urls.map(url=>fetch(url).then(res=>res.json())
    ))
    console.log('users',users)
    console.log('posts',posts)
    console.log('albums',albums)
    
    } catch (err){
    console.log('oops', err);
    }

}

249. ES9

//Object spread operator

const animals = {
  tiger: 23,
  lion : 5,
  monekey : 2
}

const {tiger,...rest} = animals;

 const array= [1,2,3,4,5]
 function sum(a,b,c,d,e){
 return a+b+c+d+e};
 
 sum(...array)

+보충 자바스크립트 최신문법 ES6-ES11
드림코딩 by 엘리

25. ES9(ES2018)

//finally
성공하든 실패하든 쓸 수 있음

//for await of

Promis.allsettled 는 resolve reject신경쓰지 않음