[자료구조]stack & queue (브라우저 동작원리),event loop

자료구조공부에 앞서 브라우저의 동작원리를 알아두면 좋을것같아서 정리한다.

브라우저 이놈들...컴퓨터놈들...사고방식 자체가 우리와는 다릅니다. ㅠㅠ

 

웹브라우저?

자바스크립트 코드짠거 실행해주는 엔진! 자바스크립트 해석해주는 애들이다.

 

웹브라우저 내에는

 

Stack이라는 공간이있다. 한줄한줄. 스택이라는 공간안에 집어넣고 실행을 시켜준다.

 

 

나는  스택!

(아래 캡쳐본들은 유튜브에 코딩애플 인강을 들으며 캡쳐한것입니다)

코드를 실행할때 변수같은것을 만난다.

Heap 이라는 공간에 변수들이 저장이되어있다. (heap은 이전에 reference 복사에서도 배웠던 개념이다!)

스택은 한개밖에없다. 한번에 코드 한줄밖에 실행을 못한다 =single threaded 언어다 (전문용어로 표현한것)

근데 위에 비동기에서 봤던 set Time out같은 함수 <- 뭐야!!

그래서 이런것들은 스택에서 처리하지않는다.

(전지적 스택입장 : 1초후 실행할텐데 자리 차지하는꼴은 못보지 ^^ 꺼져!)

 

얘는 그래서 대기실에서 기다린다.

 

대기실보내는 코드 : 위에서 봤던 비동기처리 예들 <- 기다림이 필요한 코드들은 대기실행

• AJAX요청(서버에데이타받는데 시간걸림)
• 이벤트리스너(버튼누를때까지 기다림 시간걸림)

이후 대기끝난애들을 또 어떤 공간에 담는데 이것이 큐!

(영국서 유학할때 처음들어본 단어이고 한국와서 들을일이 없었는데 너무 친근하다 ㅋㅋㅋ)

반가워 나야  큐

 

조건이있다.

 

스택이 텅~~! 비어있을때만 큐가 스택으로 코드를 올려보낸다.

 

 

 

 

자바스크립트 어려운 연산을 시키면. 그다음에 이벤트는 대기실로가버리고 스택이 비워질때까지 계속기다린다.

 

 

\

 

 

그래서 교훈?

 

스택을 바쁘게 코드를 만들면 안된다. => 사이트 버벅임

큐를 바쁘게 하면 안된다. 

 

자바스크립트 동기 비동기?  <= 위 브라우저 작동원리를 생각해서 공부하면 이해가 더 빠르다

 

자바스크립트는 동기적처리를 하는데 가끔가다 비동기적 처리를 하는것

---

Recap!

자바스크립트에는 비동기처리라는 개념이있다.

 

동기식 처리(synchronous)와 비동기식처리(asyncrhonous)

그냥 자바스크립트는 오래걸리는 연산을 만나면 멈춘다. => 동기식처리 

WEB API와 연관된 특수한 함수(eventListner, setTImeout 등등)들을 쓰면 작업이 오래걸릴때 다른것부터 실행이 가능하다. => 비동기식처리

 

비동기식 처리의 대표적인 예?

 

비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax~! =>  

또 다른 비동기 처리 사례는 setTimeout() 

 

비동기 처리의 문제점 해결

 

콜백함수사용 -> 콜백지옥 -> 포르미스 사용 -> async await 사용 등으로 현재는 마지막 async await을 가장 많이 사용.