SeSac (2021-08 ~ 2021-12)/JS

deep dive Promise, Generator, async/await

배워도끝이없네 2021. 11. 2. 21:04

디바운스 쓰로틀은 무조건 알고가기!

 

자원의 20%는 항상 미래를 위해 써야한다! (10시간 업무중 2시간은 미래를 위해 사용해야 한다)

 

이벤트루프라는것은 계속 도는것이다.

 

비동기프로그래밍의 핵심은 마이크로테스크큐와 이벤트루프이다.

 

JS는 싱글스레드이다.

 

현재 실행되는 스래드를 thread local이라고 한다.

 

싱글쓰레드는 프로세스 하나에 쓰레드 하나만 쓰기 때문에 빠르다.

 

동접자가 많은 서비스는 싱글쓰레드를 선호한다 (이유 : queue를 빨리 비워주는게 좋기 때문에)

 

모든 비동기는 Promise로 되어있고 Promise는 iterator이다.

 

Promise로 짜면 비동기라 하고 그렇지 않으면 동기라고 한다.

 

비동기는 I/O에서 일어난다 (input output)

 

input (Write) / output (Read)

 

모든 언어들은 stream이라는것을 쓴다 그래서 inputStream , outPutSream

 

바이너리는 이미지, 음악 등등...

 

캐릭터는 a,b,c,d ..문자열

 

inputStream으로 디스크에 쓴다

 

outputStream으로 디스크에서 읽어온다.

 

stream도 대표적인 비동기다. 모든네트워크는 stream을 이용하기때문에 네트워크통신은 비동기라 할 수 있다.

 

res.download를 쓰면 새탭이 열리지 않고 바로 다운로드할수 있도록 프로토콜을 보내는것이다.

 

보통 콜백에서 왠만한 첫번째 인자는 err이다.

 

f1(){
	x= f2();
    y= f3(x);
}


f2(username=>{
	f3(username,(err,results)=>{
		if(err) throw err;
        
        res.json(results);
    });
}) //콜백지옥..

 

콜백으로짜지 않고 Promise로 짜면 더 빠르게 실행할수있는이유 => Promise는 MicroTeskQueue를 이용하기때문.

 

then을 사용하기위해서는 Promise클래스에 사용해야한다.

 

Promise란 클래스는 resolve라는 함수와 reject라는 함수를 리턴한다.

 

Promise.all 은 [f1,f2,f3] 배열속 요청을 병렬적으로 보낸다. 그리고 모든 요청이 fulfilled상태이면 그때 반환한다.

Promise.allSettled는 중간에 reject가 되어도 반환한다.

 

----------------------------

 

generator는 속에서 iterator이다.

iterator는 속에서 next라는 함수를 제공한다.

next는 value와 done을 리턴한다.

 

generator는 끝까지 도는것이 아니라 필요한 만큼까지만 돌고 끝나기 위해서 필요하다.

 

제너레이터는 *를 붙여쓴다 (function* f(){});

*가 붙은 함수에서는 yeild를 사용할 수 있다.(양보하기)

제너레이터가 붙은 함수는 yeild가 붙은 함수까지만 실행하고 caller에게 다음 실행을 양도한다.

 

function * f(){
	yeild 1;
    
    yeild 2;
}

const x = f(); //yeild 1까지만 실행됨.

x.next(); // yeild2가 실행됨

 

generate는 실무에서 많이 쓰지는 않지만 이것으로 인해 async/await이 구현 가능해졌다는 점에서 의미가 있다.

 

function* f(){
	const x = yeild(1);
    const y = yeild(x+1);
    return x+y;
}

fx = f();
const a = fx.next(); //여기에는 아무리 변수를 주어도 의미가 없다. 
const b = fx.next(10); //여기서 10을받는 변수는 f속의 const x가 된다.
const c = fx.next(100); // 여기서 100을받는 변수는 const y이다. return되어 110이 반환

*대신 async를 사용하고  yeild대신 await을사용해 비동기를 처리할 수 있다.

 

제너레이트 함수의 가장 취약한점은 에로우펑션과 생성자함수를 사용할 수 없다. 그래서 async await을 사용하는것이 장점이다.

 

async await사용시 

 

suspend할때 찍어보면 proxy라고 말이 나오면서 에러가뜨는데 이런거가 뜨는건 아직 넘긴 로직이 프록시를 통과해 로직을 넘기는데

 

아직 로직이 끝나지않고 반환되지 않았다는 의미이다.(미완료)

 

async함수에서 return에 await를 바로 리턴해버리면 micro tesk queue에 들어가기 전에 return되어버리기때문에 정상적으로 작동되지 않는다.

 

기존 Promise로 구성된 함수를 async로 재구성할때 만약 상위함수에 async를 걸 수 없다면

 

내부 로직을 함수로 감싸고 async를 가진 즉시실행함수로 실행하는 방식으로 리팩토링을 진행하면 된다.

 

'SeSac (2021-08 ~ 2021-12) > JS' 카테고리의 다른 글

deep dive DOM EVENT  (0) 2021.10.30
deep dive 브라우저의 랜더링 과정  (0) 2021.10.30
deep dive Set & Map  (0) 2021.10.28
스프레드 연산자 / Distructuring Assignment  (0) 2021.10.26
deep dive Array / Number /  (0) 2021.10.23