section27-비동기식 JavaScript

 

Topic	explain	class
The Call Stack	책을 읽을 때 손가락으로 짚어가는 행위와 비슷하다. 콜스택을 설명하기 앞서 스택은 이전에 언급했던 배열의 push, popm shift,unshift와 같다. 스택은 컴퓨터 과학의 기본 데이터 구조이다. 후입선출(LIFO) 데이터 구조로 알려져 있다. - 팬케이크  콜 스택은 JS가 사용하는 메커니즘이다. 여러 함수를 호출하는 스크립트에서 해당 위치를 추적한다. ...(많은 내용이 생략) 코드를 통한 함수 표현 콜 스택의 함수 호출 표현	콜 스택(Call Stack)
		loupe Site :  http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D
	디버깅을 통해서 콜 스택의 움직임과 변동을 확인 할 수 있다.
JS is Single Threaded	JS는 일을 하나씩 밖에 못한다.  하지만 최대한 한 번에 한줄씩만 집중하고 실행할 수 있다고 해도 해결할수 있는 방법이 있다. setTimeout(~)을 예시로 보면하면 된다. 왜 setTimeout을 기다리지 않고 아래 log가 실행이 될까? JS가 단일 쓰레드이면 모두 멈추고 setTimeout을 기다려야 하는 거 아닌가? -왜 이러는지 작동원리를 보자 JS는 코드일뿐 실행하고 있는 브라우저를 보아야한다. 브라우저가 무엇이 되었든 (대개는 C++로 이루어지고 작성되어져 있다.)브라우저는 JS가 할 수 없는 것들을 한다. 따라서 JS는 실제로 브라우저가 처리할 수 있는 특정 작업을 넘긴다. 그 특정 작업이 바로 WebAPIs라는 것이다. WebAPIs는 JS를 통해 브라우저로 전달된다. (여기서 JS가 수행하지 못하는 것은 브라우저에게 요청한다. 이런 일은 배후에서 일어난다.) JS의 콜 스택에 WebAPI 함수(setTimeout)라는 것을 인식하고 브라우저로 전달 그리고 바로 JS가 할 수 있는 동작(명령어)을 수행한다.	WebAPI와 단일 스레드
CallBackHELL	-	Callback이란 지옥 :(
ENTER PROMISES	Promise는 어떤 연산, 비동기 연산이 최종적으로 완료 혹은 성공했는지 실패했는 알려주는 객체이다. fakeRequest를 통해 구조만 보았을 땐 실패와 성공의 두 갈림길로만 보인다.	Callback을 사용한 fakeRequest
	Promise는 하나의 객체이다.최종 값이나 작동여부에 대한 약속이다.	Promise를 사용한 fakeRequest
	Promise의 상태를 하나씩 살펴보자	자신만의 Promises만들기
	new Promise((resolve, reject) => {   resolve(); })//fullfiled new Promise((resolve, reject) => {   reject(); })//Uncaught (in promise)  new Promise((resolve, reject) => { })//pending
	가자 Request를 통해서 Promise를 사용했다. 코드를 읽어보고 분석해보자
	const fakeRequest = (url) => {   return new Promise((resolve, reject) => {     const rand = Math.random();     setTimeout(() => {       if (rand < 0.7) {         resolve('YOUR FAKE DATA HERE');       }       reject('Request Error!');     }, 1000)   }) } fakeRequest('/dogs/1')   .then((data) => {     console.log("DONE WITH REQUEST!");     console.log("data is: ", data);   })   .catch((err) => {     console.log("OH, NO!", err)   })
ASYNC FUNCTIONS	비동기 : 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있다는 것을 의미합니다. 비동기 함수 : 비동기 코드를 아주 깔끔하게 정리하는 코드이다. Promise와 밀접하게 사용하기 때문에 잘 알아두면 좋다.	비동기 키워드
	Async : 함수를 비동기 함수로 선언하는 키워드, 함수 앞에 작성을 한다. Async를 사용하면 자동적으로 promise를 반환한다.(직접 retrun같은 구문을 사용하지 않아도 암묵적으로 반환한다.)
	throw
	const login = async (username, password) => {   if (!username || !password) throw 'Missing Credentials';   if (password === 'rdwoo') return 'Welcome'   throw 'Invalid Password'; } login('fdfadf')   .then(msg => {     console.log("Logged in!")     console.log(msg);   })   .catch(err => {     console.log('ERROR!')     console.log(err);   }) 여기서 msg의 모양과 모습이 아이러니했다. 알고 봤더니 =>{}안에 함수가 실행된 후의 반환값이 msg에 값이 되는 것이다.
	Await : 비동기를 동기적으로 보이게 한다.	대기 키워드
	async function rainbow() {   await DelayedColorChange('red', 1000);   await DelayedColorChange('orange', 1000);   await DelayedColorChange('green', 1000);   await DelayedColorChange('yellow', 1000);   await DelayedColorChange('#006d77', 1000);   await DelayedColorChange('violet', 1000);   return console.log("ALL DONE"); } // rainbow().then(() => console.log("END OF RAINBOW!")) async function printRainbow() {   await rainbow();   console.log("END OF RAINBOW!"); } printRainbow();
	Async의 Error 잡기 : try,catch	비동기 함수의 오류 처리하기
	async function makeTwoRequests() {     try {         let data1 = await fakeRequest('./page1');         console.log(data1);         let data2 = await fakeRequest('./page2');         console.log(data2);     }     catch (e) {         console.log("CAUGHT AN ERROR!");         console.log("error is : ", e);     } }