p209-233
후 .. 진도가 많이 밀려있다
공부해야할 시간도 길어지고
직접 콘솔창에 찍어보면서 공부하고 있다
요번주안에 진도 따라잡는것이 목표
조금더 부지런 해져야겠다
호출 스택과 이벤트 루프
- 호출 스택은 동기코드를 담당
- 이벤트 루프는 비동기 코드를 담당한다
동기코드란 = 직렬적 방식 , 앞선 작업이 끝난 후 다음 작업이 시작됨
비동기 = 병렬적 방식 , 앞선 작업이 끝나지 않았는 데도 다음 작업이 실행됨
ex ) Web API , setTimeout ,Ajax ,
백르라운드와 태스크 큐
1. 백그라운드
는 타이머를 처리하고 이벤트 리스너를 저장하는 공간
setTimeout () 과 같은 타이머 함수가 실행되면 백르라운에서 시간을 재다가 지정된 시간이 되면 콜백함수를 태스크 큐로 보냄
콜백 함수란 함수의 인자로 전달되는 함수로, 다른 함수의 작업이 완료된 후 호출됩니다. 이러한 콜백 함수는 자바스크립트에서 비동기 작업을 처리하는 데 주로 사용되며, 이벤트 리스너, 타이머 함수 및 AJAX 요청과 같은 다양한 상황에서 사용됩니다
2. 태스크 큐
실행될 콜백함수들이 대기하는 공간
직접 실행하지는 않고 호출 스택에서만 실행됨
태스크 큐에서 호출 스택으로 함수 이동시키는 존재가 이벤트 루프임
3. 호출스택
이벤트 루프는 함수 호출과 밀접한 관련이 있음
위의 예제에서 첫번쨰로 함수가 호출되는것은 a(); 이다
js코드가 처음 실행되는 순간도 하나의 함수가 실행된다고 봄
이 함수에는 이름이 없으므로 (anonymous) 로 표기함 우리말로 익명
메서드 (Method) 메서드는 클래스 (Class)의 내부에 존재하는 영역으로,
특정 기능을 하는 코드를 묶어서 나타내는 것이다.
즉, 특정 기능을 수행하기 위한 코드들의 집합체이다.
console.trace () 는 함수의 호출 스택을 보여주는 메서드이다
a보다 (anonymous) 함수가 먼저 실행됨을 알수 있음
그런데 왜 ? a , b, console.trace 순으로 쌓였을까
그것은 호출스택이 무엇인지 알면 이해할수있음
호출스택은 바딕이 막히고 천장은 뚫린 하나의 통이다
마지막에 넣은 물건이 뺄때는 가장 먼저 빠진다 . 이러한 구조를 프로그래밍에서는 스택 (stack) 이라고 한다
4 이벤트 루프
호출 스택이 비어있을때 태스크 큐에서 호출스택으로 함수를 이동시키는 역할이다
1.setTimeout() 함수는 콜백 함수를 백그라운드로 보내고 종료된다
2. setTimeout() 는 함수는 종료되면서 호출스택을 빠져나간다
3.다음줄의 console.log ('내가먼저'); 가 실행된다
setTtimeout() 함수가 콘솔에 아무런 출력을 하지 않고 빠져나가므로
console.log() 가 setTimeout() 함수보다 먼저 실행되는 것처럼 보일 뿐이다
대부분 비동기 함수는 콜백함수를 백그라운드로 보내는 경우가 많다
- (anonymous) 함수가 빠져나간 후 백그라운드와 태스크 큐에도 함수가 없어야 전체 코드가 실행됨
5 재귀 함수
어떤 함수가 내부에서 자기 자신을 다시 호출하는 함수를 재귀 함수라고 한다 (recursive function )
호출 스택은 함수를 담을 수 있는 크기가 정해져 있지만 초과하면 에러가 발생한다
만약 함수가 호출 스택의 최대 크기보다 더 쌓여야 한다면 ?
비동기 함수를 사용하는 방법이 가장 간단하다
재귀함수의 내부를 대표적인 비동기 함수인 setTimeout() 으로 감싸고 시간은 0 초로 즉시 호출하면 됨
- 재귀함수를 사용 할떄는 연산량이 많으면 웹 브라우저가 느려지는 현상이 발생함으로
연산량을 최소화할수 있게 코드를 작성해야한다
6 프로미스
- 비동기 코드를 작성하다 보면 코드의 실행순서가 작성 순서와 달라 불편함
이러한 불편함을 개선하기 위해 프로미스와 anync / await 를 사용함
프로미스 는 Promise 라는 클래스를 사용함
new 를 붙여 Prommise 클래스를 호출 하면 프로미스 객체를 생성함
이때 인수로 콜백함수를 넣는다
( 인수(Argument)는 함수를 호출할 때 건네주는 변수입니다. )
resolve(); 성공
reject()(; 실패
프로미스 객체에는 then() 메서드 나 catch () 메서드를 붙일수 있음
프로미스를 실행된 결과 값을 저장하고 있으며 언제든지 필요할 때 그 값을 꺼낼 수있는 객체 라고 함
프로미스에는 finally () 메서드도 있다
then () 과 catch() 실행이 끝난후에 finally ()가 있으면 무조건 실행됨
Promise는 현재 객체가 프로미스 객체라는 것을 알려주고 <> 안 값은 각 프로미스의 상태를 의미함
fulfilled 는 성공
rejected 실패
pending은 성공이나 실패 결과를 기다린다는 뜻임
pending 은 resolve () 나 reject() 가 비동기 함수 내부에서 호출될떄 볼수 있음
프로미스도 비동기 인데 이벤트 루프를 사용한다
resolve () 나 reject () 되는 순간 then () 이나 catch () 의 콜백함수가 태스크 큐에 들어간다 이떄 프로미스 콜백함수 ) 태스크 큐에 있는 프로미스 콜백함수는 프로미스가 아닌 콜백 함수보다 먼저 호출 스택으로 올라감
프로미스 콜백함수의 우선순위가 더 높음
7. anync / await
프로미스로 작성된 코드는 여전히 코드의 작성 순서와 실행순서가 다르다
이것을 개선하기 위해 async/awit문법을 사용해야함
await는 프로미스가 resolve() 할때까지 기다리라 라는 뜻이다
사용하면 프로미스인 비동기 코드를 순서대로 생성하게 한다
단 프로미스가 아닌 비동기 코드에 await를 적용하는것은 의미가 없다
setTimeout() 은 프로미스가 아니므로 await가 적용되지 않는다 이럴떄는 await를 붙어야 한다
이런식으로 작성해야 한다
try-catch 문으로 에러 처리하기
promise 에는 catch() 에러 처리 메서드가 있지만 await 에는 없다
이럴 경우 try -catch 문으로 감싸줘야 한다
