[TIL] 자바스크립트 복습 가이드

자바스크립트 비동기 처리 이해도 평가 항목

문제 1

// [요구사항]
// 아래의 함수를 async/await를 사용하여 비동기로 작동하게 만드세요.

// [코드]
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched!");
    }, 1000);
  });
}

// 여기에 코드를 작성하세요.
async function getData() {
  try {
    const data = await fetchData();
    console.log(data); // "Data fetched!"
  } catch (error) {
    console.error(error);
  }
}

getData();

// [테스트]
// fetchData 함수를 호출하여 "Data fetched!" 문자열이 정상적으로 반환되는지 확인하세요.

문제 2

// [요구사항]
// 아래의 함수에서 then, catch, finally를 사용하여 비동기 처리를 하고,
// 성공적으로 데이터를 가져오면 "Data: [데이터]", 에러가 발생하면 "Error: [에러 메시지]",
// 그리고 작업이 끝났을 때 "Process completed"를 출력하세요.

// [코드]
function fetchDataWithError() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Network Error");
    }, 1000);
  });
}

// 여기에 코드를 작성하세요.
fetchDataWithError()
  .then((data) => console.log(`Data : [${data}]`))
  .catch((error) => console.log(`Error : [${error}]`))
  .finally(() => console.log("Process completed"));

// [테스트]
// fetchDataWithError 함수를 호출하여 적절한 메시지들이 출력되는지 확인하세요.

문제 3

// [요구사항]
// 아래의 async/await 함수를 then ~ catch로 변환하세요.

// [코드]
async function getData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  return data;
}

// 여기에 코드를 작성하세요.
function getData() {
  return fetch("https://api.example.com/data")
    .then((result) => console.log(result))
    .then((data) => data)
    .catch((error) => {
      console.log(`Error fetching data : `, error);
      throw error;
    });
}

// [테스트]
// 변환된 함수를 호출하여 동일하게 데이터를 반환하는지 확인하세요.
getData()
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

문제 4

// [요구사항]
// setTimeout을 사용하여 2초 후에 "Hello after 2 seconds"를 출력하는 함수를 작성하세요.

// [코드]
// 여기에 코드를 작성하세요.
function Hello() {
  setTimeout(() => {
    console.log("Hello after 2 seconds");
  }, 2000);
}

Hello();
// [테스트]
// 해당 함수를 호출하여 2초 뒤에 정해진 메시지가 출력되는지 확인하세요.

다른 항목들에 대한 부분은 어느 정도 바로 코드를 다 작성할 수 있었는데, 아직 비동기 처리에 대한 이해도가 부족한 것 같아서 문제와 풀이를 가져왔다.

프로젝트 하면서 API를 가져오는 일이 있을 때마다 정확히 이해하지 못한 상태로 일단 코드를 사용했는데, 막상 이렇게 바로 코드를 작성해야하는 상황에 놓이니 문제를 해석하는 것부터 어떻게 작성해야할지 머리가 하얘졌다.

그래도 이렇게 풀이를 찾아보면서 따라 작성해보니 어떤 흐름인지 약간은 이해가 가지만 이후에 관련 내용을 더 찾아보고 강의를 다시 들어야겠다. 또 이전에 하던 개인프로젝트에 추가 기능구현을 통해 연습 해봐야겠다.