ko-콜백
!!!!
: 콜백, 프라미스를 어떻게 사용하는지 보여주기 위해, <브라우저 전용 메서드>를 사용.
(스크립트를 불러오고 완성된 문서에 간단조작하기 예시에서 특히 사용 예정)
: 브라우저 메서드가 익숙하지 않아 예시가 이해가 안되면? - >문서 객체 모델 몇개 읽기
1
JS 호스트 환경이 제공하는 여러 함수를 사용하면 <비동기 동작>을 스케쥴링 가능.
원하는 때에 동작이 시작ㄱㄱ
스케쥴링 대표함수 : setTimeout
(실무에서만나는 비동기 동작은 쏘 various. 스크립트나 모듈을 로딩하는 것도 비동기 동작)
2 비동기 동작 처리가 어떻게 일어는가?
src에 있는 script를 읽어오는 함수 loadScript(src) 예시
function loadScript(src){
//<script> 태그를 만들고 페이지에 태그추가
// 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩&실행
let script = document.createElement('script');
script.src = src;
document.head.append(script);
}함수 loadScript(src)는 <script src=".." 를 동적으로 만들고 이를 문서에 추가해. 브라우저는 자동으로 태그에 있는 스크립트를 불러오고, 로딩이 완료되면 스크립트를 실행해
loadScript(src) 사용법
// 해당 경로에 위치한 스크립트를 불러오고 실행함
// 이때 스크립트는 <비동기적 으로 . 실행됨.
// 로딩은 지금 당장 시작되도 실행은 함수가 끝난 후에야 되니까
// 따라서 loadScript(...) 아래 있는 코드들은 스크립트 로딩이 종료되는 걸 기다리지 않아..
loadScript('my/script.js') //script.js엔 "function newFunction(){...}" 있음
newFunction(); // 함수가 존재하지 않는다는 에러 발생!
loadScript('my/script.js', function(){
//콜백 함수는 스크립트 로드가 끝나면 실행됨..
newFunction(); // 이제 함수 호출이 제대로 동작함
...
})3 스크립트 로딩이 끝나자마자 이 스크립트를 사용해 뭔가를 해야만 한다고 가정해보자.
스크립트 안에 다양한 함수가 정의되어 있고, 우리는 이 함수실행을 원해.
그런데 loadScript(...)을 호출하자마자 내부 함수를 호출하면 원하는대로 안돼.
->> 함수가 존재하지 않는다는 에러 발생.
- 에러는 브라우저가 스크립트를 읽어올 수 있는 시간을 충분히 확보 못해서 생긴거.
현재로서는 함수 loadScript에서 스크립트 로딩이 완료되었는지 확인 방법 X.
언젠가 스크립트가 로드&실행 되겠지만, 그게 다임.
원하는 대로 스크립트 안의 함수나 변수를 사용하려면 스크립트 로딩이 끝났는지 여부를 알 수 있어야해. - loadScript의 두번째 인수로 스크립트 로딩이 끝난 후 실행될 함수인 콜백(callback)함수를 추가ㄱㄱ (콜백함수는 나중에 호출할 함수를 의미해)
function loadScript (src, callback) { let script = document.createElement('script'); script.src = src;
script.onload = () => callback(script);
document.head.append(script);
}
- 새롭게 불러온 스크립트에 있는 함수를 <콜백함수 안에서 호출>하면 원하는대로 외부 스크립트 안의 함수를 사용 할수 있음.
- 두번째 인수로 전달된 함수(대개 익명함수)는 원하는 동작(외부 스크립트 불러오는것)이 완료됬을때 실행 ㄱ
//실제 존재하는 스크립트를 이용해 만든 예시
function loadScript(src, callback) {
let script = document.createElement('script');
script.src = src;
script.onload = () => callback(script);
document.head.append(script);
}
loadScript('https://sdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
alert(${script.src}가 로드되었습니다.);
alert( _ ); //스크립트에 정의된 함수
});
- 이런 방식을 '콜백기반(callback-based)' 비동기 프로그래밍이라고 합니다.
무언가를 비동기적으로 수행하는 함수는 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈 <콜백>을 인수로 반드시 제공해야 함.
- 위 예시에선 loadScript의 인수로 콜백을 제공해 주었는데, 이렇게 콜백을 사용한 방식은 비동기 프로그래밍의 일반적인 접근법
## 4 콜백속 콜백
- 스크립트가 두개일때, 어떻게 하면 두 스크립트를 순차적으로 불러오기 가능?
두번째 스크립트 로딩은 첫째의 로딩끝난 이후가 되길 원하는 거.
=> 해결방법 1 : 콜백함수 안에서 두번째 loadScript 호출하기
아래와같이 모든 새 동작이 콜백 안에 위치하게 작성하면 됨.
그런데 이렇게 콜백 안에 콜백을 넣는 것은 수행하려는 동작이 몇개면 괜찮지만, 동작이 많으면 안 좋아.
다른 방식으로 코드를 작성하는 방법도 있지...
loadScript('/my/script.js', function(script) {
alert(${script.src}을 로딩완료, 이젠 다음 스크립트 로딩 ㄱ);
loadScript('/my/script2.js', function(script){
alert(두번째 스크립트 성공적 로딩);
})
});
## 5 에러 핸들링
## 6 멸망의 피라미드
