[21.08.11] 비동기 프로그래밍2

- 브라우저의 동작원리

https://d2.naver.com/helloworld/59361

1) 렌더링 엔진

렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성한다.

 

렌더트리를 통해 우리가 보는 화면이 된다.

 

기본적으로 코드는 동기적, 순차적 (좌 -> 우, 위 -> 아래)

자바스크립트 해석기보다 렌더링 엔진이 먼저있기 때문에 스크립트 만나면 렌더링 엔진 중단한다

 -> 바디태그의 하단 또는 헤더에 넣을경우 'defer' 속성 넣어주기 

 

2) 자바스크립트 엔진(해석기)

- 싱글스레드 기반의 non-blocking

- 비동기 프로그래밍 : 다른 업무를 기다리지않고 진행한다.

- Callback함수의 두가지 의미

  -> 이벤트 발생시 호출되는 예약함수 

     : 클릭 이벤트시 호출될 함수를 등록한다. (=콜백함수 등록)

      그리고, 클릭 이벤트 방생시 등록된 호출함수가 호출된다.

  -> 일반 함수의 Parameter로 등록되는 함수

     : test(1, run) 자바스크립트의 함수는 'object 값' (원시값 x)

Sync 동기	Async(Asynchronous 비동기
특정 동작이 끝난 이후, 다른 동작을 수행하기 시작함	1. Callback 함수 등록 처리( 호출하지 않음) 2. 다른 동작을 수행  -> 내부적으로 다른 동작을 수행하면서도,      지속적으로 Event가 발생했는지 감시 3. 특정 이벤트 발생시, Callback함수 수행됨

- Promise (비동기 작업을 좀더 편하게 할수 있도록 도입)

 -> new Promise((reslove,reject) => {});

pending 상태 - 대기	fulfilled 상태 - 이행	rejected 상태 - 실패
resolve나 rejected가 실행되기 전	resolve호출 시	reject호출 시

- async await 

 -> promise를 잘 쓰기위해 사용

 -> async는 함수 앞에 위치/ await는 함수 내부에 위치

 -> promise를 반환

 

비동기의 역사
setTimeout(callback hall)
-> promise (then..then...)
-> async/ await -> ~~ -> ~~

비동기 "통신의 역사"
XMLHttprequest
-> fetch
-> axios

 

- axios

 -> 가장 널리 쓰이는 http 통신 라이브러리

 - Vue/React에서도 권고 라이브러리로 axios가 지정됨

 - Promise형태 리턴

 - 사용에 편리