동기적 vs 비동기적

동기적 vs 비동기적

동기와 비동기는 이번에 React를 배우면서 특히더 자주 들었던 내용이다. 그동안 대충 저런 뜻이겠지 이런 뜻이겠지하고 추측성으로 이해한 뒤에 넘어갔는데 이번에 포스팅을 하면서 동기적 작업과 비동기적 작업의 차이를 재대로 정리해보기로 하였다.

쉬운 비교 (p2p 파일 다운로드)

둘의 차이를 쉽게 비교하자면 옛날에 p2p사이트에서 파일을 다운 받을 때 다운 받는 옵션중 하낙가 하나씩 다운 받기 방식과, 멀티 다운 받기 방식이 있는데 하나씩 다운은 동기적, 멀티 다운 받기는 비동기적 이라고 이해하면 될 것같다.

동기적 처리(Synchronous)

동기적 작업은 내가 코딩 초기에 학습한 코딩처럼 순서대로 진행되는것 위에서 아래로 코드가 순서대로 실행이 되는 것을 동기적 처리라고 한다. 즉 지금 진행하는 작업이 끝이나면 다른 작업으로 넘어가고 그 작업이 끝이 나면 다른 작업으로 넘어가는 방식이 동기적 처리 방식이라고 한다.

비동기적 처리(asynchronous)

비동기적 처리 작업은 순서대로 진행하는 것일 아니라 한번에 여러개가 진행되는 것과 마찬가지다. 비동기적 처리는 주로 api요청, 파일읽기, 암호화, 복호화 등에서 자주 사용된다.
비동기적 처리를 사용하는데 주로 사용되는 함수와 문법으로는 callback 함수와 Promise, async/await 문법 등이 존재한다.

callback

콜백 함수는 특정 함수가 끝난 다음에 어떤 작업을 진행하고 싶을 때 콜백 함수를 사용한다. 사용 방법은 특정 함수의 파라미터로 콜백 함수를 작성하여 넣어주면 된다.

Promise

promise는 ES6 문법에서 도입된 문법으로 기존의 callback함수의 가독성을 개선시켜 나온 문법이다. promise는 두개의 파라미터를 받고 각각 성공 했을 때와 실패 했을 때를 각각 나눠 어떤 작업을 실행할지 정해주는 문법이다. 이 promise의 장점으로는 비동기 작업의 개수가 많아져도 가독성이 떨어지지 않다는 점이다. 하지만 단점으로는 오류가 발생했을 때 발생위치를 알기가 힘들고 까다로운 작업을 하기에는 무리가 있다는 점이다.

async/await

async/await문법은 ES8 문법에서 추가된 문법인데 이는 기존의 Promise문법을 보완해서 나온 문법이다. 해당 문법을 사용하기 위해서는 반드시!!! 함수 앞부분에 async라는 키워드를 입력하여 해당 함수가 비동기 함수라는 것을 선언해줘야한다. 그런뒤 내부의 Promise의 앞부분은에 await 키워드를 사용하여 해당 작업이 끝날 때 까지 기다렸다가 다음 작업을 실행한다는 것을 알려줘야 한다. 해당 문법에서 애러가 발생을 할 때는 try/catch를 사용하여 애러를 잡아낼수있다.

이해가 안될 경우 이전에 작성한 글을 다시 한번 확인해보자
Promise