JavaScript 비동기(1) - 개요

 

 

 

 

동기와 비동기

동기 (Synchronous) 

console.log(1)
alert('확인 전까지 이후 출력이 되지 않습니다')
console.log(2)

console.log(3)
console.time('Loop')
for(let i=0;i<1000000000; i++){} // 반복문으로 코드 시간 지연
console.timeEnd('Loop')
console.log(4)

   - 하나의 작업이 끝나기 전에는 다음 작업이 시작되지 않습니다.

      > 대표적인 동기 작업 : alert()

 

 

 

 

비동기(Asynchronous)

console.log(1)

setTimeout(()=>{
    console.log('timeout!')
},10000) // 10초후 작동

console.log(2)
console.time('Loop')

setTimeout(()=>{
    for(let i=0;i<1000000000;i++){}
    console.timeEnd('Loop')
    console.log(5)
},0) // 바로 시작

console.log(3)

   - 특정 작업이 끝나기 전에 다른 작업을 진행할 수 있습니다.

   - setTimeout() 등의 메서드가 비동기 작업에 속합니다.

   - 비동기 코드 내에서는 순서대로 실행되지만, 도중에 다음 작업이 시작될 수 있습니다.

   - 시간이 많이 걸리는 작업, 소요되는 시간편차가 큰 작업에 사용하여 효율성을 높일 수 있습니다.

 

 

 

 

API 통신

console.log(1)

fetch('api 주소')
    .then(res => res.json())
    .then(data => console.log(data)

console.log(2)

   - 외부 API 통신을 통해 데이터를 전송하고, 데이터를 받을 수 있습니다.

   - 각 API 서버의 반응시간과 네트워크 상태에 따라 통신시간이 다르기 때문에, 효율성을 위해 비동기로 처리합니다.