동기 비동기
동기:
동기적인 작업 흐름은 앞의 작업이 끝날 때까지
뒤는 작업을 진행할 수 없다.
비동기:
비동기는 그냥 완료되는 대로 순서가 없다
동기는 waiting의 개념이 있고
비동기는 waiting의 개념이 최소화로 있다.
비동기함수는 동기적인 함수들이 다 실행되고
시작하는 특징이 있다. 무조건!
ex) setTimeout(비동기 함수)으로 0초를 설정해놔도
비동기코드는 동기코드가 실행되고 나서 실행된다.비동기 방식을 사용할 때 콜백 함수나 프로미스를 사용한다.
즉각적으로 실행되는 코드는 blocking이라고 말하지 않는다.
자바스크립트는 Non-Blocking i/o 를 가진 비동기를
지원하는 언어다.
Non-blocking:
시간 소요 & 비동기처리면 논블로킹
blocking:
시간 소요 & 동기처리면 블로킹
이벤트 루프는 브라우저가 가진 비동기 처리 역할을 하는
Queue 통로
i/o 는 시스템 input / output을 뜻한다.
Web Api들은 Call Stack안에 바로 쌓이지 않는다
사용자가 정의한 함수는 Call Stack에 쌓인다.
Web Api들은 별도의 공간안에 쌓이게 된다.
거의 대부분 비동기 함수들은 Web Api를 이용한다
(fetch , setTimeout)
그 때 Task Queue안에 들어가게 된다.
거기서 이벤트 루프가 Call Stack이 비어있나 여부를 본다.
그래서 동기적인 코드가 실행되고, setTimeout의 콜백함수가
동기적인 코드가 실행되고나서 실행된다.
Promise, async/await
비동기 프로그래밍은 자바스크립트에서 매우 중요한 개념인데
비동기 프로그래밍 하지 않으면 원하는대로 만들 수 없다
Promise는 작업에 대한 약속인데
대기, 성공, 실패이다
성공했을 때 와 실패했을 때 무엇을 해줄건지 분기처리를 하려면
상태가 있어야 한다. 그래서 총 3가지 상태 대기 성공 실패가 있다.
그래서 Promise에는 resolve와 reject라는 콜백함수를 가지고 있다.
promise에서 then을 함께 쓰는데
then은 약속한 작업을 이행하고나서 라는 뜻이다.
이행된 결과를 then의 매개변수로 받고 결과를 다시 받아준다.
프로미스 생성은 new Promise를 통해 new Promise라는 class를 생성한다.
인자로 넣는 생성자 함수를 excuter 라고 한다.
어쨋든 중요한건 함수를 받는데 resolve와 reject를 받는다.
.fetch에 .then을 쓸 수 있는 Promise라고 할 수 있다 (console에 속성을 확인하면 Promise가 나온다)
그러나 setTimeout는 비동기 함수이지만 Promise가 아니다.
모든 비동기 함수가 Promise다? 그건 절대 아니다!
Promise는 약속된 작업을 이행하는데 이건 동기적으로 실행된다.
그러나 Promise를 사용할 때 이것이 비동기적으로 실행된다.
성공하면 => 무엇을 하겠다
실패하면 => 무엇을 하겠다
이런 콜백 함수가 비동기적으로 실행되는 것이다.new Promise(동기함수)
.then(비동기함수) / .catch(비동기함수);Promise의 생성함수는 동기다
Promise를 사용하는 함수가 비동기다
console.log("1");
new Promise((resolve, reject)=>{
console.log('2')
resolve('3')
})
.then(result => console.log(result))
.catch(err=>console.log(err));
console.log("4");아래의 실행순서는? 1243이다
위에서 아래로 차례차례 오면서 new Promise 안의 console.log는
생성함수이기 때문에 동기적으로 작동한다
그러나 resolve는 Promise안의 비동기 함수 부분이다.
따라서 마지막의 4가 먼저 실행되고나서 동기적인 부분들이
모두 끝났을 때 마지막 비동기 함수가 실행된다 그래서 1243이다.
Promise는 대기 이행 거절로 실행하고
Promise의 생성함수는 동기고,
Promise를 핸들링하는 함수는 비동기함수다.
async / await
프로미스를 더 간단하게 사용할 수 있게 해주는데 둘 다 거의 똑같다.
그래서 이걸 syntax sugar, 문법적인 설탕이라고 합니다.
.then의 resolve의 값을 뽑아 쓰고 싶다면
await를 써서 뽑아내서 써야하는 수 밖에 없다.
왜? await로 동기적으로 뽑아낼 때 까지 만들어줘야 하기 때문에
Promise all은 서버 상황에 따라서
예를 들어 fetch를 2개 썻다고 가정하면
fetch 두개가 모두 스타트가 동시에 시작된다 (서버 상황에 따라 다름)
그런데 먼저 끝나는 작업이 있다 => 둘이 크기가 동일하지 않기 때문에
그리고 배열 형태로 객체를 담아서 가져온다.
Promise all을 이용하면
요청을 5번 보낼 걸 한번에 다 처리할 수 있게 만들 수 있다.
최대한 빠른 요청을 이용하기 위해 사용하는 경우도 있다.
URL 네트워크 요청
도메인은 기계한테는 ip 주소를 가리키고 있는 것
(사람이 읽을 수 있는 주소로 보일 뿐)
경로를 알아야지 내가 api의 주소를 들어갈 수 있다.
그리고 추가적인 요청을 필요로 할 때
Query string을 확인해보면 된다.
?query=string 으로 디테일한 요청을 할 때 사용한다!
만약 2개 이상의 디테일한 요청이 있다면
?key1=value1&key2=value2처럼 &을 두고 요청 1 , 요청 2를 요구한다.
fetch의 옵션은 지금까지 get만 사용했지만,
POST나db에 뭔가 추가하거나 수정 , 삭제 할 때
