[멋쟁이 사자처럼 프론트엔드 스쿨] 41일차 TIL - 콜백함수, 프라미스, async await, fetch

🍴 콜백 함수

: 특정 작업이 완료된 후 호출되는 함수.

• 자바스크립트의 비동기 작업에서 콜백 함수를 통해 작업 완료 후의 처리를 정의함.
• 주로 시간 지연 함수(setTimeout), I/O 작업, 네트워크 요청 등의 비동기 작업에 사용됨.

단점

• 콜백 헬(Callback Hell)
• 비동기 작업이 중첩되어 코드의 가독성과 유지보수성이 떨어짐

function step1(callback) {
  setTimeout(() => {
    console.log("1단계 완료");
    callback();
  }, 1000);
}

function step2(callback) {
  setTimeout(() => {
    console.log("2단계 완료");
    callback();
  }, 1000);
}

function step3(callback) {
  setTimeout(() => {
    console.log("3단계 완료");
    callback();
  }, 1000);
}

// 콜백 헬 예시
step1(() => {
  step2(() => {
    step3(() => {
      console.log("모든 단계 완료");
    });
  });
});

 

🍴 Promise

: 비동기 작업의 완료 또는 실패를 처리하는 객체.

• 비동기 작업의 결과를 처리하기 위한 코드 작성 시 콜백 함수의 중첩을 피함

프라미스의 상태

• 대기(pending): 초기 상태, 아직 성공 또는 실패하지 않은 상태.
• 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태.
• 거부(rejected): 비동기 작업이 실패한 상태.

프라미스의 생성

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행
  let success = true;
  
  if (success) {
    resolve("작업이 성공했습니다!");
  } else {
    reject("작업이 실패했습니다.");
  }
});

프라미스의 사용

myPromise
  .then((message) => {
    console.log(message); // "작업이 성공했습니다!"
  })
  .catch((error) => {
    console.error(error); // "작업이 실패했습니다."
  });

프라미스 체이닝

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("첫 번째 프라미스 완료!"), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("두 번째 프라미스 완료!"), 2000);
});

promise1
  .then((message1) => {
    console.log(message1);
    return promise2;
  })
  .then((message2) => {
    console.log(message2);
  })
  .catch((error) => {
    console.error(error);
  });

 

🍴 async await

: 프라미스 기반 코드를 마치 동기 코드처럼 작성할 수 있음.

async 함수

• 함수 선언 앞에 붙여서 해당 함수가 비동기 함수임을 나타냄.
• async 함수는 항상 프라미스를 반환함.
• 함수 내에서 명시적으로 값 반환 시 그 값은 Promise.resolve를 통해 래핑됨

async function example() {
  return "Hello, world!";
}

example().then((message) => {
  console.log(message); // "Hello, world!" 
});

await 표현식

• async 함수 내에서 사용 가능
• 프라미스가 처리될 때까지 함수의 실행을 일시 중단, 프라미스가 이행되면 그 결과 값 반환

async function example() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000);
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다립니다.
  console.log(result); // "완료!" 출력
}

example();

 

🍴 fetch

: 자바스크립트에서 네트워크 요청을 수행하기 위해 사용되는 API.

• 비동기적으로 서버 리소스를 요청하고 그 응답을 처리하기 위해 사용됨
• XMLHttpRequest와 달리 사용하기 쉽고 읽기 쉬운 코드 작성 가능함
• fetch는 Promise를 반환함
• 응답은 Response 객체로 반환됨 => 다양한 메서드를 통해 응답 데이터 처리 가능 (ex. response.json(), response.text())

사용법

• 두 개의 인수를 받음
• 1. 요청할 URL, 2. 선택적인 설정 객체

// GET 요청 보내고 응답 처리하는 예시
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답에 문제가 있습니다.');
    }
    return response.json(); // JSON 형태로 파싱
  })
  .then(data => {
    console.log(data); // 처리된 데이터
  })
  .catch(error => {
    console.error('Fetch 에러:', error);
  });