220929_TIL
오늘 한 일
- 동기/비동기/콜백함수 개념
- 콜백함수 대신 깔끔하게 작성할 수 있는 promise문법
- promise와 then을 좀 더 쉽게 작성하기 위한 최신문법인 async와 await문법
javascript는 병렬처리가 잘 되는 언어가 아닌, 항상 동기적 처리를 하는 언어이다. 동기적 처리란, 한번에 코드 한 줄씩 실행된다는 소리이다. 자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행 공간이 있는데 거기서 코드 한줄한줄 차례로 실행한다.
<script>console.log(1); console.log(2); console.log(3);</script>
이렇게 작성하면 상단부터 차례대로 1,2,3이 출력된다 이렇게 순서대로 한 줄씩 실행하는게 동기적 처리이다.
javascript는 다른 언어와 다른 이상한 특징이 있다.
console.log(1);
setTimeout(function () {}, 1000);
console.log(2);
1을 출력하고 1초 있다가 2를 출력하고 싶지만 1과 2는 동시에 출력된다. setTimeout, Ajax관련 함수, 이벤트리스너와 같은 읽는 시점과 동작 시점이 다른 코드들은 stack이 아닌 Web API로 이동되어 대기하다가 queue로 옮겨진 후 stack이 아무 코드도 실행하지 않는 순간 stack으로 이동되어 차례대로 실행된다.
이처럼 이런 몇몇의 코드들은 동기처리를 하는 javascript를 비동기적 처리를 할 수 있도록 도와준다.
javascript에서 1을 출력하고 1초 후에 2를 출력하기 위해선 그럼 어떻게 할까. 바로 콜백함수를 이용해야 한다.
console.log(1);
setTimeout(function () {
console.log(2);
}, 1000);
console.log(3);
콜백함수란 함수 안에 들어가는 함수를 말하는데 원하는 시기에 함수를 호출할 수 있다. 위처럼 코드를 짜면 1과 3이 동시에 출력된 후 1초 후에 2가 출력된다.
그래서 결과적으로
function 첫째함수(콜백) {
console.log(1);
콜백();
}
function 둘째함수() {
console.log(2);
}
첫째함수(둘째함수);
이렇게 하면 콜백함수를 이용한 1과 2를 순차적으로 출력할 수 있다. 첫째함수()의 인자로 함수명이 아닌 익명함수를 넣을 수도 있다. 콜백함수는 계속 반복해서 쓰게 되면 콜백지옥이 생겨 코드가 지저분해보이는 단점이 있는데 이를 깔끔하게 쓰려면 Promise 문법을 사용하면 좋다.
Promise 문법은 성공/실패 판독기라고 생각했더니 이해하기가 쉬웠다.
var 프로미스 = new Promise(function (resolve, reject) {
resolve();
});
프로미스
.then(function () {
console.log('성공했어요');
})
.catch(function () {
console.log('실패했어요');
});
resolve는 성공, reject는 싪패 즉 원하는 코드를 실행하고 그 코드를 성공한다면 then에 있는 코드가 실행이 된다. 실패했을 경우 catch의 코드가 실행이 된다. then과 catch말고도 finally라는 것도 있다. 무언가 실행이 된다면 성공,실패 상관없이 finally의 코드가 실행이 된다.
프로미스 문법에선 소괄호 안에 무언가를 넣어 값을 도출할 수도 있다.
promise의 문법을 좀 더 다른 편하게 사용하고 싶다면 es8문법인 async와 await 문법으로 디자인 하는 방법도 있다. 중요한건 프로미스 문법이나 async문법 같은건 javascript에서 비동기적 처리를 하도록 해주는 마법이 아니라 단순 콜백함수 디자인을 깔끔하게 하는 수단이란 것이다. 이 문법들 안에 아까 설명한 setTimeout이나 Ajax, 이벤트리스너 함수들을 적으면 그 때 비동기적 처리가 되는 것일뿐이다.
느낀 점
아직 사이드 프로젝트 같은건 만들어 보지 못했지만 문법만 이렇게 하는데도 이런 것들이 너무 재밌다. 프로미스 문법은 저번에 해봤을 때 정말 어려웠는데 혼자서 많이 찾아보고 오늘 또 공부를 해보니 재미있었다. 확실히 전에 코드는 눈으로 볼 땐 다 아는 것 같고 나중에 칠 수 있겠다라고 생각하지만 실제로 그 상황에 닥치면 평소에 많이 쳐보지 않는 이상 어렵다는 것을 깨달은 적이 있어서 오늘 많이 쳐보고 예제를 따라해보고 내가 직접 콘솔 창에서 왜 안나오지, 나오지 등을 고민해보고 수정해보니까 손에 점점 익는게 느껴졌다. TIL을 작성하면서 나 혼자 아무것도 안보고 코드를 쳐가면서 작성하는데 기분이 좋다.
댓글남기기