[JS] 동기 / 비동기

(JS 달리기반 강의 3회차 정리)

DOM이란?

DOM은 HTML 문서를 구조화 해놓은 객체이다.
문서를 트리 구조로 나타내고, 노드라는 단위로 Document의 일부를 나타낸다. DOM을 이용해서 자바스크립트로 HTML에 접근해서 Document의 구조, 스타일 및 내용을 변경할 수 있게 해준다.
이런걸 프로그래밍 인터페이스 라고도 한다.
내가 DOM에서 변경하면 실제 DOM과는 다르지만 어딘가에 사는 누군가가 실제 Document를 바꿔준다.

동기 / 비동기

동기

동기는 말 그대로 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이다.
그래서 바로 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 한다. 순서에 맞춰 진행되는 장점이 있지만, 여러 가지 요청을 동시에 처리할 수는 없다.

비동기

비동기는 동시에 일어나지 않는다는 것을 의미한다. 요청한 결과가 동시에 일어나지 않을 거라는 약속이다. 하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식이다. 여러 개의 요청을 동시에 처리할 수 있는 장점이 있지만, 동기 방식보다 속도가 떨어질 수 있다.

Promise

프로미스는 말 그대로 약속을 뜻하고, 프로미스는 자바스크립트에서 비동기 작업의 완료 또는 실패를 나타내는 객체이다.
프로미스는 크게 세 가지 상태를 가질 수 있다.
1. 대기중 : 아직 결과를 받지 못한 상태
2. 이행됨 : 작업이 성공적으로 완료된 상태
3. 거부됨 : 작업이 실패한 상태

프로미스 생성

프로미스는 new Promise를 통해 생성할 수 있다. 생성자 함수는 두 가지 콜백 함수를 받는다. (resolve와 reject)

프로미스 예시 :

const promise = new Promise((resolve, reject) => {
  const success = true; // 작업 성공 여부를 나타내는 예시 변수

  if (success) {
    resolve("작업 완료");
  } else {
    reject("작업 실패");
  }
});

프로미스 사용

프로미스는 then과 catch 메서드를 사용하여 결과를 처리한다.

프로미스 사용 예시 :

promise
  .then(result => {
    console.log(result); // "작업 완료"
  })
  .catch(error => {
    console.error(error); // "작업 실패"
  });

async/await

async/await은 프로미스를 더 간단하게 사용할 수 있게 해준다. 사실 이 둘은 거의 똑같아서 우리는 이런걸 syntax sugar, 문법적인 설탕이라고 한다.
async 키워드를 사용하여 함수를 비동기 함수로 만들고, await 키워드를 사용하여 프로미스가 해결될 때까지 기다릴 수 있다. 이는 동기 코드처럼 작성할 수 있어 가독성을 높여준다.

async 함수

async 함수는 항상 프로미스를 반환한다. 함수 내부에서 return되는 값은 자동으로 Promise를 반환하게 되어서 Promise.resolve()를 통해 감싸진다.

async function myAsyncFunction() {
  return "Hello, Async!";
}

myAsyncFunction().then(result => {
  console.log(result); // "Hello, Async!"
});

await 키워드

await 키워드는 프로미스가 해결될 때까지 비동기 함수의 실행을 일시 중지한다. await은 오직 async 함수 내에서만 사용할 수 있다.
비동기 함수의 내부 로직을 동기 함수처럼 보이게끔 만들어준다.

async function fetchData() {
  const response = await fetch("~");
  const data = await response.json();
  console.log(data);
}

fetchData();

에러 핸들링

async / await에서도 에러 처리는 try...catch문을 사용한다.

async function fetchData() {
  try {
    const response = await fetch("~");
    if (!response.ok) {
      throw new Error("네트워크 응답이 올바르지 않습니다.");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

fetchData();

async/await의 장점

1. 가독성 향상 : 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 높아진다.
2. 디버깅 용이 : 프로미스 체이닝보다 디버깅이 더 쉽다.
3. 직관적 에러 처리 : try...catch를 사용한 에러 처리가 직관적이다.

여러 비동기 작업 한방에 처리하기

여러 비동기 작업을 동시에 처리하고 그 결과를 기다릴 때는 Promise.all과 함께 사용할 수 있다.

async function fetchMultipleData() {
  try {
    const [data1, data2] = await Promise.all([
      fetch("~").then(res => res.json()),
      fetch("~").then(res => res.json())
    ]);
    console.log(data1, data2);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

fetchMultipleData();