[포스코 x 코딩온] 웹개발 과정 5주차 - 1 | 비동기 처리 Promise

강민혁·2023년 3월 27일
0

js

목록 보기
1/6
post-thumbnail

5주차 첫째날에는 비동기 처리를 배우며 Promise 객체를 배웠습니다.

비동기 처리란?

비동기 처리는 작업을 순차적으로 처리하지 않고, 병렬적으로 처리함으로써 시간을 절약하고, 자원을 효율적으로 활용하는 방식입니다.

자바스크립트에서 비동기 처리를 하는 대표적인 방식은 콜백(callback) 함수입니다. 콜백 함수란, 작업이 완료된 후에 호출되는 함수를 의미합니다. 비동기 함수를 호출할 때 콜백 함수를 인자로 전달하면, 비동기 함수는 작업이 완료되면 해당 콜백 함수를 호출합니다.

예를 들어, 파일을 읽는 작업을 비동기 방식으로 처리한다고 가정해보겠습니다. 이때, 파일을 읽은 후에 처리할 로직을 콜백 함수로 전달합니다.

fs.readFile('/path/to/file', function(err, data) {
  if (err) {
    // 오류 처리
  } else {
    // 파일 내용 처리
  }
});

위 코드에서 fs.readFile은 비동기 함수로서, 파일을 읽은 후에 콜백 함수를 호출합니다. 이 콜백 함수는 파일을 읽은 후에 실행됩니다.

비동기 처리는 여러 작업을 동시에 처리할 수 있는 이점이 있습니다. 예를 들어, 서버에서 데이터를 가져와서 화면에 표시하는 작업을 비동기 방식으로 처리하면, 서버에서 데이터를 가져오는 동안에도 화면을 그리는 작업을 계속해서 처리할 수 있습니다. 이렇게 하면 사용자는 더 나은 사용자 경험을 느낄 수 있습니다.

결론적으로 비동기 처리는 사용자의 더 나은 사용자 경험을 위해 사용 될 것이라고 추측 할 수 있겠습니다.

Promise란?

Promise는 자바스크립트에서 비동기 처리를 다룰 때 사용되는 객체입니다. Promise는 일종의 프로미스를 한다는 약속(Promise)을 가지고 있습니다. 이 약속은 비동기 작업이 완료되면 결과를 반환하거나 실패한 이유를 알려주는 등의 작업을 수행합니다.

Promise는 일반적으로 다음과 같은 구조를 가지고 있습니다.

new Promise(function(resolve, reject) {
  // 비동기 작업 수행

  if (/* 성공 */) {
    resolve(result);
  } else {
    reject(error);
  }
});

위 코드에서 new Promise는 새로운 Promise 객체를 생성하는 코드입니다. 이 객체는 resolve와 reject 함수를 인자로 받습니다. 이 함수들은 Promise가 성공하거나 실패할 때 호출됩니다.

위 코드에서 비동기 작업은 if (/ 성공 /)에서 처리됩니다. 이 코드에서 성공 또는 실패 여부를 판단한 후, resolve(result) 또는 reject(error)를 호출합니다. 이후, Promise 객체는 then과 catch 메서드를 사용하여 성공 및 실패 시 처리할 로직을 등록할 수 있습니다.

promise.then(function(result) {
  // 성공 시 로직
}).catch(function(error) {
  // 실패 시 로직
});

위 코드에서 then 메서드는 Promise가 성공한 경우 실행할 로직을 등록합니다. catch 메서드는 Promise가 실패한 경우 실행할 로직을 등록합니다.

Promise는 비동기 작업의 성공 및 실패 처리를 보다 간편하게 처리할 수 있도록 도와줍니다. 그러나 Promise를 사용할 때는 콜백 지옥(callback hell)에 빠지지 않도록 주의해야 합니다.

콜백 지옥 (callback hell) ?

콜백지옥(callback hell)은 콜백 함수를 중첩해서 사용하는 코드가 복잡해지고 가독성이 떨어지는 현상을 의미합니다. 이는 콜백 함수를 사용하여 비동기 처리를 할 때, 여러 번 중첩해서 사용하게 되면 코드의 가독성이 떨어져 유지 보수와 디버깅이 어려워지는 문제가 발생할 수 있습니다.

예를 들어, 다음과 같은 코드를 생각해보겠습니다.

getData(function(data) {
  getMoreData(data, function(moreData) {
    getMoreMoreData(moreData, function(evenMoreData) {
      // 작업 처리
    });
  });
});

위 코드에서는 getData 함수를 호출하고, 이 함수가 완료되면 getMoreData 함수를 호출하고, 이 함수가 완료되면 getMoreMoreData 함수를 호출합니다. 이렇게 중첩된 콜백 함수들은 코드를 복잡하게 만들며, 여러 번 중첩되면서 가독성이 떨어지는 현상이 발생합니다.

콜백지옥은 비동기 처리를 할 때 가장 큰 문제 중 하나이며, 이를 해결하기 위해서는 Promise나 Async/await 등의 방식을 사용할 수 있습니다. 이러한 방식을 사용하면 비동기 처리 코드를 간결하고 가독성 있게 작성할 수 있습니다.

이로써 5주차 1일째의 비동기처리 Promise객체에 대해 알아보았습니다.
평소 Promise를 자주 사용하지 않아서 익숙하지않았습니다.
조금 더 공부가 필요한 부분이라고 생각이 되네요.

profile
화이팅

0개의 댓글