[FE 45] _23.05.17 _ Day 26 (Node.js)

---

점점 어려워지고 힘들어진다 ㅠㅠ 존버할수있을까??

---

비동기 & 동기

비동기(Asynchronous)와 동기(Synchronous)는 프로그램의 동작 방식을 설명하는 데 사용되는 개념입니다.

이 두 용어는 작업의 진행과 관련된 시간적인 흐름을 나타냅니다.

 

1. 동기(Synchronous):
   • 동기적인 작업은 순차적으로 진행되며, 한 작업이 끝나야 다음 작업이 시작됩니다.
   • 각 작업은 이전 작업의 완료를 기다릴 수 있고, 작업의 결과가 동기적으로 반환됩니다.
   • 동기적인 작업은 코드의 흐름을 예측하기 쉽고, 간단한 작업 흐름을 구현하기에 용이합니다.
2. 비동기(Asynchronous):
   • 비동기적인 작업은 작업이 시작되고 결과를 기다리는 동안 다른 작업이 수행될 수 있습니다.
   • 작업은 독립적으로 진행되며, 결과는 나중에 콜백 함수, 프로미스 또는 async/await를 통해 처리될 수 있습니다.
   • 비동기적인 작업은 I/O 작업(파일 시스템 액세스, 네트워크 요청 등)이나 장시간을 요구하는 작업을 처리할 때 유용합니다.

예시 코드 _ 동기

console.log("첫 번째 작업");
console.log("두 번째 작업");
console.log("세 번째 작업");
// 결과: "첫 번째 작업", "두 번째 작업", "세 번째 작업" 순서대로 출력

예시 코드 _ 비동기

console.log("첫 번째 작업");

setTimeout(function() {
  console.log("두 번째 작업");
}, 2000);

console.log("세 번째 작업");
// 결과: "첫 번째 작업", "세 번째 작업" 순서대로 출력
// 2초 후에 "두 번째 작업" 출력

---

1. 콜백 함수(Callback Functions):
   • 콜백 함수는 다른 함수의 인자로 전달되고, 해당 함수의 작업이 완료된 후 호출됩니다.
   • 주로 비동기 작업의 결과 처리나 이벤트 핸들링에 사용됩니다.
   • 콜백 함수는 일반적으로 익명 함수로 전달되며, 작업이 완료되면 호출됩니다.
2. 프로미스(Promises):
   • 프로미스는 비동기 작업을 좀 더 구조화하고 관리하기 위한 객체입니다.
   • 프로미스는 작업의 성공 또는 실패를 나타내는 상태와 결과값을 다룹니다.
   • .then()과 .catch() 메서드를 사용하여 프로미스의 결과를 처리합니다.
3. async/await:
   • async/await는 프로미스 기반의 비동기 작업을 더 간결하고 동기적으로 작성할 수 있게 해주는 문법적인 구조입니다.
   • async 키워드는 함수가 비동기 함수임을 나타내고, await 키워드는 비동기 작업의 결과를 기다리는 표현식 앞에 사용됩니다.
   • await 키워드는 프로미스가 처리되고 결과를 반환할 때까지 함수의 실행을 일시 중지합니다.

 

예시 코드 ) 콜백 함수(Callback Functions)

function fetchData(callback) {
  setTimeout(function() {
    const data = "비동기 작업 결과";
    callback(data);
  }, 2000);
}

function handleData(data) {
  console.log("데이터 처리:", data);
}

fetchData(handleData);

 

예시 코드 ) 프로미스(Promises)

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const success = true;

      if (success) {
        const data = "비동기 작업 결과";
        resolve(data);
      } else {
        reject("에러 발생");
      }
    }, 2000);
  });
}

fetchData()
  .then(function(data) {
    console.log("데이터 처리:", data);
  })
  .catch(function(error) {
    console.log("에러 발생:", error);
  });

 

예시 코드 ) async/await

function fetchData() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      const data = "비동기 작업 결과";
      resolve(data);
    }, 2000);
  });
}

async function handleData() {
  const data = await fetchData();
  console.log("데이터 처리:", data);
}

handleData();

---

추가 공부

 

Promise.all()

 

| 여러 개의 프로미스를 동시에 실행하고, 모든 프로미스가 성공적으로 처리될 때까지 기다린 다음, 각 프로미스의 결과를 배열로 반환하는 메서드입니다. 이를 통해 병렬로 여러 비동기 작업을 처리할 수 있습니다.

 

Promise.all()은 다음과 같은 구문을 가집니다:

Promise.all([promise1, promise2, ...])
  .then(function(results) {
    // 모든 프로미스가 성공적으로 처리된 경우
    // results는 각 프로미스의 결과를 담은 배열
  })
  .catch(function(error) {
    // 프로미스 중 하나라도 실패한 경우
    // error는 실패한 프로미스의 에러를 담고 있음
  });

 

Promise.all()의 사용법

 

function fetchData1() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("첫 번째 데이터");
    }, 2000);
  });
}

function fetchData2() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("두 번째 데이터");
    }, 3000);
  });
}

function fetchData3() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("세 번째 데이터");
    }, 1000);
  });
}

Promise.all([fetchData1(), fetchData2(), fetchData3()])
  .then(function(results) {
    console.log(results); // ["첫 번째 데이터", "두 번째 데이터", "세 번째 데이터"]
    // 모든 프로미스가 성공적으로 처리된 경우, 결과를 담은 배열이 출력됨
  })
  .catch(function(error) {
    console.log(error); // 프로미스 중 하나라도 실패한 경우, 실패한 프로미스의 에러 출력
  });

Promise.all()은 여러 개의 프로미스를 동시에 실행하므로, 각 프로미스 간에 상호작용이 필요 없을 때 효과적입니다.

모든 프로미스의 처리가 완료될 때까지 기다리고 싶을 때 사용할 수 있습니다.

---

fetch함수 의사 코드 작성 과제 

1. API 엔드포인트 및 요청 옵션 설정
2. fetch 함수를 사용하여 데이터 가져오기
   2.1 fetch 함수로 요청 보내기
   2.2 응답을 Promise 형태로 받기
   2.3 응답의 성공 여부 확인
   2.4 응답 데이터를 JSON 형태로 파싱하여 Promise 반환
3. 데이터 처리
   3.1 Promise의 then 메서드 사용하여 데이터 접근
   3.2 데이터 처리 및 활용
4. 오류 처리
   4.1 Promise의 catch 메서드 사용하여 오류 처리
   4.2 오류에 대한 예외 처리