TIL 41일차
해시테이블 코드 분석 계속과 비동기성에 대해서
Today’s Key 🔑
- 페어님과 계속 작업했던 해시테이블 코드를 계속 분석하고 리사이즈가 되지 않는 문제를 찾고있다.
- 자바스크립트가 가지는 비동기성의 혜택에 대해서 공부했다.
비동기적 처리와 비동기성이 프로그래밍에서 중요한 이유
웹 서비스는 사용자, 즉 클라이언트의 요청에 의한 서버의 응답으로 작동한다. 그 과정에서 모든 처리가 동기적으로 된다면 클라이언트는 엄청난 답답함을 느낄것이다. 예를들면, 유튜브를 볼 때 동영상 재생을 기다리면서 다른 영상을 찾아볼 수 없다는 사실과 같다.
그래서 현실 프로그래밍에서 우리는 ‘비동기적 처리’를 중점적으로 다룬다. 클라이언트가 서버에 요청을 하고, 응답이 올 때까지 다른 일을 멈추는 것이 아니라, 다른 작업을 새로 시작하는 처리. 그것이 비동기적 처리이다. 우리가 유튜브 영상을 틀어놓고 다른 영상을 찾아보는 작업과 동일하다.
자바스크립트에서ajax 통신과 setTimeout()과 같은 타이머 함수등이 비동기의 대표적인 사례라고 할 수 있다. 하지만 비동기성이 가진 단점은 우리가 실행 자체를 통제할 수 없다는 것이다. 브라우저는 기본적으로 비동기적으로 작업을 처리하기 때문에 순서가 필요한 작업들을 우리는 통제해줄 필요가 있다. 그래서 우리는 다양한 방법으로 Async, 즉 비동기를 다룬다.
Async 다루기 01. 콜백함수
const printString = (string, callback) => {
setTimeout(() => {
console.log(string);
callback();
}, Math.floor(Math.random() * 100) + 1);
};
const printAll = () => {
printString("a", () => {
printString("b", () => {
printString("c", () => {});
});
});
};
printAll(); // -> 'a', 'b', 'c' 순서대로 나온다.
위의 코드에서 printString 함수는 입력받은 문자열을 랜덤한 시간 이후에 콘솔에 찍고, 그 후에 콜백함수를 동작시킨다. 그래서 아래에 실행된 printAll() 함수에 꼬리를 물고있는 콜백함수 루틴을 볼 수 있다. 위의 printAll() 함수처럼 콜백이 꼬리를 물면서 가는 행태를 우리는 ‘콜백 지옥’ 이라고 한다. 가독성이 떨어지고, 쉽게 로직을 변경하기 어렵기 때문이다.
신경치료를 한 이가 나를 너무 아프게 한다. 콜백지옥에서 벗어날 수 있게 도와주는 프로미스와 async-await 는 내일의 til에서 정리하고자 한다. 🤯