비동기 처리
비동기 처리가 필요한 이유?
Html을 읽어온 후 js 내의 함수가 실행되야 하는 코드를 짜야 하는데
비동기로 처리하지 않는다면 코드에 따라 html 불러오기를 완료하지 않은 후 함수를 먼저 실행되는 불상사가 일어날 수 있다.
이런 상황에선 비동기 처리를 해주어야 로드 후에 원하는 동작을 수행시킬 수 있다.
Callback
콜백 기반 비동기 처리
- 무언가를 비동기적으로 수행하는 함수는 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈 '콜백'을 인수로 반드시 제공해야 한다.
function loadScript(src, callback) {
let script = document.createElement('script');
script.src = src;
// 스크립트 로드 후 콜백 함수 실행
script.onload = () => callback(script);
document.head.append(script);
}
localScript("https://~",
script => {alert(`${script.src}가 로드되었습니다.`)})
콜백 속 콜백
- 스크립트가 두 개 있는 경우콜백 함수 안에서 두번째 loadScript를 호출하면 된다. (중첩 코드 사용)
function loadScript(src, callback) {
let script = document.createElement('script');
script.src = src;
// 스크립트 로드 후 콜백 함수 실행
script.onload = () => callback(script);
// 에러 처리 (로딩 실패할 경우)
script.onerror = () => callback(new Error("err"))
document.head.append(script);
}
loadScript('main.js', function(error, script){ // 오류 우선 콜백
if(error) {
// 에러 처리
} else {
// 성공적인 스크립트 로딩 후
}
}) - loadScript(script, callback) 를 호출할 경우, 함께 호출할 callback 함수가 미리 정의되어 있어야 한다.
- 만약 중첩해야 할 코드가 더 많아진다면 오른쪽으로 커져서 좋지 않다.
- 깊은 중첩 코드가 만들어 내는 패턴을 '콜백 지옥' 이라 한다.
-> 이러한 문제를 해결하기 위해 promise를 사용한다!
Promise
Promise : 제작코드와 소비코드를 연결해주는 특별한 자바스크립트 '객체'
- promise를 사용하는 이유
- 결과에 따라 무엇을 할지에 대한 코드를 작성하면 되기 때문에 흐름이 자연스럽다.
- 원하는 만큼 .then을 호출할 수 있다. (콜백은 하나만 가능)
Primise 문법
let promise = new Promise(function(resolve, reject) {
// executor(제작코드)
})- new Promise에 전달되는 함수를 executor라고 부른다.
- new Promise가 만들어질 때 executor가 즉각적으로 자동 호출된다. (여기서 원하는 일이 처리된다.)
- executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이다. 처리 성공 여부에 따라 resolve나 reject를 호출한다. (promise의 상태를 둘 중 하나로 변화 시킨다.) -> 둘 중 하나는 반드시 호출해야 한다. (첫번째 resolve/reject만 실행되고 두번째는 무시된다.)
-resolve(value)— 일이 성공적으로 끝난 경우 그 결과를 나타내는value와 함께 호출
-reject(error)— 에러 발생 시 에러 객체를 나타내는error와 함께 호출
(1) resolve의 경우
- promise의 상태: fulfilled
- fulfilled promise(약속이 이행된 프라미스)
let promise = new Promise(function(resolve, reject) {
// executor 자동 실행
// resolve 호출
setTimeout(() => resolve("완료"), 1000)
// promise 상태 변화 { state: "filtilled", result: "완료"}
})(2) reject의 경우
- promise의 상태: rejected
let promise = new Promise(function(resolve, reject) {
// reject 호출
setTimeout(() => reject(new Error("에러 발생")), 1000)
// promise 상태 변화 { state: "rejected", result: Error 객체 }
})- 이처럼 resolved(이행) 혹은 rejected(거부) 상태의 promise는 "settled promise(처리된 프라미스)"라고 부른다.
- (반대의 의미로 "pending promise(대기 상태 프라미스)"가 있다.)
- resolve, reject 함수 즉시 호출할 경우
- promise는 즉시 이행 상태가 된다.
let promise = new Promise(function(resolve, reject) {
resolve(123); // 즉시 호출
})회고
JS에서 코드에 따라 html 불러오기를 완료하지 않은 후 함수를 먼저 실행되는 불상사를 막기 위한 비동기 처리를 알아보았다.
비동기 처리를 하는 방법 중 Callback과 Promise를 사용하여 처리하는 방법을 배워보았는데 Callback을 사용하는 경우 일명 '콜백 지옥'을 경험할 수 있으니 비동기 처리를 해야할 땐 오늘 배운 Promise와 이후에 알아볼 async/await를 사용하는 것이 좋을 것 같다.
