동기(Synchronous)와 비동기(Asynchronous)

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

자바스크립트는 동기적(Synchronous) 및 비동기적(Asynchronous) 처리를 지원하는 언어로, 이러한 처리 방식을 이해하고 활용하는 것은 프로그래밍에서 중요한 역할을 한다.

 

 

동기 처리

동기 처리란 하나의 작업이 실행되는 동안 다른 작업을 동시에 수행하지 않는 방식을 의미한다. 다시 말해, 하나의 작업이 종료될 때까지 다른 작업을 실행하지 못하며, 작업은 순차적으로 진행된다. 

console.log(1);
console.log(2);
console.log(3);

// 이 코드는 작성된 순서대로 실행되기 때문에 실행 결과는 1, 2, 3이 순차적으로 출력된다.

 

 

동기 처리와 스레드

프로그램에서 작업들을 처리하는 주체를 "스레드"라고 부르며, 동기적으로 처리할 때 하나의 스레드가 하나의 작업을 처리한 후 다음 작업을 처리하는데, 이러한 방식을 "블로킹 방식"이라고도 한다.

 

자바스크립트는 기본적으로 하나의 스레드에서 작업을 처리하므로 동기적으로 작동한다. 예를 들어, 작업 A가 4초, 작업 B가 3초, 작업 C가 5초 걸린다고 가정하면, 모든 작업을 순차적으로 처리하는 데 총 12초가 걸린다.

 

 

동기 처리의 문제점

만약 웹 사이트에서 모든 작업을 동기적으로 처리한다면, 오래 걸리는 작업이 끝날 때까지 다른 기능을 사용할 수 없어 사용자 경험에 문제가 생길 수 있다. 따라서 오래 걸리는 작업은 비동기적으로 처리해야만 한다.

 

 

 

비동기 처리

비동기 처리는 작업이 종료되길 기다리지 않고, 다음 작업도 동시에 진행하는 방식이다. 작업들을 동시에 처리할 수 있기 때문에 작업을 빠르게 처리할 수 있으며, 이를 "논 블로킹 방식"이라고 부른다.

 

 

자바스크립트에서 비동기 처리를 하려면 콜백 함수나 Promise 등을 활용한다. 예를 들어, setTimeout 함수는 특정 시간이 지난 후에 콜백 함수를 실행하도록 동작하는 함수이다.

 

setTimeout(() => {
    console.log("4초뒤에 실행됩니다.");
}, 4000);

// 4초 후에 "4초뒤에 실행됩니다."를 출력합니다.

 

 

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

자바스크립트는 싱글 스레드 방식으로 동작하므로, 여러 작업을 동시에 처리하려면 비동기 처리가 필요하다. 비동기 처리를 위해 자바스크립트에서는 콜백 함수, Promise, async/await 등 다양한 방법을 제공한다.

 

예를 들어, 다음과 같이 여러 작업을 비동기적으로 처리할 수 있다다.

 

const workA = () => {
    setTimeout(() => {
        console.log("5초 뒤 실행");
    }, 5000);
};



const workB = () => {
    setTimeout(() => {
      console.log("3초 뒤 실행");
    }, 3000);
};



const workC = () => {
    setTimeout(() => {
        console.log("4초 뒤 실행");
    }, 4000);
};



const workD = () => {
    console.log("나는 동기");
};



workA();
workB();
workC();
workD();

// workD가 가장 먼저 실행되고, workB, workC, 그리고 workA가 비동기적으로 실행되며 끝나는 순서에 따라 출력된다.

 

 

비동기 처리를 통해 오래 걸리는 작업을 기다리지 않고 빠르게 처리할 수 있으며, 자바스크립트에서 이를 구현하기 위한 다양한 방법을 활용할 수 있다.