18일차 자바스크립트 fetch함수
①자바와 자바스크립트 차이는??
자바는 클래스만 메모리에 올릴수 있다. 그래서 메서드 올리고 싶으면 클래스로 감싸야한다.
스레드는 메인 메서드 스택안에 있어서 메인 메서드 스택이 열려야 시작되고 닫히면 끝난다.
메서드는 호출되고 메모리 스택이 열린다. 메서드 안에서 변수 만들면 실행시점에 생기고 메서드 끝나면 없어진다. 그래서 외부에서 그 변수를 불러올수 없다.
자바스크립트는??
클래스로 메서드를 감싸지 않아도 된다.
1급 객체 메모리에 로드될수 있는 애
=최상위에 적을수 있는 애 모든 애들이 다 객체이다. 독자적으로 메모리에 띄울수 있다.
자바스크립트는 모아두고 싶으면? function에 또는 변수에 모아둔다.
for문도 자바스크립트에서 1급 객체, 변수들도 1급 객체, function도 1급 객체
메모리에 뜰 수 있는 모든 1급 객체는 메서드로 전달할 수 있다.
forEach(함수) => 어떤 행위(함수)를 할지 사용자에게 결정권을 주는 것
예일드라는 문법!
next( )메서드로 전달하여 반환한다.
101이 new_data에 전달되고 끝이 아니다! 스트리밍이라고 한다.
그리고 next 해서 102가 전달,,,그리고 next 103이 전달...
이렇게 사진을 스트리밍해서 전달하는게 영상이다!!!!!!!!!
let component_list=["","","",""]; 이런식으로 해서 배열 안에 css가 있다고 하면 return이 있는 반복문인 map을 통해 자바스크립트에서 호출해서 그림그려지도록 할 수 있다
▶익명함수와 화살표 함수
자바스크립트 let,var,const 차이
호이스팅
:메서드가 종료되면 지역변수 날라가야하는데 자바스크립트는 호이스팅 특성이 있어서 안날라감
이 모든걸 let, 화살표를 사용하면 된다!!
OS operation system 운영시스템
장점:
동적실행이 가능하다, 코드 삽입을 안해도 되고 동적으로 내가 원할때마다 날려주면 된다.
GUI (graphic user interface) - 예를들어 이 그래픽을 클릭하면 피파 게임이 실행된다
콜백???
버튼 클릭하면?? OS가 인식하게 된다! 버튼 클릭되었을 때, OS가 뭘 해야하는지 알려줘야한다.
버튼1 클릭되었다면?? Queue에 버튼1이 들어온다.
인스타 프로그램 내부 함수의 스택 공간에 코딩을 해놓고 버튼이 클릭되면 해당 함수를 때려라!(①리스너 등록 : 알려주기)고 OS에게 알려줘야한다. 자바스크립트에서는 바로 이 함수! 를 알려줄수 있다(자바에서는 불가능. 클랙스 객체를 알려줘야함. A라는 클래스를 알려주면? 근데 그 클래스 안에 A,B함수가 있다면 어떤 함수 때려야하는지 모른다!=> 자바는 리스너 등록할때, 해당 객체 안에 action()이라는 함수를 무조건 때린다고 정해놓았다!!!!!근데, action함수를 안만들어놓을수 있으니... 인터페이스를 만들어놓는다)=> Interface Hello{ void action(); } 이렇게 인터페이스 타입을 맞춰서 넘겨야한다.
②이벤트 등록 : 스택을 구현하는 것
③콜백 : 액션을 때려주는것
<비동기>
OS는 하는일이 많다. 그 중에서 큐를 짬짬이 확인한다. Time slice해서 스레드로 왔다갔다 하면서 확인
버튼2 클릭하면? 큐에 리스너가 등록되고 이벤트 실행하는걸 스레드가 실행하고 다른 스레드는 버튼1 클릭하는걸 실행한다.
큐에 들어있는 이벤트 실행은? 하나의 큐를 살펴보는건 하나의 스레드가 관리하다. 버튼1에 연결된 함수가 때려지는건 스레드2가 한다. 버튼2에 연결된 함수가 때려지는 건 스레드3이 한다.
이벤트만 확인하는 스레드?? 이벤트 루프 스레드!!
Promise(자바스크립트)
Future(자바) -비동기 프로그램 짜기
싱글스레드 : 자바스크립트
멀티스레드 : 자바서버
이벤트 100개라고 하자.
이벤트 루프(큐)에 이벤트가 차곡차곡 쌓인다. 왜? CPU가 다른일 할게 많을때 !
이벤트 클릭할때마다 큐에 들어온다.
이벤트2는 CPU가 일해야하고 3초걸림
이벤트1은 메모리가 일해야하고 1초걸림
이벤트3은 메모리가 일해야하고 2초걸림
이제 싱글스레드가 안바빠졌다고 하자. 버튼1 클릭해서 이벤트1 메모리가 실행한다.
버튼2 클릭하면? CPU가 3초동안 일한다. 그러면 3초 대기!!!!!!
버튼3 클릭은 바로 못함. 3초 후에, 버튼 클릭해서 메모리 실행만 시켜놓는다.
버튼1,버튼3번은 1초,2초 있다가 결과가 들어온다.
만약 버튼1-이벤트1 이후에 이벤트3이 실행되어야한다면?? 이벤트1 실행되는 1초동안 await하도록한다.
실행시키는건 다 메모리가 일할거다!!!!!!!!!
이제 내가 캐치해야하는건? 완료된 시점을 잘 캐치해서 콜백하면 된다!!!!
자바로 멀티스레딩하면 사용자 요청때마다 스레드가 발생하니까 context 교환이 너무 많이 일어난다!!!!!!! 즉, 느려진다.
싱글스레드로 돌아가는게 가장 최적화되어있다!! non-blocking i/o
Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjb3PthqDtgbAiLCJpZCI6MSwiZXhwIjoxNjI2MjUxOTM5fQ.9MjFaHDU3vZgV4VKZhXEAkf7BEAUPZY8vV9bExBJ3loEZIRzyJN01-T9U2iEZh3zRMQqQg5mEhHfI69jNse3CA
이 토큰을 가지고
▶
▶
fetch함수
비동기적 실행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// async 비동기함수!!!!
async function login() {
//fetch 하면 바로 응답이 되는데, 처음 값이 null값이다.
//일단 null로 놓고 나중에 데이터 완료되면 내가 넣어줄께!!
//이게 promise<response>이다. fetch라는 함수가 해줌(메모리가 해줌)
let loginDto = {
username: "ssar",
password: "1234"
}
//메모리가 fetch라는 함수 실행할때 block한다 누구를 CPU를!! 그리고 완성된 데이터를 돌려주고 실행됨
//사실 block이 아니라!! non-block이다!! 이떄 노는 cpu가 다른 함수들을 실행하게 된다(비동기실행)!!!
let r1 = await fetch({
url: "http://192.168.3.101:8000/login",
//자바스크립트를 json으로 바꿔준다.
body: JSON.stringify(loginDto),
//데이터를 쥐고 갈거면 어떤 데이터타입인지 알려줘야한다!
headers: {
"Content-Type": "application/json; charset=utf-8"
}
});
console.log(r1);
}
console.log("나무그리기");
</script>
</body>
</html>위 코드는 오류남
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// async 비동기함수!!!!
async function login() {
//fetch 하면 바로 응답이 되는데, 처음 값이 null값이다.
//일단 null로 놓고 나중에 데이터 완료되면 내가 넣어줄께!!
//이게 promise<response>이다. fetch라는 함수가 해줌(메모리가 해줌)
let loginDto = {
username: "ssar",
password: "1234"
};
//메모리가 fetch라는 함수 실행할때 block한다 누구를 CPU를!! 그리고 완성된 데이터를 돌려주고 실행됨
//사실 block이 아니라!! non-block이다!! 이떄 노는 cpu가 다른 함수들을 실행하게 된다(비동기실행)!!!
let r1 = await fetch("http://192.168.3.101:8000/post");
console.log(r1);
}
login();
console.log("나무그리기");
</script>
</body>
</html>다음 json 으로 파싱하는 코드 추가하자.
결과는???
▶삭제하기!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>삭제하기</title>
</head>
<body>
<button onclick="deleteById()">삭제하기</button>
<script>
async function deleteById() {
let r1 = await fetch("http://192.168.3.101:8000/post/13",{
method : "delete"
});
let r2=await r1.json();
console.log(r2);
}
console.log("나무그리기");
</script>
</body>
</html>
▶수정하기!!!
▶글쓰기!!
