스터디15일차 - 콜백, 비동기promises

271. 콜 스택(call stack)개념
책을 쌓으려면 맨 위에 쌓고, 책을 정리하려면 맨 위에서부터 치워야 하듯이
처음 만나는 함수 A가(맨 아래에 있는 책) 실행되고, 함수 안의 함수B, 그리고 그 함수 안의 함수C, D, E를 실행하는 순서는
A실행 -> B실행 -> C실행 -> "C제거" -> D실행 -> "D제거" -> E실행 -> "E제거" -> "B제거" -> "A제거"
와 같이 됩니다.

 

 

동기 비동기 참고자료★

https://learnjs.vlpt.us/async/

272. WebAPI와 단일 스레드 개념
DOM, SVG, Fetch, setTimeout과 같은 것은 JavaScript가 아니라 브라우저에서 제공하는 API입니다.

자바스크립트는 한 번에 한 줄의 코드만을 실행합니다.
하지만 setTimeout을 통해서 시간을 지연시켜보면
one()=> console.log('1')
setTimeout(three()=> console.log('2'), 3000)
two()=> console.log('3')

1 =====> 3 ==(3초를 기다린 뒤)==> 2 
순서대로 출력됩니다.

자바스크립트가 브라우저에 "3초 있다가 three를 실행해줘" 라고 예약을 걸어두고,
다음 코드들을 실행하고 있다가 3초가 정확히 지나면 three 코드를 실행하기 때문입니다.

 

 

273. Callback 지옥 
함수 안에서 실행할 함수가 너무 많이 중첩되어 코드를 알아보기 어렵게 됩니다.




275. Promises 구문 : resolved(.then() 진행,수행), rejected(.catch() 멈춤,문제), pending(진행 중, 수행 중)
const request = fakeRequestPromise('naver.com'); // random과 setTimeout을 이용해 4초 이내면 true, 4초를 초과하면 false를 반환하는 함수를 만들었습니다. 

promise 구문은 .then()과 .catch()를 이용합니다.

request 
    .then(() => {
        console.log("RESOLVED")
    })
    .catch(() => {
        console.log("REJECTED")
    })
request함수에서 true가 반환되면 promise는 .then()을 실행하고 그렇지 않으면 .catch()를 실행하게 됩니다.

.then()을 실행했다면 또 다시 .then()과 .catch()를 실행하도록 할 수 있습니다.
fakeRequestPromise('1')
    .then(() => {
        console.log("1 RESOLVED") // true를 받아서 1번 함수가 실행되면 1 RESOLVED 를 출력합니다.
        fakeRequestPromise('2')  // 1 RESOLVED 출력에 성공했다면 .then()의 코드들을 실행한다는 것이므로  fakeRequestPromise('2') 함수가 이어서 실행됩니다.
            .then(() => {
                console.log("2 RESOLVED") // true면 2 RESOLVED 를 출력합니다.
            })
            .catch(() => {
                console.log("2 REJECTED") // false면 2 REJECTED 를 출력합니다.
            })
    })
    .catch(() => {
        console.log("1 REJECTED")
    })

276. Promises에서 promises를 연쇄하여 실전적으로 쓰는 법
fakeRequestPromise('naver.com/cafe/1')
    .then(() => {
        console.log("RESOLVED (PAGE1)") 
        return fakeRequestPromise('naver.com/cafe/2') // .then()의 return 값으로 promises를 다시 실행합니다.
    .then(() => { 
        console.log("RESOLVED (PAGE2)") // resolved라면 이 코드를 실행합니다.
        return fakeRequestPromise('naver.com/cafe/3') // 그리고 promises 함수를 다시 실행합니다.
    .then(() => {
        console.log("RESOLVED (PAGE3)")
    .catch(() => {
        console.log("REJECTED") // promises 중 하나라도 rejected가 있다면 "REJECTED"를 출력하고 함수를 종료합니다.
    })
    
첫 번째가 성공하면(resolved) 두 번째로,
두 번째가 성공하면(resolved) 세 번째로 이어서 실행하는 연쇄가 일어납니다.

그리고 셋 중 어느 하나라도 실패하면(rejected) .catch()를 실행합니다.

위의 275. 에서는 .catch()를 3가지로 나누었지만, 
여기서는 한 가지 .catch()로 모든 promises를 관리합니다. 
셋 중 어느 하나라도 실행이 멈춘다면 .catch() 구문의 코드를 실행해 "REJECTED"를 출력하게 됩니다.




277. Promises 만들기
const delayedColorChange = (color, delay) => { // 함수를 선언합니다.
    return new Promise((resolve, reject) = > { // return 값으로 new Promise()를 만듭니다. 매개변수로는 resolve, reject가 관습입니다.
        setTimeout(() => { // setTimeout 함수를 만들고
            document.body.style.backgroundColor = color; // 매개변수로 color를,
            resolve(); // resolve()함수로 promise resolved를 반환합니다.
        }, delay) // 매개변수로 delay를 줍니다.
    })
}

delayedColorChange('red', 1000) // 가장 처음으로 'red' 인수를 주었습니다.
    .then(() => delayedColorChange('orange', 1000)) // setTimeout 1000으로 1초 뒤에, resolve() 함수가 실행되며 다음 .then으로 이동합니다.
    .then(() => delayedColorChange('yellow', 1000)) // 그리고 then으로...
    .then(() => delayedColorChange('green', 1000))
    .then(() => delayedColorChange('blue', 1000))
    .then(() => delayedColorChange('indigo', 1000))
    .then(() => delayedColorChange('violet', 1000))