동기(sync),비동기(async), 변수,함수 중복선언(2024.05.12)

동기(Synchronous) vs 비동기(Asynchronous)

• 동기(Synchronous): 동기 방식은 작업을 순서대로 하나씩 처리합니다. 한 작업이 끝나야 다음 작업이 시작될 수 있습니다. 이 방식은 코드의 실행 순서가 예측하기 쉽고 이해하기 간단하지만, 어떤 작업이 오래 걸리면 다음 코드의 실행이 그 작업이 완료될 때까지 멈춰 있게 되는 단점이 있습니다. (순차적으로 진행할때 사용)

 

• 비동기(Asynchronous): 비동기 방식은 작업이 완료될 때까지 기다리지 않고 다음 코드를 실행합니다. 대표적으로 네트워크 요청, 파일 시스템 작업 등이 이 방식으로 처리됩니다. 비동기 작업을 관리하기 위해 자바스크립트는 콜백 함수, 프로미스(Promises), async/await 등의 기법을 사용합니다. (여러일을 한번에 할때 사용)

 

axios와 같은 api불러오는 기능들은 대부분 비동기가 디폴트이다 따라서 await키워드를 사용하여 비동기 작업이 완료될 때까지 기다린다.

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data); // 데이터 처리
  } catch (error) {
    console.error('데이터를 불러오는 데 실패했습니다', error);
  }
}

다음과 같이 데이터를 api로 불러올때까지 기다렸다가 reponse에 저장해야하기 때문에 await함수를 써주게된다.

await를 사용해줄땐 함수에 async를 써줘야한다.

 

중복선언을 방지하기위해 변수는 var대신 let, const를 사용한다.

 

중복선언을 방지하기위해 함수는 function(){} 대신 아래와같이 화살표함수를 사용하게된다.

const processData = async () => {
  const data = await fetchData();
  console.log(data);
};