[web개발] 비동기 / 동기

✅ 동기

• 작업을 순차적으로 진행하는 방식
• 현재 작업이 완료될 때까지 다음 작업을 시작하지 않고 기다리는 것

✅ 비동기

• 작업을 순차적으로 진행하지 않고, 다른 작업을 진행하면서 그 작업이 완료될 때까지 기다리지 않는 방식
• 백그라운드에서 정렬적으로 실행되며, 그 작업이 완료될 때까지 기다리지 않고 다음 작업을 진행함
• 비동기적으로 실행되는 작업은 프로그램의 효율성을 높이고, 사용자의 경험을 개선하는 데 큰 역할을 함

⭕ async await

• javascript에서 비동기적으로 실행되는 코드를 더 쉽게 작성할 수 있도록 도와주는 기능
• 기존에는 콜백 함수, promise를 사용하여 비동기 코드를 작성했지만 코드의 가독성이 떨어지고, 디버깅이 어려웠음
• async : 함수가 비동기 함수임을 나타냄
• await : 비동기 함수에서 반환된 promise객체가 완료될 때까지 함수의 실행을 일시 중지 시킴

// 기존의 비동기 함수
function fetchData() {
	return fetch('https://api.example.com/data')
    	.then(response => response.json())
        .then(data => {
        	console.log(data);
            return data;
        })
        .catch(error => console.error(error));
}

// async await 코드
async function fetchData() {
	try {
    	const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.lg(data);
        return data;
    } catch (error) {
    	console.error(error);
    }
}

• fetch는 javascript에서 제공하는 네트워크 통신 API 중 하나
• 추후에 fetch와 axios 따로 정리 예정!