TIL: 2022-09-23

⚙️ 오늘 배운 주제

고차함수 응용, 비동기

 

🐹 오늘의 기분

오늘은 거의 하루종일 과제만 했다. 과제에서 멘탈 탈탈 털리고 진빠져있는데 또 비동기까지 공부해야 해서 완전히 넋이 나가버렸던 하루였다. 자바스크립트 라이브러리인 Underscore.js를 모티브로 underbar 라이브러리를 직접 구현해보았다. 여름에 들었던 자료구조 강의에서 자료구조를 직접 구현해보는 게 늘 과제로 있었어서 감이 아예 없진 않았다. 떠오르는 삽질의 기억... 다만 콜백함수를 이용하는 게 아직 익숙하지 않아서 코드를 쓰다가 이게 맞나?하고 머리가 자꾸 멈췄다. 예시 코드와 페어분의 구글링 실력이 없었다면 아예 못 풀었을 것이다. 

비동기는 유어클래스에 있는 개념 영상 보기에도 시간이 빠듯해서 코드를 직접 작성해보지 못했다. 그래서 대충 개념은 잡은 상태이지만 완전히 이해하지는 못했다. 이런 상탠데 다음 주에는 따로 학습 시간도 없이 바로 또 과제라 심히 걱정된다. 섹션 2 맵다 매워..  과제 내용을 올릴 수는 없어서 오늘 TIL의 남은 내용은 비동기를 공부하고 와서 마저 채워넣어야겠다. 

 

🗝 키워드

비동기, blocking, non-blocking, 콜백함수, iterator, iteratee, sync, async, promise, .then, callback hell, promise hell, fetch

 

🗣 스스로에게 설명

iterator = 반복 시키는 것, iteratee = 반복적으로 실행되는 작업

 

비동기는 몇 번 봐서는 이해가 안 돼서 여러 자료를 찾아보았다. 

그 중에서도 배민 테코톡, 얄팍한 코딩사전에서 올려준 비동기 관련 영상이 이해에 도움이 됐다.

 

동기 처리: 현재 태스크가 종료될 때까지 다음 태스크는 대기하는 방식, 코드가 무조건 작성된 순서대로 실행된다고 이해할 수 있다.

실행 순서가 보장됨, but 앞 태스크가 종료될 때까지 다른 태크스들이 blocking됨. 

비동기 처리: 현재 태스크가 실행 중인 상태이더라도 다음 태스크를 바로 실행함. 

 

자바스크립트 엔진은 단 하나의 실행 컨텍스트만 갖기 때문에 동시에 2개 이상의 함수를 실행할 수 없다.

따라서 시간이 좀 걸리는 작업을 실행하면 그 작업이 실행되는 동안 다른 작업은 할 수가 없게 된다. (blocking 발생)

 

blocking = 한 작업을 하는 동안에는 다른 작업을 못 함

non-blocking = 한 작업이 완료될 때까지 다른 작업을 할 수 있음

sync = 한 작업이 완료되면 그 작업의 결과를 바로 처리함

async = 한 작업이 완료되면 그 작업의 결과를 유동적으로 처리함 

blocking과 non-blocking은 작업의 주도권 관점, sync와 async는 작업의 결과, 순서 관점이라고 이해했다.

 

짜장면 배달을 생각해보면 된다. 코드는 얄팍한 코딩사전의 영상을 참고하였다.

짜장면 배달부가 한 집에 가서 고객이 짜장면을 다 먹을 때까지 기다렸다가 빈 그릇을 받고 다음 집으로 출발한다.

-> 작업이 완료될 때까지 기다리므로 blocking, 다 먹자마자 바로 빈 그릇을 가져가므로 sync 

한 집에 짜장면을 배달하고 손님이 다 먹을 때까지 다른 집 배달도 다녀온 후 문 앞에 내놓은 빈 그릇을 가져간다.

-> 작업이 완료될 때까지 다른 작업도 수행하므로 non-blocking, 다 먹은 결과물인 빈 그릇은 즉시 처리하지 않고 다른 집을 다 돌고 난 후에 알아서 가져가므로 async 

 

짜장면 배달 1 (동기)

function syncBlackBean() {
    console.log("짜장면 배달됨");

    console.log("식사 완료");

    console.log("배달부 떠남");
}

syncBlackBean();

// 짜장면 배달됨
// 식사 완료
// 배달부 떠남

배달부는 고객이 짜장면을 다 먹어야만 떠날 수 있다.

 

짜장면 배달 2 (비동기)

function asyncBlackBeanTimer(seconds) {
    console.log("짜장면 배달됨");

    setTimeout(
        function () {
            console.log("식사 완료");
        }, 
        seconds * 1000
    );

    console.log("배달부 떠남");
}

asyncBlackBeanTimer(1);

// 짜장면 배달됨
// 배달부 떠남
// (1초 후)
// 식사 완료

이 함수는 고객이 짜장면을 먹는 시간을 인자로 받는다.

고객이 짜장면을 먹는 것은 시간이 꽤 걸리는 작업이기 때문에 그걸 다 기다리지 않고 다음 작업을 실행하도록 작성된 코드이다.

배달부가 떠나고 인자로 받은 시간이 지난 후에 고객이 짜장면을 다 먹었다는 "식사 완료"가 출력된다.

 

자바스크립트에서 비동기 처리 방식으로 동작하는 것

타이머 함수 setTimeout, setInterval

HTTP 요청, 이벤트 핸들러

 

내가 참고한 영상들이다

(블로그 스킨을 손대다가 뭘 잘못했는지 유튜브만 올리면 여백이 너무 크게 생겨버려서 링크로만 올린다.)

얄팍한 코딩사전 -> https://www.youtube.com/watch?v=m0icCqHY39U

배민 테코톡 -> https://www.youtube.com/watch?v=oEIoqGd-Sns

 

❓ 막히는 or 막혔던 부분

blocking, non-blocking, sync, async의 차이가 잘 이해되지 않았었다.

 

🔍 공부가 더 필요한 부분

자바스크립트 엔진의 동작 방식

실행 컨텍스트

이벤트 루프

태스크 큐