자바스크립트7

자바스크립트 심화

비동기
1. 자바스크립트 제어 흐름
자바스크립트 비동기 이해하기

자바 스크립트는 비동기 제어 흐름을 사용자에게 제공을 함.
비동기 동작을 이해해야 코드의 흐름을 따라갈 수 있다.
자바스크립트 내부의 비동기 동작을 이해하려면 이벤트 루프 등의 개념을 알아야 한다.

자바스크립트 엔진

엔진은 하나의 메인 스레드로 구성이 된다.
하나의 스레드가 엔진을 통제하는데 코드를 읽어 한줄씩 실행을 한다.
브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그림.

자바스크립트와 멀티스레드 언어의 차이점은 비동기 코드를 작성했을 때
비동기 api가 작동해서 함수를 어떤 큐에 저장하고 별도의 환경에서 동작을 하는데 10초가 지났을 때 별도의 환경, 다른 프로그램이 10초 뒤 task queue에 이 함수 종료와 동시에 콜백을 넣고 실행해야된다고 알림.
그럼 메인스레드가 task queue를 확인하고 하는 일 없을 때 실행함.

멀티스레드 언어는 코드를 만나면 새로운 멀티 스레드를 생성해 10초 지날때까지 아무 동작 안 하고 실행함.
비동기 코드를 동기적으로 실행한다고 보면 됨.

동기적 제어 흐름

현재 실행중인 코드가 종료되기 전가지 다음 줄 코드 실행하지 않는 것을 의미.
자바스크립트에서 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다. => 코드의 흐름과 실제 제어 흐름이 동일하다.
싱글 스레드 환경에서 메인 스레드를 긴 시간 점유를 하면 프로그램을 멈추게 할 수 있다. => 무한루프에 빠지는 경우.

동기 vs 비동기

동기식 제어 흐름은
10단계가 있다면 1단계가 끝나고 2단계, 2단계가 끝나면 3단계.. 이런식으로 한 단계가 다 끝나야 다음 요청이 처리 가능하다.

비동기 제어 흐름은
현재 실행 중인 코드가 종료되기 전 다음 라인 코드를 실행.
프로미스, 콜백 함수 호출하는 함수 등은 비동기적으로 실행하고 코드 흐름과 실제 제어 프름이 다르다.
비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.

2. 이벤트 루프

자바스크립트 비동기

자바스크립트 엔진은 비동기 처리를 제공하지 않지만 비동기 코드는 정해진 함수를 통해 활용하며 이것을 비동기 api 라고 한다.
setTimeout XMLHttpRequest, fetch 등의 Web api 가 있고
node.js 의 경우 파일 처리 api, 암호화 api 등을 제공한다.

타이머 비동기 처리
setTimeout(()=> console.log('타이머 끝'),1000)
타임 끝에 코드 처리
setInterval(()=> console.log('인터벌 타이머'),1000)
어떤 간격으로 코드 처리

네트워크 처리
fetch('https://google.com')
구글에 요청을 보내 응답을 받을 수 있고
.then(()=> console.log('네트워크 요청 성공.'))
.catch(()=> console.log('네트워크 요청 성공.'))
요청 성공, 실패시 promise를 이용해 처리할 수 있음.

비동기 처리 모델

자바스크립트 엔진은 메인 스레드로 구성이 되어있고 call stack을 기반으로 조작을 함.
함수를 실행하고 그 안에 함수를 호출한다면 순서대로 실행 컨텍스트가 쌓임.
비동기 코드를 호출했을 때 만약 setTimeout 을 10초 뒤에 실행하라고 하면 10초 있다가 task queue에 들어가게 되는 것임. 이때 event loop는 비동기 코드가 끝나면 메인스레드에서 모든 코드 실행이 끝나고 call stack이 비워지면 이벤트 루프를 체크하면서 태스크 큐에 코드가 남아있는지 확인하고 남아있다면 이것을 call stack에 넣고 코드를 처리함.

비동기 코드를 처리하는 모듈은 자바스크립트 엔지 외부에 있으며
이벤트 루프 (event loop) 태스크 큐 (task queue) 잡 큐(job queue) 등으로 구성된다.
api 모듈은 비동기 요청을 처리 후 태스크 큐에 콜백 함수를 넣으며
자바스크립트 엔진은 콜 스택이 비워지면 태스크 큐의 콜백함수를 실행한다.
자바스크립트 엔진 외에 api 모듈, 비동기 코드를 처리하는 모듈이 함께 동작한다.

3. promise

promise API 는 비동기 API
태스크 큐가 아닌 잡큐 (job queue, 혹은 microtask queue)를 사용한다.
잡 큐는 태스크 큐보다 우선순위가 높다.

setTimeout(() => {
    console.log("타임아웃1");
},0);

Promise.resolve().then(()=> console.log("프로미스1"));

setTimeout(() => {
    console.log("타임아웃2");
},0);

Promise.resolve().then(()=> console.log("프로미스2"));


=> 프로미스1 프로미스2 타임아웃1 타임아웃2

promise는 비동기 작업을 표현하는 자바스크립트 객체이며
비동기 작업의 진행, 성공, 실패 상태를 표현하고
비동기 처리으 순서를 표현할 수 있다.

상태는 new promise 로 만들 수 있고
facth 를 활용할 수도 있다.

바로 실행되면 pending 상태가 되고 성공 실패를 표현할 수 있다.
pending은 진행되는 상태를 말하고
성공되면 resolved
실패되면 rejected

성공과 실패를 합쳐 settled 라고 함.
성공의 경우 than () 메서드 호출
실패의 경우 catch () 메스드 호출

than의 경우 성공시 실패시 코드 넣을 수 있고
성공 콜백만 넣을 수도 이싿.

promise 생성자

new promise(callback)
callback 함수는 resolve, reject 두 인자를 받는다.
콜백함수의 경우 두 인자를 받아서 내부에서 직접 호출함으로써 성공 실패를 조작할 수 있다.
then() 메서드에 성공했을 때 실행할 콜백함수를 인자로 넘기고
catch() 메서드에 실패했을 때 실행할 콜백 함수를 인자로 넘긴다.
filally() 메섣는 성공 실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
then(callback1, callback2)로 처리할 경우 1은 성공했을 때, 2는 실패했을 때 인자로 넘긴다.

promise 메서드 체인

메서드가 줄줄이 이어지는 것.
then catch 메서드가 또 다른 promise를 리턴하여 비동기 코드에 순서를 부여함.
동일한 객체에 메서드를 연결할 수 있는 것을 체이닝(chaining)이라 함.
함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 구현한다.

new Promise()를 생성했을 때 이 생성자는 객체를 초기화하고 인스턴스를 리턴한다.
내부적으로 return this 가 생략되어 있는 것
.than 도 내부적으로 생략되어 있는 것. 자기자신을 계속 리턴하는 함수들이 있기 때문에
그 객체에 있는 메소드가 호출이 될 수 있는 것
항상 promise 리턴을 하는 것이 아님

promise.resolve 와 promise.reject

프로미스에는 정적인 메서드가 존재함
Promise.recolve 는 성공한 프로미스 객체를 반환한다.
Promise.reject 는 실패한 프로미스 객체를 반환한다.
인위적으로 프로미스 메서드 체인을 만들 수 있는 것.
비동기 코드로 진행해야하는 상황 등에 유용하게 사용 가능.

Promise.all

프로미스의 배열을 받아 모두 성공 시 각 프로미스의 resolved 값을 배열로반환한다.
하나의 promise라도 실패할 경우 가장 먼저 실패한 promise 의 실패 이유를 반환한다.

4. async/await
5. http,rest api
6. fetch api