오늘은 API의 동기 비동기 데이터 전송에 관해서 학습했다
우리가 자바스크립트에서 노드를 사용한 서버 프로그래밍을 다룰때 처리하는 방식은
동기 / 비동기 처리방식으로 나뉘는데.
동기는 순차적, 직렬적으로 태스크를 수행하고, 비동기는 병렬적으로 태스크를 수행한다.
흔히 카페에서 커피를 주문하려고 하면 한줄로 서서 한번에 한명씩만 주문이 가능하다. 마치 큐처럼 선입선출의
과정이 코드실행의 처리 순서를 우리는 동기 방식이라고 부른다.
일단 주문이 들어가면 카페 내부의 점원들은 열심히 음료를 만들기 시작한다. 하지만 이떄 한명의 점원이 있는 것이 아니라 여러명의 점원이 있다면 주문 받은 순서대로 일을 처리하는 것이 아닌 각자 파트별로 음료를 나누어서 먼저 완성된 쪽이 음료를 내놓게된다.
이렇게 되면 1번 2번 순서대로 주문을 했더라도 2번의 음료가 먼저 완성이 되었다면 순서와 상관없이 2번의 진동벨이 울리고 먼저 음료를 받아갈수있는 것이다. 여기서 점원들을 비동기식, 즉 병렬적으로 태스크를 수행했다고 말할 수 있다.
이건 인터넷에서 본 예 인데 아주 이해가 쉬운거 같아 들고와봤다.
말그대로 동기는 요청 후 받아오는 응답에서 결과물을 받아야만 다음동작이 이루어지는 방식이다.
즉 모든 코드는 순차적으로 실행되며 이미 실행중인 코드가 있다면 다음 작업은 대기하게 된다.
function func1(){
console.log("1번입니다");
func2();
}
function func2(){
console.log("2번입니다");
func3();
}
function func3(){
console.log("3번입니다");
}
func1();
//1번입니다
//2번입니다
//3번입니다
직관적으로 쉽게 확인할 수 있는 장점이 있지만, 응답이 올 때까지 기다려한다는 치명적인 단점이 존재한다.
비동기는 만약 데이터를 백엔드에서 받아오는 앱 또는 웹을 만든다고할때 모든것이 동기 처리가 된다고하면
순차적으로 데이터를 받아오기때문에 화면으로 나오기까지 데이터가 많으면 많을수록 앱의 실행 및 동작이
현저히 비효율적으로 떨어질수밖에없다
function func1(){
console.log("1번입니다");
func2();
}
function func2(){
setTimeout(
console.log("2번입니다");
, 3000
);
func3();
}
function func3(){
console.log("3번입니다");
}
func1();
//1번입니다
//3번입니다
//2번입니다구조는 동기보다 복잡하다 하지만 응답이 오는 순서대로 결과가 바로바로 아웃풋이 나오기때문에
데이터 자원을 보다 효율적으로 사용할수있다.
(느낀점)
바디를짜고 데이터까지 넘기고 받는 초입단계는 구조가 복잡할수밖에없다.
하지만 JSX방식의 return문 위로 state를 사용하듯이 응용을해주면 점점 익숙해질것같다.
