자바스크립트 비동기 프로그래밍(asynchronous programming), 동기 프로그래밍(Synchronization Programming)

안녕하세요 오늘 알아볼 것은 비동기 프로그래밍과 동기 프로그래밍 입니다.

 글을 쓰기 앞서 모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg

[지금 무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 강의 - 인

 

먼저 비동기 프로그래밍에 대한 개념부터 알아 보겠습니다.   비동기 프로그래밍이란?  => 자바스크립트는 싱글 쓰레드(Single thread) 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만, 비동기 프로그래밍을 통해 이런 제한을 극복할 수 있습니다. 이를 통해 코드의 실행을 멈추지 않고도, 시간이 걸리는 작업을 수행할 수 있습니다.

그럼 동기 프로그래밍이란?  =>  코드가 순차적으로 실행되는 것을 의미,  한 줄의 코드가 완전히 실행되고 나서 다음 줄의 코드가 실행되는 방식

이렇게 비동기 프로그래밍과 동기 프로그래밍으로 구분할 수 있습니다.  코드 해석은 소스코드에 주석으로 한줄한줄 설명해드렸습니다!!  설명이 부족한 부분은 제가 올려드린 강의 플랫폼에서 학습해주시면 될 것 같습니다!!  

/**
 * Async theory
 */

// 비동기 프로그래밍 -> 자바스크립트는 싱글 쓰레드 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만, 비동기 프로그래밍을 통해 이런 제한을 극복할 수 있습니다. 이를 통해 코드의 실행을 멈추지 않고도, 시간이 걸리는 작업을 수행할 수 있습니다.
// 주로 네트워크 요청, 파일 시스템 작업, 타이머 등에 사용됩니다. 이런 작업들은 시간이 걸리기 때문에, 비동기적으로 처리하는 것이 효율적이다.
// 동기 프로그래밍 ->  코드가 순차적으로 실행되는 것을 의미,  한 줄의 코드가 완전히 실행되고 나서 다음 줄의 코드가 실행되는 방식

// 비동기 프로그래밍 코드
function HardWork(){
    const now = new Date(); // 코드가 실행이 되는 시점에 현재 날짜와 시간

    /**
     * millseconds since epoch
     * 현재의 Epoch 시간(1970년 1월 1일 자정)부터 코드가 실행되는 순간까지 시간을 
     * 밀리초로 반환한다.
     */
    const milliseconds = now.getTime();  // now.getTime()함수를 실행하여 밀리초를 반환
    const afterFiveSeconds = milliseconds + 5 * 1000; // 이 코드가 실행되는 순간 milliseconds + 5 * 1000을 한다.  (밀리초는 1000개 있으면 1초 )

    while(new Date().getTime() < afterFiveSeconds){ //현재  while loop이 실행되는 시간의 밀리초를 가져오고, 현재 시간이 afterTenSeconds 보다 작은지를 비교 
           
    }
    
    console.log('완료');
}

console.log('안녕하세요');
HardWork();
console.log('오늘도 화이팅입니다.')
console.log('-------------------------');
// 만약 비교문이 false면 5초 뒤가 된다.(HardWork()는 while loop에서 10초동안 계속 실행이 될 것이다.)
// '안녕하세요' 출력되었다가 5초동안 while loop이 실행이 되었다가 '오늘도 화이팅입니다' 가 출력
// 즉, while loop을 실행하는 동안 다른 코드를 실행할 수 없다.

// 동기 프로그래밍 코드
function HardWork2(){
    setTimeout(()=>{
        console.log('완료'); // 5초 뒤에 작업이 끝나고 나면 '완료'라고 출력되도록 구성
    }, 5000); //setTime() -> 자바스크립트에서 기본으로 제공하는 함수, 비동기로 실행되는 함수 
    //첫 번째 매개변수에는 함수, 두 번째 매개변수에는 몇 초동안 기다렸다가 첫 번째 매개변수에 입력된 함수를 실행할지를 넣을 수 있다. 
}

console.log('비동기 프로그래밍');
HardWork2();
console.log('자바스크립트');
// 출력하면 '비동기 프로그래밍' , '자바스크립트'가 출력되고 5초뒤 '완료'가 출력
// 맨 위에 코드와 달리 비동기로 실행하여 출력하는  순서가 변경됨

출력결과는 이렇게 출력되어야 합니다!! 
댓글에 피드백 부분 남겨주시면 참고하겠습니다!1 좋아요도  눌러주시면 감사합니다!!