비동기와 동기.
가끔가다보면 정의되어 있는 용어가 왜 그 뜻인지 생각해보아야 하는 no직관성에 짜증날때가 있다.
귀찮아서 그냥 직역해놓은 것인지 무튼 헷갈려서 다시 찾아봤다.
Synchoronous (동기) : start from the top of the file and exectue all the way down to bottom of the file
java의 기본 코드 수행과 비슷하다. 수행하는 행위를 top에서부터 bottom까지 순차적으로 진행하고 모든 코드가 order에 맞추어 진행된다.
예를 들어, 누군가에게 $5를 보내기 위하여 거치는
procedure : 액수 입력 -> 전송하기 클릭 -> 수신자에 전달 완료 -> 나와 상대방에게 각각 송금/수신이 완료되었습니다 (동시 팝업)
는 동기에 해당되는 방식이다.
왜냐? 위의 procedure는 순차적으로 일어나야 마지막 목적에 도달할 수 있고 만약 순서가 뒤바뀌어 버리면 목적에 도달하는데 문제가 생기기 때문이다.
Asynchoronous (비동기) similar to the that of Synchoronous. but, during that execution it will run into ascynchoronous function or code, or it split off and execute that asynchoronous code seperately from the rest of the code and that's usually because it used to wait..
동기 방식과 동일하게 top to the bottom으로 코드를 수행한다. 다만 중간에 asynchronous function이 삽입되어 있을 시, 이를 수행하거나 아니면 코드에서 뜯어내어 마지막에 수행한다.
마지막에 수행하는 이유는 -> 코드가 수행되기까지 시간이 걸리기 때문인데 시간이 걸리는 이유는 여러가지가 될 수 있다.
그 중 한 가지 이유는 개발자가 직접 delay time을 걸어놓은 경우다.
아래에 첨부되어 있는 코드는 개발자가 애초에 setTimeOut function으로 코드를 실행하는 시간을 100ms로 설정해놓았다.
우측 콘솔 창에 보면 colesole.log(a), conesole.log(b) 가 먼저 실행된 것을 볼 수 있다.
100ms 을 기다리는 동안 다른 코드를 먼저 수행한 것이다.
아래 사진은 많이 헷갈려 하는 개념이라고 하는데, 코드 중간에 보면 a =10으로 allocate 해두었다.
a 는 중간에 10이라는 값을 할당받고 console.log('Synchronous'), (a), (b)를 수행했다. 때문에 콘솔 창에도 a 는 10의 값을 출력하고 있으며, 그 이후에 수행된 비동기 function인 setTimeOut 또한 10을 출력하고 있다.
=> top of code page에서 변수 a 가 할당받은 값이 1일지라도 function은 a 가 10을 allocate받은 다음에 수행되었기 때문에 function 안의 a 또한 10을 배정 받는 것이다.
위에서 적어두지 못한 콜백함수
(https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/) 참고.
다시 한번 짚고 넘어간다.
보면 setTimeOut이라는 내장 객체 안에 함수가 들어가 있다. 어떤 특정 이벤트가 발생할 시에, 자동으로 호출되는 함수를 콜백 함수라고 하는데 사용하는 경우는 아래 네 가지로 보면 된다.
1.사용자 이벤트 처리
브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하다.
따라서 이런 화면이벤트를 관리담당하는 녀석에게 우리는 특정이벤트가 발생할 때 호출을 원하는 내용을 callback 함수에 전달하게 된다.
2.네트워크 응답 처리
화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없다.
따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 한다.
3.파일을 읽고 쓰는 등의 파일 시스템 작업
4.의도적으로 시간 지연을 사용하는 기능(알람 등)
위와 같이 이벤트 등을 기다리는데 하나뿐인 소중한 스레드를 사용한다면, 또 서버의 응답을 기다리기 위해 하나뿐인 소중한 스레드를 사용한다면…
사용자는 멈춰져 있는 화면을 보게되는 것이다.
위와 같이 스레드의 블록킹을 야기하는 작업은 필수적으로 비동기적 프로그래밍을 해야 한다.
+ 콜백함수를 인자로 받을 경우, name 만 입력하면 된다. ()생략.
'Lang > JavaScript' 카테고리의 다른 글
| AJAX (0) | 2022.06.06 |
|---|---|
| 리마인드 (0) | 2022.06.05 |
| exam11 - 25 / drill ( + return 쓰임) (0) | 2022.06.05 |
| exam01 - 10 / drill (0) | 2022.05.27 |