FrontEnd Typescript – 동기 / 비동기

Typescript – 동기 / 비동기

단일 스레드로 동작하는 자바 스크립트

  • Thread는 CPU가 프로그램을 동작시키는 최소 단위. 운영체제에서 프로그램이 실행되고 있는 상태를 프로세스라고함. 프로세스는 한개의 주 스레드와 여러개의 작업 스레드를 동작시킴.
  • 자바 스크립트 코드는 항상 한개의 작섭스레드에 실행되며 웹 브라우저나 Node.js에서 프로그램 자체에서 다중 스레드를 지원하지만 자바스크립트는 단일 스레드에서 동작.

동기 / 비동기

동기(synchronous)

란, 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식을 의미한다. 즉, 작업이 완료될 때까지 다음 코드의 실행을 멈추고 기다리는 것이다. 이러한 방식은 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다.

비동기(asynchronous)

란, 어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미한다. 즉, 작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행하는 것이다. 이러한 방식은 작업이 오래 걸리는 경우 시간을 절약하고, 병렬적인 작업 처리가 가능하다.

동기 방식으로 파일을 읽는다면 파일을 읽기 시작한 이후에 다음 코드를 실행하지 않고 파일이 읽혀지기를 기다린다. 반면에 비동기 방식으로 파일을 읽는다면 파일을 읽는 작업이 실행되는 동안 다른 작업을 수행할 수 있다.

자바스크립트에서의 비동기 처리

자바스크립트는싱글 스레드(Single Thread) 기반의 프로그래밍 언어이다. 하나의 스레드에서 모든 작업을 처리하도록 되어 있기 때문에, 한 번에 하나의 작업만 처리할 수 있다. 그래서 자바스크립트에서 동기 방식으로 처리를 하게 되면, 이전 작업이 완료될 때까지 다음 작업을 처리할 수 없다. 이러한 문제점을 해결하기 위해 자바스크립트에서는 비동기 처리가 필요하다.

function test() {
    for (let i = 0; i < 10000; i++) {
        console.log(1);
    }
    console.log(2);
}

웹 페이지의 반응성 향상: 사용자가 요청한 작업이 완료될 때까지 기다리는 것은 사용자 경험을 저해시킨다. 따라서, 비동기 처리를 통해 사용자의 요청에 빠르게 반응할 수 있도록 해야 한다

네트워크 통신: 웹 애플리케이션에서는 서버와의 데이터 통신이 필요하다. 동기적인 처리를 하게 되면 응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에 웹 페이지의 반응성이 떨어질 수 있다. 따라서, 비동기적으로 데이터를 받아오는 것이 웹 페이지의 성능을 향상시키는데 도움이 된다.병렬 처리: 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다. 이를 통해 시간이 오래 걸리는 작업을 병렬적으로 처리할 수 있으며, 결과적으로 전체 작업 시간을 단축시킨다

에러 처리: 비동기적으로 처리할 때 에러가 발생하면, 해당 에러를 쉽게 처리할 수 있다. 에러 발생 시, 에러를 처리할 수 있는 콜백 함수를 실행하거나, 에러를 캐치하여 처리할 수 있어 프로그램의 안정성을 높일 수 있다.

Leave a Reply

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Related Post