[JavaScript]비동기 (Asynchoronous)

❓비동기란(Asynchoronous)?

위에 있는 귀여운 고양이를 채색하는 방법은 다음과 같습니다.👇

/방법 1
고양이 1을 그린다.
고양이 1을 색칠한다.
고양이 2를 그린다.
고양이 2를 색칠한다.

/방법 2
고양이 1을 그린다.
고양이 2를 그린다.
고양이 1을 색칠한다.
고양이 2를 색칠한다.

👉고양이를 하나씩 그린 다음 채색하고 다음 것을 그리는 방법은 여러모로 많은 시간이 걸립니다. 그렇다면 고양이 그리는 행위를 한 번에 몰아서 먼저 다 그린 다음 두 마리를 한 번에 채색하는 방식을 어떨까요 아무래도 시간이 덜 걸리게 될 겁니다.

👉프로그램상에서 방법 2와 같은 순서를 비동기적 진행 방식이라 칭하고 있습니다.
(방법 1은 동기적인 진행방식입니다)

다음은 동기적인 방법과 비동기적인 방법에 따른 걸리는 시간에 대한 표입니다.👇

 

비동기적인 방식은 동시에 일이 진행되는 반면 동기적 방식은 하나씩 현재 동작이 끝나기를 기다려 주면서 끝나면 다음 동작을 진행시켜 주는 방식으로 진행되어 시간을 많이 차지하는 것을 볼 수 있습니다.👀

👉여기서 나오게 되는 개념이 blocking과 non blocking입니다.

blocking 
➡요청한 작업이 멈출 때까지 대기한다, 요청에 대한 결과가 동시에 일어나지 않음
non-blocking 
➡요청할 작업을 즉시 멈출 수 없다면 리턴한다, 요청에 대한 결과가 동시에 일어남
.
👉유튜브를 보는 와중에도 다음 영상을 틀거나 좋아요나 구독을 누를 수 있는 것이
바로 non-blocking에 해당하게 됩니다.
(유튜브 볼 때 다음 댓글 쓰면 영상이 멈추게 되면 화가 나겠지요?)

 

📌비동기적 작업 방식 예시는 다음과 같습니다.

백그라운드 실행, 로딩 창 등의 작업

 

인터넷에서 서버로 요청을 보내고 응답을 기다리는 작업

 

큰 용량의 파일을 로딩하는 작업

 

❓How to use Asynchoronous(비동기)?

🔈 Calback

어떠한 이벤트나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

JavaScript에서 비동기적 프로그래밍을 하기 위해 사용되는 함수이다.

👇아래는 시간차를 랜덤으로 주어 문자를 랜덤으로 뽑아내어 비동기적 테크닉을 구현한 프로그램이다.

onst printString = (string) => {//특정 문자를 랜덤 순서로 뽑아주는 함수
    setTimeout(
        () => {
            console.log(string)
        },
        Math.floor(Math.random() * 100) + 1
    )
}

const printAll = () => {
    printString("A")
    printString("B")
    printString("C")
}

printAll();
/* 순서가 정해지지 않은 출력
첫번째 A B C
두번째 B A C
세번째 C A B
*/

이 방법의 경우 이벤트의 예측이 불가능하기 때문에 출력이 제멋대로 나오게 된다. 이 출력을 정리해 주기 위해 만들어진 함수가 바로 callback함수이다.

 

📢 Calback 사용하기

👆위의 코드에 callback을 추가해 보겠다.

const printString = (string, callback) => {//callback함수 추가
    setTimeout(
        () => {
            console.log(string)
            callback()
        },
        Math.floor(Math.random() * 100) + 1
    )
}

const printAll = () => {
    printString("A", () => {
        printString("B", () => {
            printString("c", () => { })
        })
    })
}

printAll();

/* 순서가 정해진 출력
첫번째 A B C
두번째 A B C
세번째 A B C
*/

처음 프로그램과 달리 출력이 일정하게 나오는 것을 볼 수가 있다.

👉이는 callback함수의 특징과 연관이 있는데 다음과 같다.
➡➡다른 함수에 전달 인자로 넘겨주는 함수
➡➡반복 실행하는 함수
➡➡이벤트에 따른 함수

 

