Vue를 접하면서, 아니 프론트를 공부하면서 계속 나오는 비동기! 감이 잡히지만 확실히 알고 넘어가자.
동기 Vs 비동기 처리 방식의 차이까지 정리하자.
동기와 비동기는, 프로세스 수행 순서에 대한 메커니즘이며,
동기/blocking - 비동기/Non-blocking 으로 연관지을 수 있다.
동기(Synchronous)
1. 동기(Synchronous) 방식의 정의
- 프로그래밍에서 말하는 동기는, '동시에 발생해야 하는 조건'으로,
- JavaScript에서 작성한 코드는 위에서 -> 아래로 순차적으로 실행이 되며,
- 상위 코드가 완료되지 않는다면 ? - 하위 코드 역시 실행이 디지 않는다는 것이다.
-> 즉, 동기 = [모든 코드가 '순서'를 가지고 실행이 되는 것]
2. 동기방식의 처리 순서
- Thread1이 작업을 시작시키고 -> Task1이 끝날 때까지 기다렸다가 -> Task2를 시작한다.
- 작업 요청 시, 요청의 결과값(return)을 '직접' 받는 것이다.
- 요청의 결과값을 직접 받는 것이므로, 요청의 결과값 = return값
비동기(Asynchronous)
1. 비동기(Asynchronous) 방식의 정의
(1) 정의
- 비동기 방식은, [응답에 관계없이 바로 다음 동작이 실행되는 것] 을 의미한다.
-> 현재 작업의 응답과, 다음 작업의 요청이 동시에 진행도지 않아도 되는, 즉 기다리지 않아도 되는 것이다.
- 특정 작업을 시작(Request 보내기) -> 완벽하게 처리(Response 받아 처리) 하기 전에!
다음 코드로 넘어가고 -> [나중에 콜백이 실행되는 것]
+ ) 성격이 급해서 뭔가 일단 다 해결하고 봐야하는 그런 느낌이다.
2. 콜백 함수(Callback Function)
(1) 콜백 함수의 정의
- 콜백함수란, 파라미터(매개변수)로 함수를 전달받아 -> 함수의 내부에서 실행하는 함수이다.
- 매개변수로 넘겨받은 함수는 일단 넘겨 받고 -> '때가 되면, 나중에 호출' 한다는 것이다.
(2) 콜백 함수 사용 목적
- 콜백 함수는, 비동기 방식으로 작성된 함수를 -> 동기 처리 하기 위해 주로 사용한다.
- 비동기 방식을 기본 처리 방식으로 하지만, 일부 구간에서는 순차적인 처리가 필요할 수 있기 때문이다.
즉, 비동기 방식이 응답을 받기 전에도 다음 동작이 실행되지만, '응답을 받은 이후 처리해야 하는, 종속된 관계
의 작업'이 존재할 수도 있기 때문이다.
+ ) 일종의,, 사고 방지용 이런건가?
(3) 콜백 함수 사용 형태
- 함수를 선언하고 -> 함수 타입 파라미터를 가장 마지막에 하나 더 선언
function checkAge(age, name, gender) {
age < 20 ? name() : gender();
}
function checkName() {
console.log('이름은 무엇인가요?');
}
function checkGender() {
console.log('성별은 무엇인가요?');
}
checkAge(23, checkName, checkGender)
(4) 콜백 함수 사용 원칙
1) 익명 함수 사용
2) 함수의 이름만 넘기기
3) 전역변수, 지역변수 콜백함수의 파라미터로 전달 가능
(5) 콜백 함수 사용 시 주의점
1) this를 사용한콜백함수
2) 콜백 지옥(Callback Hell)
+ ) 콜백 함수(Callback Function) 내용은 다른 게시글에 해당 목록 상세 기재.
3. 비동기 처리 순서
- Thread1이 작업을 시작시키고 -> Task1이 완료되지 않아도 -> Thread1은 다른 일을 처리한다.
- 작업 요청 시, 요청의 결과값(return)을 '간접적으로' 받는 것이다.
- [요청의 결과값 != return값] or [요청의 결과값 == return값]
- 해당 요청 작업이 별도의 스레드에서 실행
- 콜백을 통한 처리 = 비동기 처리 -> 호출된 함수가 작업 완료를 신경쓴다.
4. 웹 통신에서의 비동기
- 자바스크립트 웹 통신에서는 통신이 비동기 실행으로 진행된다.
Ex) 웹 페이지가 로딩되거나, 어떤 이벤트의 소요시간이 길어질 경우, 화면이 나타나지 않거나, 의도하지 않은 동작
이다. 따라서, 비동기 방식을 토해 페이지 현재 로딩 상태를 알 수 있게 한다.
blocking Vs Non-blocking
- blocking과 Non-blocking은 주로 IO의 읽기, 쓰기에서 사용된다.
- 주로 직접 제어할 수 없는 대상의 처리 방법에 따라 나뉘며,
- 그 대상의 예시로는, I/O 장치, 멀티스레드 동기화가 있다.
1. blocking
- 직접 제어할 수 업슨 대상의 작업이 끝날 때까지 제어권을 넘겨주지 않는 것
- 즉, 요청한 작업을 마칠 때까지 계속 대기
- 즉시 return 하며, return 값을 받아야 끝이 난다.
- 따라서, 작업이 순차적으로 진행되는 것이 보장되고, 따라서 어떤 작업의 진행 중에는 다른 작업의 동시 진행이 불가능하다.
- Thread 관점에서, 요청한 작업을 마칠 때까지 계속 대기하여 -> return 값을 받을 때까지 한 Thread를 계속 사용 및 대기한다.
2. Non-blocking
- 직접 제어할 수 없는 대상의 작업 처리 여부와 관계없이, 자신의 작업을 진행하는 것
- 요청한 작업을 즉시 마칠 수 없다면 -> 즉시 return
- Thread 관점에서, 하나의 Thread가 여러 개의 IO 처리가 가능하다.
동기와 비동기 - blocking과 Non-blocking 차이
- 동기와 비동기 / blocking과 Non-blocking의 차이는 두 그룹의 관심사가 다르다는 것이다.
1. 동기와 비동기
- 호출되는 함수의 [작업 완료 여부]를 [누가] 신경쓰는가?
| 비동기 | 동기 |
| 호출되는 함수에게 Callback 전달 -> 호출되는 함수의 작업이 완료되면, -> 호출되는 함수가 전달받은 Callback 실행 -> 호출한 함수는 작업 완료 여부를 신경쓰지 않는다. |
1. 호출하는 함수가 호출되는 함수의 작업 완료 후 return 기다리기거나 2. 호출되는 함수로부터 바로 return을 받아도 작업 완료 여부를 호출한 함수 스스로 확인하며 신경쓴다. |
2. blocking과 Non-blocking
- 호출되는 함수가 [바로 return] 하느냐 마느냐?
| Non-blocking | blocking |
| 호출된 함수가 [바로 return] -> 호출한 함수에게 제어권을 넘겨주고 -> 호출한 함수가 다른 일을 할 기회를 준다. |
호출된 함수가 자신의 작업을 모두 마칠 때까지 -> 호출한 함수에게 제어권을 넘겨주지 않고 -> 대기하게 만든다. |
Combinaton of Synchronous/Asychronous - blocking/Non-blocking
1. blocking + Synchronous(동기) / Non-blocking + Asynchronous(비동기)
(1) blocking + Synchronous
- 결과 처리까지 기다렸다가 -> return 값으로 결과 전달
(2) Non-blocking + Asynchronous
- 작업 요청을 받아 -> 별도의 프로세서에서 진행하게 하고 + 바로 작업 return
-> 결과는 별도의 작업 후 간접적으로 전달(Callback)
2. Non-blocking + Synchronous(동기)
- 결과가 없다면 -> 바로 return
- 결과가 있으면 -> 바로 return
-> 결과가 생길 때까지 완료 확인
3. blocking + Asynchronous(비동기)
- 호출되는 함수가 바로 return X
- 호출하는 함수는 작업의 완료 여부를 신경쓰지 X
참고
- https://bigtop.tistory.com/35 (Callback)
- https://goplanit.site/94.%20Synchronous_asynchronous/
'Programming > Web' 카테고리의 다른 글
| [Web/DL] Django 기반의 자연어 처리 서비스 구현 (0) | 2022.02.22 |
|---|---|
| [Web Server] Django와 Web Server (0) | 2022.02.22 |
| [Web] JPA와 Hibernate, Spring Data JPA (0) | 2022.01.18 |
| [Web] application.properties / application.yml (0) | 2022.01.18 |
