이제 와서 정리해보는 동기, 비동기
동기, 비동기 개념은 공부할 수록 더 헷갈리는 느낌이다
OJT 교육 + 같은 팀원분의 추가 설명으로 어느 정도 스스로 개념이 잡힌듯!
📌 동기 (Synchronous)와 비동기 (Asynchronous)
📍 동기 방식
동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.
즉, A작업이 모두 진행될 때 까지 B작업은 대기해야 한다.
팀원분이 나에게 업무를 던져줬다. 동기 방식으로 업무가 진행되고 있다면?
팀원분은 내가 업무를 끝낼 때까지 뒤에서 가만히 기다리고 있을 것이다.
(아무 것도 하지 않고 뒤에서 가만히...)
📍 비동기 방식
비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다.
즉, A작업이 시작되면 동시에 B작업도 실행된다.
A작업은 결과값이 나오는대로 출력된다.
비동기 방식으로 업무가 진행되고 있다면?
팀원분은 내가 업무를 하는 동안 다른 팀원에게도 다른 업무를 던져줄 수 있고 본인 업무도 처리하고 있을 것이다.
(난 내가 할 일을 한 후에 결과물을 던져주면 된다)
📌 동기적 처리와 비동기적 처리
📍 동기적 처리
동기적 처리란 코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 말한다.
console.log("1st");
console.log("2nd");
console.log("3rd");이 코드 실행 결과는?
동기처리 방식인 JavaScript에서는 당연히 순서대로 1st > 2nd > 3rd로 찍힌다.
📍 비동기적 처리
비동기적 코드의 실행 결과는 동기적 코드가 전부 실행되고 나서 값을 반환한다.
console.log("1st");
setTimeout(() => {
console.log("2nd");
} ,0)
console.log("3rd");setTimeout 메소드가 들어간 이 코드 실행 결과는?
1st > 2nd > 3rd로 찍힌다.
setTimeout의 지연시간이 0으로 되어 있는데도 왜!?
setTimeout 메소드는 비동기적 API이기 때문이다.
- console.log("1st")를 만나고 콘솔에 1st를 찍는다.
- setTimeout 메소드가 비동기적 메소드이므로 이를 처리하는 다른 프로그램 (task queue)에 맡긴다.
- 그 후 바로 console.log("3rd")를 콘솔에 찍는다.
- setTimeout 메소드를 처리하는 프로그램은 비동기적 API를 제외한 모든 코드가 실행된 후에 결과를 콘솔에 찍는다.
async/await는 비동기 처리를 위해 사용하는 것! 이라고 생각했는데, 생각하면 할수록 데이터를 fetch해 온 후 가공하기 위해 async를 해주는거니까 동기적으로 데이터를 처리하기 위한거 아닌가..?란 의문이 생기며 개념이 꼬이기 시작했다.
async/await를 쓰는 이유는 javascript, react가 동기적 처리를 하므로 데이터를 fetch 해오는 동안 다른 코드를 읽지 않고 기다리고 있으니 fetch 하는 동안 다른 작업을 하기 위해 사용하는 것이다.
https://youtu.be/8aGhZQkoFbQ
팀원분께서 stack, queue를 이해하기 좋은 영상이라고 보내주셨다.
동기, 비동기를 공부하고 이 영상도 참고하니 개념이 잡혔다!
<참고 : https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC >
