JS 4차시 - 비동기

JS성질

JS는 기본적으로 동기적 언어이다
-> 싱글 스레드 언어 ( 스레드 : 코드가 실행되는 흐름 )

한번에 하나의 일만 처리 가능
프로그램 난이도 쉽고 cpu와 메모리 적게 사용
연산량 많은 작업 수행시 멀티 스레드 필요

동기란

말 그대로 동시에 일어난다는뜻
-> 요청과 동시에 결과가 나타남
-> 시간이  늦어져도 요청한 자리에서 결과가 나와야됨
-> 순서에 맞춰서 진행 가능하다는 장점
-> 여러 요청을 한번에 처리 할 수 없다는 단점

비동기란

말 그대로 동시에 일어나지 않는다는 뜻
-> 요청후 응답과 상관 없이 다음 작업 실행
-> 여러 요청 동시에 받고 시간과 관계 없이 응답
-> 서로 다른 작업을 동시에 처리 가능하다는 장점
-> 설계가 복잡해지고 코드 가독성이 떨어진다는 단점

비동기를 쓰는 이유

JS는 웹 페이지의 응답 시간을 결정함
-> JS는 빨라야함
그런데 기본적인 동기적인 방식을 쓴다면
-> 웹 페이지 로드 시간이 너무 늦어짐
=> 결론적으로 응답시간과 자원 효율성을 위해 사용

비동기적 코드 예시

console.log("1. 햄버거 주문함");
setTimeout(function() {
console.log("2. 햄버거 완성됨 (30초 걸림)");
}, 30000);
console.log("3. 콜라 마시기 시작");

Settimeout 함수는 함수의 실행 시기를 정할 수 있음

비동기적 처리의 문제점

동기적 코드와 비동기적 코드를 같이 쓰면
순서 문제가 발생함
-> 실행해야할 코드를 건너뛰거나 논리적 비약 발생
-> 순서를 맞춰주는 callback함수 필요

Callback 함수란

다른 함수의 인자로써 넘겨져 특정 이벤트에 호출됨
-> 파라미터, 즉 하나의 값 취급

Callback 함수 사용 안했을때

console.log("1. 피자 주문");
setTimeoutfunction) {
console.log("2. 피자 도착! 먹는다");
}, 30000);
console.log("3. 설거지");

코드를 보면 피자를 먹기도 전에 설거지를 하게됨
즉, 코드가 말이 안됨

Callback 함수 사용 했을때

function pizza(callback) {
console.log("1. 피자 주문");
setTimeout(function () {
console.log("2. 피자 도착! 먹는다");
피자 다 먹고 나서 설거지 시작
callback();
},3000);
function dishes) {
console.log("3. 설거지 시작");
}
pizza(dishes);

Callback 함수를 사용시
-> 원하는 함수의 실행 시간을 정할 수 있음

Callback 함수는 만능이 아니다

callback 함수 과다시
-> 가독성 떨어짐
-> 요류 수정 힘듦
=> callback 지옥
-—>>> 해결 방법은 promise 객체

Promise 객체

어떤 작업의 상태 정보를 갖는 객체
작업 결과가 객체에 저장됨
객체를 보고 함수 실행의 성공 여부를 알 수 있음
-> 가독성 높혀줌