❗ calback의 문제점

위와 같은 특징으로 인해 문제 또한 존재하는데, 반복이 여러 개가 중첩되어 프로그램의 가독성을 떨어지게 만든다. 아래의 예시는 수많은 callback함수가 '오류겐'을 맞은 것처럼 되었다.(callback hell현상) 

callback hell을 대표하는 그림

🔉 Promise

callbackhell을 벗어나기 위해 사용

resolve()와 reject() 함수 이용(작업 성공 시 resolve호출 실패 시 reject호출)

callback함수의 경우 함수 안에 함수를 넣어 프로그램을 반복하는 식으로 순서를 설정해 주었다면. promise의 경우. then을 이용하여 프로그램을 이어가는 것을 볼 수 있다.

const printString = (string) => {
    return new Promise((resolve, reject) => {
        setTimeout(
            () => {
                console.log(string)
                resolve()//성공시 출력
            },
            Math.floor(Math.random() * 100) + 1
        )
    })
}

const printAll = () => {
    printString("A")
        .then(() => {//callback으로 이어나가는 것이 아니가 .then 사용
            return printString("B")
        })
        .then(() => {
            return printString("C")
        })
}
printAll()

 

🔊Async.await

promise와 동일하게 동작
앞에 함수가 끝날 때까지 쭉 기다렸다가(await) 끝나면 실행

가장 가독성이 높음

const printString = () => {
    return new Promise((resolve, reject) => {
		setTimeout(() => {resolve("a")},100)
    })
}
const printString1 = () => {
    return new Promise((resolve, reject) => {
		setTimeout(() => {resolve("b")},100)
    })
}
const printString2 = () => {
    return new Promise((resolve, reject) => {
		setTimeout(() => {resolve("c")},100)
    })
}
const printString3 = () => {
    return new Promise((resolve, reject) => {
		setTimeout(() => {resolve("d")},100)
    })
}
const printString4 = () => {
    return new Promise((resolve, reject) => {
		setTimeout(() => {resolve("f")},100)
    })
}

const printAll = async () => {//async사용시 꼭 써주어야 함
    const one = await printString();//.then의 역활로 await추가
    console.log(one);
    
    const two = await printString1();
    console.log(two);
    
    const two = await printString2();        
    console.log(thre);
    
    const tree = await printString3();
    console.log(four);
        
    const five = await printString4();
    console.log(five);
}
printAll()

/*출력
a b c d f
*/

await를 사용하여 함수가 끝나면 다음 함수 실행(동기적인 진행방식과 비슷하다)

 

⏰타이머 관련

비동기적 진행방식에서 가장 중요한 것은 시간입니다❗
누가 더 빨리 끝내는지가 순서를 결정하게 됩니다..

👇JavaScript에서 시간을 정해주는 방식은 다음과 같습니다.

 

📌setTimeout(callback, millisecond)

• 일정 시간 후에 함수 실행

const timer = setTimeout(function () {//Id가 timer인 함수
  console.log('1초 후 실행');
}, 1000);
// 1초뒤... 1초 후 실행

📌clearTimeout(timerId)

• setTimeout 타이머 종료

const timer = setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
clearTimeout(timer);//Id가 timer인 타이머 종료
// undefined //timer가 종료되어 아무것도 출력되지 않음

📌setInterval(callback, millisecond)

• 일정한 시간의 간격을 가지고 반복하여 함수 실행(무한 반복)

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
// 1초마다 실행....1초마다....1초....

📌clearInterval(TimerId)

• setInterval 타이머 종료

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
//timer가 종료되어 아무것도 출력되지 않음

 

 

 

깜빡이 없이 훅들어왔다 훅 나가는 것이 바로 비동기인 것 같습니다. 순서에 상관없이 자기 맘대로 하니 설정해 주는 것도 힘들고 이해하는 것도 힘드네요......
하지만 사용자를 위해서는 사용자의 선택을 비동 기하여 우선시해야 되겠지요?
어휴!~비동기도 자기 맘대로 왔다가 일 끝나면 가는데 
인간인 나는 무엇 하나.......