[JS] 비동기란 무엇일까(feat. 동기)

알듯 말듯한 동기와 비동기..

Promise 등 비동기 처리하는 방식들을 공부하기 전 비동기가 무엇인지 짚고 넘어가봐야겠다.

 

https://learnjs.vlpt.us/async/

동기는 '동시에 일어난다'는 뜻으로 요청과 결과가 동시에(한번에) 일어남을 의미한다.

즉, 선행 작업이 끝나고 난 후 후행 작업을 진행한다.

console.log('첫번째');
console.log('두번째');
console.log('세번째');

뭐.. 자연스럽게 위와 같이 코드를 작성하면 순서대로 나오는 것을 알고있다. 이게 바로 동기적인 상황!

동기는 설계가 간단하고 직관적이지만, 결과가 나올 때까지 기다려야한다.

결과가 나올 때까지 기다려야한다는게 코드양이 적을 땐 큰 영향이 없겠지만,

만약 코드가 길고 불러오는 양이 많다면? 모든 코드가 실행 될 때까지 화면에 딜레이가 생길 것이다.

이런 딜레이를 줄이고자 사용하는 것이 바로 비동기!

 

 

https://learnjs.vlpt.us/async/

비동기는 '동시에 일어나지 않는다'를 뜻하며 요청과 결과가 동시에(한번에) 일어나지 않음을 의미한다.

즉, 선행,후행이 동시에 진행된다. 이 말은 곧 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 됨을 말한다.

비동기는 동기보다 복잡하지만, 선행,후행작업이 동시에 진행되므로 좀 더 효율적인 일처리가 가능하다.

비동기적으로 처리하는 작업들은 아래와 같다.

• Ajax Web API 요청: 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다.
• 파일 읽기: 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리합니다.
• 암호화/복호화: 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리합니다.
• 작업 예약: 단순히 어떤 작업을 몇초 후에 스케쥴링 해야 하는 상황에는, setTimeout 을 사용하여 비동기적으로 처리합니다.

console.log('첫번째');

setTimeout(() => {
    console.log('두번째');
}, 3000);

console.log('세번째');

비동기 방식으로 실행되는 setTimeout() 메소드를 이용했을 때의 결과는 위와 같이 나온다.

 

1. '첫번째'가 출력되고

2. setTimeout()을 만났다. 비동기 방식으로 실행되므로 setTimeout()을 실행하고 다음 코드인 '세번째'로 넘어갔다.

3. '세번째' 출력

4. 3초 후 '두번째' 출력

 

비동기 방식을 처리하는 방법인 동기 방식의 코드를 모두 처리하고 난 후 결과를 낸다고 하는 것도 참고!

 

이것저것 찾아보며 이번 기회에 '비동기'에 대해서 좀 더 깊게 이해하게 된 것 같다.

그래서 어디에 써야하는지, Axios 통신에 비동기가 '왜' 필요한지 이런게 궁금했는데 조금 해결된 것 같다.

 

 

 

 

https://sudo-minz.tistory.com/21

비동기 통신과 AJAX (동기 비동기의 개념, 차이,장단점, 예시, 콜백함수, 콜백지옥)

 

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

 

https://www.freecodecamp.org/korean/news/https-www-freecodecamp-org-news-javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/

자바스크립의 콜백 함수 – 자바스크립트에서 콜백 함수가 무엇이고 어떻게 사용하는지 알아