배운 것
콜백 함수의 내부의 this에 다른 값 바인딩하기
this를 강제로 제어(전통적 방식)
실제로는 this를 사용하지않음, 번거로움.
closure 방식 - 현재의 함수가 끝났음에도 불구하고 영향력을 끼침.
this를 아에 사용하지 않는 방식
간결하지만 결과만을 위한 코딩(하드 코딩) - this를 이용해 얻을 수 있는 장점을 놓침. 지양하는게 좋음.
bind메서드를 이용하는 방식
가장 좋은 방법. 함수 자체를 객체에 바인딩 -> 함수를 실행할 때 무조건 this를 객체에 고정해줌.
콜백지옥
콜백 함수를 익명 함수로 전달하는 과정이 너무 반복되면 들여쓰기가 미친듯이 들어감 - Hell수준.
이벤트 처리나 서버 통신같은 비동기적 작업을 수행할 때 발생.
문제점 - 가독성이 떨어짐, 유지보수가 어려움.(팀원을 고려하지 않은 코드)
동기(synchronous)
ex) 커피를 주문받고 커피를 만들고 커피를 줘야 한 사람이 퇴장(뒷 사람은 앞 사람의 모든 과정이 끝날 때 까지 대기) - 일의 순서가 끝날 때 까지 다음 일을 처리하지 않음.
현재 실행중인 코드가 끝나야 다음 코드를 실행.
cpu의 계산에 의해 즉시 처리가 가능한 대부분의 코드, 계산이 복잡해 cpu가 계산하는데 오래 걸리는 코드
비동기(asynchronous === async)
ex) 한번에 주문을 받고 먼저 만들어진 것만 진동벨을 울려서 가져가게 함. - 일의 순서랑 관계 없이 먼저 나온 것만 빠르게 처리 - 여러가지 일을 한번에 처리.
현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드를 실행.
setTimeout, addEventListner 등 별도의 요청, 실행 대기, 보류 등과 관련된 코드(서버클라이언트 통신, 웹통신등 통신이 들어간 것 들은 대부분 비동기적인 코드)
setTimeout(function() {
console.log('먼저 실행 되나요?')
}, 1000);
console.log('여기좀 봐주세요');
동기적 코드일 경우 - '먼저 실행 되나요?'가 1초 후 출력되고 '여기좀 봐주세요'가 출력
비동기적 코드일 경우 - '여기좀 봐주세요'가 출력되고 실행한지 1초가 지나면 '먼저 실행 되나요?'가 출력
복잡도가 올라갈수록 비동기적 코드의 비중이 늘어남. -> 콜백지옥이 늘어남.
콜백 지옥을 바꿀 수 있는 방법
기명 함수로 바꿀 수 있는 방법 - 콜백 지옥이 해결은 되지만 어차피 익명 함수로 쓰는데 이름을 다 붙여줘야함 - 인적 리소스의 낭비
왜 중첩을 해야 하는가?
비동기 작업의 특징 : 순서를 보장하지 않음 - 언제 제어권이 나에게 돌아올지 모름. => 비동기 작업을 동기적으로 표현하는 시도들이 필요함.(일의 순서의 보장)
==> JS에서 비동기적인 작업을 동기적으로 처리해주는 장치를 마련하는 중 - Promise, Generator, async/await
비동기 작업의 동기적 표현
Promise
처리가 끝나면 알려달라는 '약속'
new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행.
비동기 작업이 완료될 때 resolve, reject 호출.
resolve는 .then으로 reject는 .catch로 가져올 수 있음.
Generator
반복할 수 있는 Iterator 객체를 생성한다., 함수 옆에 *이 붙어있으면 Generator 함수.
이터러블 객체(Iterable) - 반복될 수 있는, 반복할 수 있는 객체
Iterator 객체- next 메서드로 순환 할 수 있는 객체.
yield를 만나면 멈춤, 이후 다시 next 메서드를 호출하면 멈춘 부분에서 다음 yield까지 실행하고 멈춤. -> 반복
Promise + async/await
사용법 - 비동기 작업을 수행하고자 하는 함수 앞에 async, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await
Promise를 반환하는 함수인 경우, await를 만나면 무조건 끝날때 까지 기다린다.
ex) 이 로직이 실행되는데 100초가 걸렷다.
console.log는 100초 뒤 실행.
async의 스코프 안에서 차례대로 내려오면서 await를 만나는 순간 멈춰서 끝날때 까지 기다린다.
조건은 해당 함수가 Promise를 반환한다는 전제하에.
refactoring - 비효율적인 코드를 효율적으로 변경하는 작업
