TypeScript <동기/비동기>

⭐ 동기 처리 프로그래밍

✔️ 정의

// : 코드가 순차적으로 실행되는 것

// >> 한 작업이 완료될때까지 다음 작업은 대기(시작하지 X)

 

 ✔️ 특징

// - 순차적 실행: 코드 흐름 예측이 용이

// - 간단성: 프로그램의 이해가 쉬움

function syncFunc01() {
  // 시간 지연을 위한 계산식
  let sum = 0;

  for (let i = 0; i < 9999999000; i++) {
    sum += i; // sum = sum + i
  }

  return sum;
}

function syncFunc02() {
  let sum = 0;

  for (let i = 0; i < 100; i++) {
    sum += i; // sum = sum + i
  }

  return sum;
}

 

function example() {
  console.log(`첫 번째 작업 시작`);
  let result = syncFunc01(); // 시간이 오래걸리는 작업
  console.log(`첫 번째 작업 완료: ${result}`);

  console.log(`두 번째 작업 시작`);
  let result2 = syncFunc02();
  console.log(`두 번째 작업 완료: ${result2}`);
}

example();

• 코드의 순서대로 출력이 완료된다.

✔️ 동기 프로그래밍의 장단점

✅ 장점

• 간단성, 명확성
• 디버깅 용이

✅ 단점

• 응답성 저하, 코드의 활용(사용)도가 저하

 

⭐ 비동기 처리 프로그래밍

✔️ 정의

• 앞선 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 것
• 프로그램의 메인 흐름과 병렬적으로 작업 할 수 있는 프로그래밍 방식
  >> 작업이 완료되면 결과를 받음

✔️ 특징

• 응답성 향상
• 사용자 응답이 블로키이되지(막히지)않고, 긴 작업은 백그라운드에서 수행

✔️ 장단점

• 장점: 병렬처리와 효율성 응답성 향상
• 단점: 복잡성 증가, 디버깅 어려움

✅ 콜백함수

function syncFunc01() {
  setTimeout(() => {
    let sum = 0;

    for (let i = 0; i < 99999999; i++) {
      sum += i; //sum = sum + i 
    }
    console.log(`시간이 오래 걸리는 계산식 결과: ${sum}`);;
  }, 1000); //비동기 처리를 위한 setTimeout 사용
  
}

첫번 째 함수에  setTimeout()을 설정해서 시간을 설정해준다. (10초는 1000millsecond)

function syncFunc02() {
  setTimeout(() => {
    let sum = 0;
  
    for (let i = 0; i < 100; i++) {
      sum += i; // sum = sum + i 
    }
    console.log(`두번째 작업 (첫 번째 작업을 기다리지 않음): ${sum}`);
  }, 0)
}

두번 째 함수는 첫번째와 똑같이 setTimeout을 사용한다. (0초로 시간을 설정)

 

function example() {
  console.log(`첫 번째 작업 시작`);
  syncFunc01();
  
  console.log(`두 번째 작업 시작`);
  console.log('메인 프로세스 (비동기 처리)');
  syncFunc02();
}

example();

emxample()함수에 위에 두함들를 넣어서 같이 함수를 시작한다.

 

⭐ Async & Await 

• 프로미스를 기반으로 비동기 작업을 간편하게 작성하는 방어
•  async로 정의된 함수 내에서 await 키워드를 사용하여 비동기 작업의 결과를 기다림

✔️ async 함수 내에서만 await 사용이 가능
✔️ 동기 코드와 유사한 형태로 비동기 코드 작성

✅ 외부(jsonplaceholder)에서 데이터를 가져오는 함수

: 시간이 오래걸리는 작업

async function fetchUserData() {
  // 외부와의 연결 시 발생할 오류를 방지
  // : try - catch 블록 사용
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/3');

    if(!response.ok) {
        throw new Error('Fecth Fail');
    }

    const data = await response.json();
    
    console.log(`가져온 데이터: ${data}`, data);

  } catch(error){
    console.error('데이터 요청 중 오류:', error);
  }
}

fetchUserData();
console.log('hello');

 

✔️ 실행할 로직을 작성
   : 해당 위치에서 오류 발생 시 catch 블록으로 이동

• Promise 객체: 연산 결과에 따라 성공 또는 실패의 상태를 가짐
• fetch('url'): 해당 url을 통해 서버에 데이터 요청을 보내고 그 응답을 프로미스 형태로 가져옴
• 프로미스가 성공의 상태를 가질 경우, Response 객체를 반환 (요청에 대한 결과값)

✔️fetch() 함수
: 네트워크 요청을 비동기적으로 처리
fetch는 Promise를 반환하는데, 이 Promise는 HTTP 응답을 나타내는 Response 객체로 해결
Response 객체는 요청에 대한 서버의 응답을 포함하며, 여러 가지 유용한 속성과 메서드를 제공

✔️Response 객체의 주요 속성

• ok: 이 속성은 HTTP 상태 코드가 200-299 범위에 있을 때 true를 반환
  >> 요청이 성공적으로 완료되었음을 나타냄
• status: 응답의 HTTP 상태 코드를 반환 (예: 200, 404).
• statusText: HTTP 상태 코드에 대한 텍스트 메시지를 반환 (예: "OK", "Not Found").
• headers: 응답 헤더를 나타내는 Headers 객체. 헤더에서 특정 값을 조회 가능
• body: 응답의 본문을 ReadableStream 형태로 제공 - 이 스트림을 통해 데이터를 읽기 가능
  - 해당 데이터를 json()을 사용하여 JSON 형식으로 파싱