동기 vs 비동기(aysnc/await)

박광민·2023년 4월 5일
0
  • 데이터를 주고받기 위해서 브라우저에서 데이터를 요청할 때
    • 동기 -> 기다림(한 작업이 끝나야 다음작업이 진행됨)
    • 비동기 -> 기다리지 않음(한 작업이 완료되길 기다리지않고 다음작업 진행)

동기(synchronous)

  • 장점
    • 코드가 아주 간단
      -> 코드의 실행흐름 읽기쉬움(작업이 순차적으로 진행되므로)

  • 단점
    • 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 없음
      -> 느림

비동기(asynchronous)

  • 장점
    • 여러 작업을 동시에 수행할 수 있음
      -> 성능 향상

  • 단점
    • 코드가 복잡
      -> 작업이 완료될 때까지 결과를 기다리지 않기 때문에 코드의 실행 흐름을 이해하기 어려움(동기보다 오류처리가 어려움)

aysnc/await

  • 비동기작업 수행하는 함수에서 사용됨
    • aysnc -> 비동기함수임을 나타냄
    • await -> 작업이 완료될 때까지 대기
      -> 콜백지옥을 방지할 수 있음
      (콜백함수를 사용하지 않고도 비동기 작업을 보다 간결하고 가독성 높은 코드로 처리할 수 있음)

콜백지옥에 대한 사전지식

  • 비동기 작업이 많아지면 발생하는 문제
    -> 콜백 함수를 계속 중첩해서 사용하면
    -> 코드의 가독성이 떨어지고 유지보수 어려움
    -> Promise나 aysnc/await를 사용해서 해결함

콜백함수에 대한 사전지식

  • 함수의 인자로 들어가는 함수
    (다른 함수에게 전달되서, 나중에 그 함수 안에서 실행되는 함수)
function aaa(qqq) {
...함수 로직
}

aaa( function( ){ } )
aaa( ( ) => { } ) 
// 이것도 가능

// 위와 같은 코드에서, aaa함수의 인자에 들어가는 function(){}를 callback함수라함
profile
developer(Frontend)

0개의 댓글