동기 비동기(작업 처리 방식)

동기

• 동기 : 순차적 실행(코드 작성 순)
  • 한 작업이 끝나야 다음 작업으로 넘어감
  • 단일 스레드에서 작업을 처리하는 경우가 많음
  • 작업이 길어지면 다른 작업이 블로킹 되어 성능 저하가 발생할 수 있음

동기 예시

function task1() {
  console.log("Task 1 시작");
  console.log("Task 1 완료");
}

function task2() {
  console.log("Task 2 시작");
  console.log("Task 2 완료");
}

console.log("Start");
task1();
task2();
console.log("End");

// 출력:
// Start
// Task 1 시작
// Task 1 완료
// Task 2 시작
// Task 2 완료
// End

비동기

• 비동기 : 병렬 처리
  • 작업 완료를 기다리지 않고 다른 작업을 실행할 수 있음
  • 작업이 지연되더라도 다른 작업을 동시에 진행
  • Callback 함수를 통해서 비동기 처리
  • Callback 지옥 문제를 해결하기 위해서 Promise, async/await 등장
    • Promise, async, await 등 키워드를 통해서 비동기 처리

비동기 예시

비동기 간단한 예시

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 2000); // 2초 후 작업 완료
  });
}

async function processData() {
  console.log("Start");
  const data = await fetchData(); // 비동기 작업을 동기적으로 기다림
  console.log(data);
  console.log("End");
}

processData();

// 출력:
// Start
// (2초 후) Data fetched
// End

• Promise : 비동기 작업의 결과를 처리하기 위한 객체
  • resolve()가 호출되면 성공
  • reject()가 호출되면 실패
• async : 함수 내부에서 비동기 작업을 수행하겠다는 선언
  • async 키워드가 붙은 함수는 항상 Promise를 반환
• await : Promise가 해결될 때까지 대기

비동기 사용 예시

import axiosInstance from './axiosInstance';

export const CheckExistsRoomByRoomId = async (
  roomId: string,
): Promise<boolean> => {
  try {
    const response = await axiosInstance.get(`/api/room/${roomId}`);
    return response.status === 200;
  } catch (error) {
    return false;
  }
};


    const ifRoomExistsNavigateRoom = async (code: string) => {
        if(await CheckExistsRoomByRoomId(code)){
            handleNavigatePage(`/game-ready/${code}`)
            return;
        }
        showMessage("존재하지 않는 방입니다. 코드를 확인해주세요")
    }  
    
    ifRoomExistsNavigateRoom(c5df96f6-295b-4ae9-90fc-55d4918bb0b1);

• Promise : 비동기 작업의 결과를 처리하기 위한 객체
• async : 함수 내부에서 비동기 작업을 수행하겠다는 선언
• await : Promise가 해결될 때까지 대기
  • await CheckExistsRoomByRoomId(code) : CheckExistsRoomByRoomId(code)의 반환 값을 await을 통해서 기다림

비동기 키워드

async

async : 자바스크립트에서 비동기 함수를 정의하기 위한 키워드입니다. async 함수는 항상 Promise를 반환하며, 비동기 작업을 처리하기 위해 await와 함께 사용됩니다.

await

await : 자바스크립트의 비동기 프로그래밍을 단순화하고 직관적으로 처리하기 위해 사용되는 키워드입니다. async 함수 내부에서만 사용할 수 있으며, Promise가 해결될 때까지 함수 실행을 일시 중지하고, Promise의 결과 값을 반환합니다.

promise

promise : 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업이 완료되거나 실패했을 때 결과 값을 반환하거나 오류를 처리할 수 있도록 합니다. 간단히 말해, 미래에 값이 준비될 것을 약속(promise)하는 객체

왜 씀?

데이터가 준비되기 전에 코드가 실행되는 것을 막기 위해서 사용된다.

이건 알고 가셈(언어별 작업 처리 방식)

• 싱글 스레드 : 한번에 하나의 작업만 실행
• 멀티 스레드 : 여러 작업을 병렬적으로 실행
  • 싱글 스레드라고 동기적이고, 멀티 스레드라고 비동기적인 것 아님!
    • JavaScript는 싱글 스레드이지만 이벤트 루프를 활용한 비동기 처리가 가능함
    • Java는 멀티 스레드를 지원하지만, 기본 실행 방식은 동기적 싱글 스레드로 동작

• JavaScript : 기본적으로 동기(비동기 처리 가능)
  • 싱글 스레드 :
    • JavaScript는 싱글 스레드지만, 비동기 처리가 가능함 - 비동기 메커니즘(이벤트 루프, 태스크 큐)을 통해서 구현

• Python : 기본적으로 동기(비동기 처리 가능)
  • 멀티 스레드 지원

• Java : 기본적으로 동기(비동기 처리 가능)
  • 멀티 스레드 지원 :
    • Java는 기본적으로 동기적으로 처리 되지만, 멀티스레드로 병렬처리를 지원함