자바스크립트 비동기처리란 무엇인가?

비동기 방식은 프로그램의 흐름을 방해하지 않고 효율적으로 작업 처리를 가능하게 하는 중요한 개념인데요. 이를 통해서 특정 코드의 연산이 끝날 때까지 대기하지 않고 다음 코드를실행할 수 있어서 작업이 지연되지 않고 신속하게 진행됩니다. 동기적 방식과의 차이를 이해하고, 비동기 방식이 필요한 다양한 사례와 구현 방법을 알면, 더욱 효율적이고 반응성 높은 애플리케이션을 개발할 수 있습니다.

비동기 방식이란?

비동기 방식은 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음코드를 먼저 실행하는 특성을 의미합니다. 이를 통해서 기다리는 과정에서도 다른 함수를 호출할 수 있습니다. 반면에, 동기적 방식에서는 작업이 끝날때까지 다른 작업을 할 수 없습니다.

동기적 방식과 비동기적 방식을 다음과같이 표현할 수 있습니다.

• 동기적 방식 : 1번 작업이 끝날때까지 2번 작업을 시작하지 못합니다. 1번이 끝나야 비로소 2번이 실행되고 또 3번이 실행되죠 이런 순차적인 방식을 동기적 방식이라고 합니다.
• 비동기적 방식 : 특정 작업이 끝날때까지 다음코드를실행을 멈추지 않고 다음코드를 먼저 실행하는것을 의미합니다. 

아래 코드 javascript를 통해서 알아보도록 하겠습니다. 아래의 코드를  참고하세요!

console.log('첫 번째 console');

setTimeout(() => {
  console.log('두 번째 console (setTimeout 함수 내부)');
}, 1000);

console.log('세 번째 console');

위의 코드를 실행하면, 비동기 처리에 대한 개념을 쉽게 이해할 수 있는데요. 실행결과는다음과같이 나오겠죠.

첫 번째 console
세 번째 console
(1초 후)
두 번째 console (setTimeout 함수 내부)

 

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

자바스크립트 기본적으로 동기식 처리를 따르는 프로그래밍 언어입니다. 이는 코드가 한번에 한줄씩 차례대로 처리한다는 의미인데요. 웹 스라우저나 다른자바스크립트 런타임 환경에서는 코드실행을 위한 스택이라는 공간을 제공하는데요. 코드는 이 스택에서 한 줄씩 차례로 실행됩니다.

 

동기식 처리 코드 예제

<script>
  console.log(1); 
  console.log(2); 
  console.log(3);
</script>

위코드는 순차적으로실행되어서 1,2,3이 차례대로 출력이되는데요. 이것이 동기적 처리의 예시입니다.자바스크립트는 코드 한줄씩 실행하고 한줄이 실행되기 전에는 다음줄로 넘어가지 않습니다.

 

동기식 처리의 특징

동기식 처리는 대부분의 프로그래밍 언어에서 확인할 수 있습니다. 코드는 보통 위에서 아래로 왼쪽에서 오른쪽으로 실행되며 한 줄의 실행이 완료되기 전에 다음줄로 넘어가지 않습니다. 이것은 코드 실행의 예측 가능성을 높이고 디버깅을 쉽게 만들어줍니다.

 

비동기 방식이 필요한 사례

비동기 방식은 다음과같은 사례에서 특히 유용합니다. 

• Ajax Web api 요청 : 서버쪽에서 데이터를 받아올 때
• 파일 읽기 : 서버 쪽에서 파일을 읽어와야할때
• 암호화/복호화 : 복잡한 계산이 필요할 때
• 작업예약 : 몇 초 후에 해야하는 특정 작업이 필요할 때

콜백함수 자바스크립트 비동기처리

자바스크립트에서 함수는 숫자나 문자처럼 변수에 할당할 수 있는 하나의 값입니다. 이를 활용하여 함수는 다른 함수의 인자로 넘길 수 있고, 이때 사용하는 것이 바로 콜백함수입니다. 콜백함수는 다른 함수에 인자로 전달되어서 그 함수 내에서 실행되는함수입니다.

 

일반함수와 콜백함수의 차이

일반함수의 예제

일반적으로 함수는 입력(파라미터)을 받고,  그입력을 처리한 후 출력(리턴값)을 반환합니다. 예를 들어 주어진 유저 ID를 바탕으로 유저 객체를생성하는 함수를 아래와 같이 작성할 수 있습니다.

function findUser(id) {
  const user = {
    id: id,
    name: "User" + id,
    email: id + "@test.com",
  };
  return user;
}

const user = findUser(1);
console.log("user:", user);

 

위코드를 실행하면 다음과같은 결과가 출력이됩니다. 아래를 참고하세요.

user: {id: 1, name: "User1", email: "1@test.com"}

 

이함수는 유저 ID를 입력받아서 유저의 정보를 포함한 객체를 반환하는데요. 그리고 함수외부에서 이 반환값을 사용하여 필요한 작업을 수행합니다.

 

콜백함수의 예제

자바스크립트에서 함수가 특정 작업을 완료한 후 실행할 코드를 콜백함수로 전달받아서 실행할 수 있습니다. 이를통해서 비동기 작업을 쉽게 처리할 수 있습니다. 다음은 콜백함수를사용 예제입니다.

function findUserAndCallBack(id, cb) {
  const user = {
    id: id,
    name: "User" + id,
    email: id + "@test.com",
  };
  cb(user);
}

findUserAndCallBack(1, function (user) {
  console.log("user:", user);
});

 

위 코드를 실행한다면 동일한하게 다음과같은 결과가 나올겁니다. 아래를 참고하세요.

user: {id: 1, name: "User1", email: "1@test.com"}

 

두 방식의 차이점

'findUser' 함수는 결괏값을 반환하여서 함수외부에서 그 값을 사용하도록 하는데요. 반면에 'findUserAncallBack' 함수는 결과갓을 반환하지 않고, 대신 함수를 통해 결과값을 즉시 처리합니다. 이렇게한다면 함수내부에서 결과값을 이용한 작업을 바로 수행할 수 있습니다.

 

이 두 방식은 단순하게 스타일 차이로 볼 수 있습니다. 하지만 자바스크립트의 비동기 처리와 결합될 때 더 큰 의미를 가집니다. 콜백함수를 통해서 비동기 작업이 완료된 후 실행될 로직을 정의할 수 있기 때문이빈다. 이것은 특히 네트워크 요청이나 타이머와 같은 비동기 작업에서 매우 유용합니다.

 

오늘은 이렇게 자바스크립트를 통해서 비동기처리와 동기처리의 차이와 어떤역할을 하는지 그리고 콜백함수와 일반함수의 차이를 알아보았고 그리고 콜백함수와 비동기처리와의 조화가 어떤지 알아보았습니다. 지금까지 읽어주셔서 정말 감사합니다.