동기 / 비동기

동기 / 비동기 방식 이란?

 

1. 동기(Synchronous)

: 요청한 작업이 끝날때까지 기다리는 방식이다.

요청이 들어오면 순차적으로 작업을 수행하고, 해당 작업이 수행 중이면 다음 작업은 대기한다.

장점 : 설계가 간단하고 직관적이다.

단점: 작업이 끝날때까지 아무것도 못하고 대기해야 한다.

 

2. 비동기(asynchronous)

: 요청한 작업이 완료 되지 않아도 다음 코드를 실행하는 방식이다.

A요청이 들어오면 A요청이 끝나지 않더라고 B라는 새로운 요청을 받으며, A요청에 대한 작업이 끝나면 해당 요청을 처리한다.

장점 : 요청한 작업이 끝나지 않아도 다른 작업 수행 가능

단점 : 설계가 복잡하다

동기 / 비동기 처리 방식

1) 비동기를 사용하는 이유는?

자바스크립트는 싱글 스레드 기반의 언어로, 한번에 하나의 작업만 처리가 가능하지만 비동기를 통해 사용자의 입력 처리나 네트워크 요청과 같은 시간이 많이 소요되는 작업을 백그라운드에서 처리 가능하기 때문이다.

 

2) 대표적인 비동기 사용 케이스

1. 페이지 리로드의 경우, 전체 소스를 다시 불러와야 하는데 페이지의 모든 요소를 모두 재요청할 경우, 불필요한 리소스 낭비가 발생하게 되지만 비동기 방식을 사용하면 필요한 요소만 불러와 사용이 가능하다.

2. 웹 애플리케이션에서 데이터베이스에 쿼리를 수행하는 작업을 동기적으로 수행하면 데이터베이스에서 응답이 올때까지 대기 상태가 되어 다른 요청을 처리 하지 못하여 대규모 트래픽이 발생할 수 있다.

3. 멀티 스레드 & 멀티 프로세싱 구현 가능히다.

 

3) 콜백 함수란 무엇인가?

콜백 함수는 다른 함수에 인수로 전달되는 함수입니다. 이 함수는 외부 함수에 의해 "나중에" 호출됩니다. 이벤트 클릭 또는 파일 로드와 같은 것일 수 있으며, 이벤트가 발생하면 콜백 함수가 실행됩니다.

비동기 작업을 연속적으로 처리할 경우, 콜백 함수 내에 비동기 작업 호출 하고 그 결과를 처리 하기 위해 또 다른 콜백 함수를 사용할 경우 콜백 지옥이 발생할 수 있다.

 

3-1) 콜백 함수의 사용 예

콜백 함수는 특히 비동기 작업을 할 때 유용합니다. 예를 들어, 웹 API를 통해 데이터를 요청하고, 그 데이터가 준비되면 특정 작업을 실행하려 할 때 콜백 함수를 사용할 수 있습니다.

function requestData(callback) {
  // 웹 API를 통해 데이터 요청하는 가상의 함수
  let data = '데이터';
  callback(data);
}

function processData(data) {
  console.log('처리된 데이터:', data);
}

requestData(processData);

 

4) Promise란 무엇인가?

Promise는 JavaScript에서 비동기 작업을 대표하는 객체입니다.

Promise는 세 가지 상태를 가집니다:

• pending: 초기 상태, 성공 또는 실패하지 않음.
• fulfilled: 연산이 성공적으로 완료됨.
• rejected: 연산이 실패함.

Promise 객체는 비동기 연산을 수행하고, 그 결과에 따라 성공(resolve) 또는 실패(reject) 콜백 함수를 호출합니다.

 

4-1) Promise 생성하기

Promise를 생성할 때는 new 키워드와 함께 Promise 생성자를 사용합니다.

생성자는 resolve와 reject를 인자로 하는 실행 함수를 받습니다.

let promise = new Promise((resolve, reject) => {
  // 비동기 작업을 여기에서 수행합니다.
  let success = true; // 예시를 위한 조건
  if (success) {
    resolve('작업 성공!');
  } else {
    reject('작업 실패.');
  }
});

 

4-2) Promise 사용하기

Promise 객체가 성공적으로 수행되었을 때, .then() 메소드를 통해 결과값을 받을 수 있습니다.

만약 오류가 발생했다면, .catch() 메소드를 통해 오류를 처리할 수 있습니다.

promise.then((result) => {
  console.log(result); // '작업 성공!' 출력
}).catch((error) => {
  console.error(error); // '작업 실패.' 출력
});

 

4-3) 연쇄적 Promise

.then() 메소드는 다시 Promise를 반환하기 때문에, 여러 비동기 작업을 순차적으로 연결할 수 있습니다.

promise.then((result) => {
  console.log(result);
  return new Promise((resolve, reject) => {
    // 다른 비동기 작업...
    resolve('두 번째 작업 성공!');
  });
}).then((secondResult) => {
  console.log(secondResult);
}).catch((error) => {
  console.error(error);
});

 

5) async/await 사용하기

async와 await 키워드를 사용하면, Promise를 더욱 쉽고 명확하게 사용할 수 있습니다.

async 함수는 항상 Promise를 반환하며,

await은 Promise가 resolve (성공) 될 때까지 기다린 후, 결과값을 변수에 할당합니다.

async function asyncFunction() {
  try {
    let result = await promise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

asyncFunction();

 

 

---

https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-%EB%8F%99%EA%B8%B0%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%B8%94%EB%A1%9C%ED%82%B9%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC

👩‍💻 완벽히 이해하는 동기/비동기 & 블로킹/논블로킹

 

 

https://velog.io/@slobber/%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4

동기와 비동기의 차이

 

https://f-lab.kr/insight/understanding-asynchronous-processing-in-javascript?gad_source=1&gclid=CjwKCAjw8diwBhAbEiwA7i_sJVrm2KX4ix7UjDms4VmQx_y1Vq3GeHnwoJUVooNUKL1JcjXR_thMoBoCBgIQAvD_BwE

자바스크립트 비동기 처리의 이해: 콜백에서 프로미스까지

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

📚 콜백 함수(Callback) 개념 & 응용 - 완벽 정리