카테고리 없음

4.30

문앵 2021. 4. 30. 11:55

프로토타입과 프로토 개념은 흐름만 이해하면 됨 . 모르면 안된다기보다 면접등에서 자주 나와서 유용한 정도라고 함.

오늘은 동기/ 비동기 개념이랑 콜백함수를 직점 구현해보기.

1교시)

*동기/ 비동기와 콜백함수

 1. 동기/ 비동기 

 

세호씨가 마트에 가서 고기를 달라고 했음. 마트는 고기를 준비함. 세호씨는 마트에서 고기 준비될 때까지 기다리셔야 함. 다른 사람이 오면 세호씨 순번이 끝날때 까지 기다리셔야함. 이것처럼

 

소스가 순차적으로 흘러가는 것을 동기라고 한다. 

 

 

세호씨가 고기 주문- > 마트 "지금 고기 없어요 번호 남기고 가세요"-> 번호 남김 -> 쌤이 마트에 음료수 달라고 함. -> 마트 "음료 뭐 간단한거니까"-> 음료수 줌 (현재로 세호씨는 고기를 못받은 상태) -> 나중에 세호씨 고기 줌

 

소스의 순서와 상관없이 흘러가는 것을 비동기라고 한다.

 

1. 소스 a

2. 소스 b

3. 소스 c

4. 소스 d

 

* a> b > c > d 순차적으로 (동기)

 

* a > d > b > c 비순차적으로 (비동기)

 

console.log('start');
setTimeout(() => {
console.log('srart2'); },3000 );
console.log('start3')

위 코드 실행 결과창 ▼

 

 

즉,

실제 코드는

start1 > start2 > start3 순이지만,

start1 > start3 > start2 순으로 찍힙니다. 위에서부터 순서대로 실행을 시키는데

start2는 나오는데 3초가 걸리니까 start3보다 더 나중에 나오는 것입니다. (비동기)

 

*

const 아반떼 = (a) =>{
    setTimeout(() => {
       console.log('아반떼go'); 
    }, 3000);
}



const 소나타 = (a) =>{
    setTimeout(() => {
       console.log('소나타 go'); 
    }, 1000);
}


const 그랜져 = (a) =>{
    setTimeout(() => {
       console.log('그랜져 go'); 
    }, 2000);
}

아반떼();
소나타();
그랜져();

위 코드는

실행은 아반떼-> 소나타-> 그랜져 순인데,

실제 콘솔창에는 소나타 -> 그랜져 -> 아반떼 가 뜨므로 비동기입니다.

 

 

Q. 각 함수의 인자값(a)을 콘솔에 찍으면 어떻게 나올까요?

const 아반떼 = (a) =>{
    setTimeout(() => {
        console.log('아반떼go');
        console.log(a)
    }, 3000);
}


const 소나타 = (a) =>{
    setTimeout(() => {
       console.log('소나타 go');
       console.log(a)
    }, 1000);
}


const 그랜져 = (a) =>{
    setTimeout(() => {
       console.log('그랜져 go');
       console.log(a)
    }, 2000);
}

아반떼(1);
소나타(2);
그랜져(3);

해주면 

//소나타 2

//그랜져 3

//아반떼 1

이라고 뜹니다.  역시 비동기 입니다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

 2. 콜백함수 

 

 

function go(){
    console.log('go go');
}

const 아반떼 = (callback) =>{
    setTimeout(() => {
        console.log('아반떼go');
        callback()
    }, 3000);
}


const 소나타 = (callback) =>{
    setTimeout(() => {
       console.log('소나타 go');
       callback()
    }, 1000);
}


const 그랜져 = (callback) =>{
    setTimeout(() => {
       console.log('그랜져 go');
       callback()
    }, 2000);
}

console.log('start');
아반떼(()=>{
    소나타(()=>{
        그랜져(()=>{
            console.log('자동차 경주 끝@');
        })
    })
})

위 코드 실행 결과창 ▼

이게 떠야되는데 왜 안뜨지..? -> hrnl 에다가 스크립트 연결을 잘못 한 거였음 ㅎㅎ

 

-----------------------------2교시-------------------------------

*promise란 뭘까?

 

const 아반떼 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 go');
        },3000)
    })
}


const 소나타 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 go');
        },2000)
    })
}


const 그랜져 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜져 go');
        },1000)
    })
}

아반떼().then((result)=>{
    console.log(result);
    return 소나타();
})

이게 밑에 요거

 

---------------------------------------3교시-----------------------------------------------

반응형