비동기 처리 (Asynchronous Processing)

비동기 처리란 코드의 실행이 즉시 완료되지 않고, 일정 시간이 걸리는 작업(예: 파일 읽기, 네트워크 요청 등)을 처리하는 방법입니다. 비동기 처리는 이러한 작업이 완료될 때까지 프로그램이 멈추지 않고 다른 작업을 계속 수행할 수 있도록 합니다.

예를 들어, 파일을 읽거나 서버에 데이터를 요청하는 작업은 시간이 걸릴 수 있습니다. 이 작업이 완료될 때까지 기다리면 프로그램이 멈추기 때문에, 비동기 처리를 사용하여 작업이 완료되기를 기다리는 동안 다른 작업을 계속할 수 있습니다.

콜백 함수 (Callback Function)

콜백 함수는 다른 함수에 인수로 전달되는 함수입니다. 주로 비동기 작업이 완료되었을 때 실행할 작업을 정의하는 데 사용됩니다.
예를 들어, papaParse등의 라이브러리를 통해 csv 파일 등의 읽기 작업이 완료되었을 때, 읽어온 데이터를 처리하기 위한 함수가 콜백 함수로 사용될 수 있습니다.

---

비동기적으로 제공된다 (Provided Asynchronously):

• 비동기 작업이 완료된 후, 그 결과가 제공된다는 의미입니다. 작업이 완료될 때까지 프로그램이 멈추지 않고 다른 작업을 계속 수행합니다.

비동기 작업의 결과를 콜백 함수에 제공(To a Callback Function):

• 비동기 작업의 결과는 미리 정의된 콜백 함수에 전달됩니다. 이 콜백 함수는 비동기 작업이 완료되었을 때 호출되어 결과를 처리합니다.

자바스크립트는 싱글 스레드인데, 비동기 연산은 어디서 작동하는 건가요?

• 비동기 연산은 메인(싱글) 스레드가 아닌, 주로 Web 브라우져의 Web API에서 발생합니다.

---

예시

csv 파일을 처리하는 Papa.parse 함수의 사용 예시를 통해 더 자세히 설명해보겠습니다:

const input = document.querySelector("input[type='file']");
input.addEventListener("change", (event) => {
    const file = event.target.files[0];
    Papa.parse(file, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            // 이 부분이 콜백 함수입니다.
            console.log(results.data); // 파싱된 결과를 처리합니다.
        }
    });
});

위 예제에서:

• Papa.parse(file, config)는 비동기 함수입니다. CSV 파일을 파싱하는 작업은 시간이 걸릴 수 있으므로, 이 작업이 완료될 때까지 프로그램이 멈추지 않습니다.
  • complete: function (results)는 콜백 함수입니다.
    • 이 함수는 Papa.parse 작업이 완료된 후, 파싱된 결과를 처리하기 위해 호출됩니다.
  • Papa.parse 함수가 파일을 파싱하는 동안 프로그램은 다른 작업을 계속 수행할 수 있습니다.
  • 파싱이 완료되면 complete 콜백 함수가 호출되고, 파싱된 데이터가 results 매개변수로 전달되어 처리됩니다.