- callback 함수
함수1를 정의했을 때 바로 실행되진 않지만, 다른 함수2의 입력값으로 전달되어 다른 함수2에 의해서 나중에 호출되는 함수
정의한 함수1 자체는 콜백이라 부르지 않는다. 함수1이 다른함수2의 입력값으로 전달되어 호출된다면 그 맥락에서 콜백 함수라 부른다.
ex) arr.filter(callback(element(필수 파라미터)[, index], array(옵셔널 파라미터)]])[, thistArg])
- promise
-
promise를 사용하는 이유
1. 비동기적인 작업을 처리할 때 그 작업이 성공했는지 실패했는지 표준화된 방식(then(), catch())을 이용해서 처리할 수 있도록 해준다.
2. 비동기적인 것을 간편하게 처리할 수 있도록 도와주는 obj이며 비동기를 수행할 때 콜백함수 대신에 유용하게 쓸 수 있다. -
동기
순차적으로 코드를 실행하는 것. 앞에 있는 명령이 끝나면 뒤에 명령이 실행된다. 어떻게 실행될 것인지 파악하기 쉽다 -
비동기
병렬적으로 코드를 실행하는 것. 동시적으로 실행되므로 혼란스럽지만 빠른속도로 실행된다.
어떤 명령을 실행할 때 그 명령이 언제 끝날지 예측하기 어렵거나, 주가 되는 작업이 아닐 때 비동기적 처리를 많이 한다.(통신..) -
ajax
브라우저와 웹서버가 페이지 리로드를 하지 않고도 js를 이용해서 서로 통신하는 것 -
fetch()
웹서버와 웹브라우저가 서로 통신할 때 사용하는 API 이다., promise를 사용한다.
fetch(resource)함수에서 resource는 보통 url이고, promise 데이터 타입(성공시 response obj)을 리턴한다.
1. 어떤 함수를 사용할때 그 함수의 리턴값이 promise라면 그 함수는 비동기적으로 동작하는 함수일 가능성이 높다.
2. fetch 함수가 리턴한 값(promise)은 2개의 메소드를 사용할 수 있다. then()과 catch()이고 둘다 콜백함수를 받고 파라미터를 하나씩 갖는다.
- then() : fetch()를 통해 실행한 결과가 성공했을 때 then()으로 전달된 콜백함수가 호출된다. 그리고 그 콜백함수가 호출되면서 그 결과값(response)이 있다면 콜백함수의 첫번째 파라미터(response)로 받을 수 있다. response obj(promise)를 리턴한다.
response는 서버와의 통신에 성공했는지 여부 등의 정보가 들어있다. response가 갖고 있는 메소드 중 json()를 호출하면 url의 텍스트가 json 데이터타입이라는 것을 js에게 알려준다. 그러면 웹브라우저는 json타입의 데이터를 해석해서 js데이터타입으로 돌려준다. response.json()도 promise이므로 then을 쓸 수 있다.
- catch() : fetch()를 통해 실행한 결과가 실패했을 때 catch()로 전달된 콜백함수가 호출된다. 그리고 그 파라미터(reason)로서 그 이유를 알려준다.
-
state(상태)
promise가 만들어져서 우리가 지정한 operation이 수행중일 때 pending 상태가 되고, 성공적으로 끝내게 되면 fulfilled 상태가 된다. 혹은 파일을 찾을 수 없거나 네트워크에 문제가 생기면 rejected 상태가 된다. -
producer, 데이터를 제공하는 사람/consumer, 제공된 데이터를 필요로 하는 사람의 차이점 알기
const pr = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("ok");
}, 3000);
});
pr.then((result) => {
// resolve인 경우 실행된다.
// then의 매개변수 result는 resolve의 값 "ok"를 받는다.
console.log(result);
})
.catch((err) => {
// reject에만 실행된다.
console.log(err);
})
.finally(() => {
// 성공했든 실패했든 항상 실행된다.
console.log("end");
});new Promise로 프로미스를 생성한다.
함수를 전달받는데 인수는 resolve(성공한 경우 실행되는 함수), reject(실패한 경우 실행되는 함수)이다.
new Promise 생성자가 반환하는 프로미스 객체는 state, reuslt를 프로퍼티로 갖는다.
state는 초기에 pending(대기)였다가 resolve가 호출되면 즉 성공하면 fulfilled(이행됨)가 된다.
이 때 result는 resolve 함수로 전달된 값이다.
reject가 호출되면 즉 실패하면 state는 rejected(거부됨)이 된다. 이 때의 result는 resolve함수로 전달된 에러이다.
const f1 = () => {
return new Promise((res, rej) => {
setTimeout(() => {
res("1번 주문 완료");
}, 1000);
});
};
const f2 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("2번 주문 완료");
}, 3000);
});
};
const f3 = (message) => {
console.log(message);
return new Promise((res, rej) => {
setTimeout(() => {
res("3번 주문 완료");
}, 2000);
});
};
// 프로미스 체이닝
f1()
.then((res) => f2(res))
.then((res) => f3(res))
.then((res) => {
console.log(res);
})
.catch(console.log)
.finally(() => {
console.log("end");
});- async, await
비동기적 처리를 할 때 콜백함수 안에 콜백함수 그 안에 또 콜백함수라는 콜백지옥이 흔하게 발생되는데 코드가 지저분하고 실수하기 쉽다.
이런 문제를 극복하기 위해 promise를 사용한다.
함수가 promise를 리턴한다면 then을 붙여 사용한다. then은 함수를 인자로 받으므로 인자로 받은 콜백함수가 실행된다.
비동기적 코드가 동기적 코드처럼 작성되도록 문법적으로 작성하는 방법이 생겨났다.
비동기적 함수 앞에 await 키워드를 붙여주며, 이 함수는 반드시 다른 함수 안에서 실행되어야 하며 다른 함수는 async 키워드가 앞에 붙어야 한다.
