웹에서 동기와 비동기는 주로 네트워크 통신, 데이터 요청 및 처리, 사용자 인터페이스(UI) 업데이트 등의 다양한 상황에서 사용된다. 아래 예시는 웹에서 네트워크 통신과 사용하는 간단한 비동기 예제이다.

// js에서 자체적으로 제공하는 fetch() 사용
fetch('/api/data')
  .then(response => response.json())    			  // 비동기로 응답 데이터를 파싱
  .then(data => console.log(data))     			      // 파싱된 데이터를 출력
  .catch(error => console.error('Error:', error));    // 요청 또는 응답에 오류가 발생한 경우 처리

fetch() 는 무엇일까?

js에서 제공하는 fetch() 함수는 웹 API를 사용하여 네트워크 요청을 보내는 기본적인 방법이다. fetch() 함수는 Promise 를 반환하며, 비동기적으로 HTTP 요청을 수행하고 응답을 처리할 수 있도록 도와준다. 이를 사용하면 위의 예시와 같은 형태로 코딩할 수 있다. fetch()에 넣을 수 있는 인자와 함수는 아래와 같다.

fetch(url, options)
  .then((response) => {
  // 응답 처리
  return response.json(); // JSON 데이터로 파싱된 Promise를 반환
})
  .then((data) => {
  // 파싱된 데이터를 사용하여 처리
  console.log(data);
})
  .catch((error) => {
  // 요청 또는 응답에 오류가 발생한 경우 처리
  console.error('Error:', error);
});

• url
  요청을 보낼 URL을 지정한다.
• options
  요청에 대한 설정을 담고 있는 객체로, 필요에 따라 메서드(GET, POST 등), 헤더, 바디 등을 설정할 수 있다. 기본적으로 GET 메서드로 요청을 보내며, 추가적인 옵션을 지정하려면 이 객체를 사용한다. fetch() 함수의 리턴 값은 Promise 이므로, .then()과 .catch()를 사용하여 요청 성공과 실패를 처리할 수 있다. 성공한 경우 응답 객체(response)가 전달되며, 이를 사용하여 응답 데이터를 처리할 수 있다.

Promise는 무엇일까?

js의 Promise는 비동기 작업의 결과를 나타내는 일종의 데이터 형식이다. Promise는 비동기 작업의 성공 또는 실패와 관련된 값을 처리하고, 비동기 코드를 보다 직관적으로 작성할 수 있도록 도와준다.

Promise 객체는 세 가지 상태를 가진다.

• 대기(pending) - 비동기 작업이 아직 수행되지 않은 상태
• 이행(fulfilled) - 비동기 작업이 성공적으로 완료된 상태
• 거부(rejected) - 비동기 작업이 실패한 상태

다음의 예시로 Promise를 살펴보자.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 작업이 성공하면 resolve로 값을 전달
  // 작업이 실패하면 reject로 에러를 전달
});

myPromise.then((result) => {
  // 작업이 성공적으로 완료된 경우의 처리
}).catch((error) => {
  // 작업이 실패한 경우의 처리
});

위의 코드에서 myPromise는 Promise 객체를 생성한다. Promise 안에는 비동기 작업을 수행하는 콜백함수를 전달하고, 이 콜백함수 인자에는 resovle와 reject를 가진다. resolve는 비동기 작업이 성공적으로 완료되면 호출하는 또 다른 콜백함수이고, reject는 비동기 작업이 실패하였을 때 에러를 전달하는 또 다른 콜백함수이다.

myPromise가 가질 수 있는 함수에는 .then() 과 .catch(), ,finally()가 있다.

• then()
  비동기 로직이 모두 성공적으로 완료되었을 때 그 다음의 동작을 호출할 함수를 작성할 수 있다. 이 함수는 Promise의 결과값을 인자로 받는다.

• catch
  어떠한 이유로 에러가 발생했을 때 호출할 수 있는 에러 헨들링 함수를 넣을 수 있다. 인자로 error의 정보를 받는다.

• finally
  비동기 로직이 성공하든 실패하든 최종적으로 마지막에 호출되는 함수이다.

즉, Promise 는 비동기 작업을 좀 더 간편하게 처리할 수 있도록 도와주며, 비동기 코드의 콜백 지옥(callback hel)을 방지하여 가독성과 유지보수성을 향상시킨다. 비동기 작업의 결과를 효과적으로 다룰 수 있으므로, 프론트엔드 또는 백엔드 개발 등 다양한 상황에서 유용하게 활용된다.

콜백지옥을 표현한 사진

중요성

이러한 동기와 비동기로직을 이해하는 것은 프론트엔드 개발자로서 매우 중요하다.

• API와의 통신
  대부분의 API와의 통신은 비동기 방식으로 이루어진다. 웹 애플리케이션은 백엔드 서버와 데이터를 주고받아야 하므로, 비동기 방식을 이해하고 적절하게 사용하는 것은 필수이다.

• 웹 성능 향상
  비동기 로직을 사용하여 웹 애플리케이션의 성능을 향상시킬 수 있다. 비동기 방식으로 데이터를 가져오면 페이지의 다른 요소들과 병렬로 로딩이 가능하므로, 사용자는 웹 페이지가 더 빠르게 렌더링되고 반응하는 것을 경험할 수 있다.

• 효율적인 데이터 처리
  비동기 방식을 사용하여 데이터 요청과 처리를 효율적으로 관리할 수 있다. 사용자의 요청에 따라 필요한 데이터만 비동기적으로 가져오면, 데이터 요청이 많은 경우에도 불필요한 데이터를 불러오는 것을 방지할 수 있다.

• 에러 처리
  비동기 로직에서 에러 처리는 더욱 중요하다. 비동기적인 요청에서 에러가 발생하면 사용자에게 에러페이지 등의 피드백을 제공해야 하기 때문이다.

• 프론트엔드 라이브러리/프레임워크 활용
  많은 프론트엔드 라이브러리와 프레임워크들은 비동기적인 동작 방식을 지원하고 있다. 이러한 라이브러리와 프레임워크들을 사용하기 위해서는 비동기 로직을 이해하고 적절히 활용할 수 있어야 합니다.

비동기 로직을 이해하는 것은 웹 성능, 에러 처리, UI 업데이트, 사용자 경험 등에 다양한 측면에 있어서 중요하다. 이를 통해 프론트엔드 개발자로서 더 효과적으로 웹을 개발하고, 비동기와 관련되 최신 기술을 활용하는 것이 앞으로 더 필수적일 것이다.