[TIL]데브코스 프론트엔드 0816
📚TIL
day9
Promise와 callback
- Promise는 비동기 상황을 일급 값으로 다룬다는 점이 callback과 가장 큰 차이
- callback함수는 실행 이후 사용이 불가능한데 Promise는 then을 통해 추가적으로 사용 가능
- Promise 값으로 활용하기
const go1 = (a, f) => f(a); //go1의 정상적 장동을 위해 f, a가 동기적이어야 함
const add5 = a => a + 5;
go1(10, add5);
//go1에 비동기적인 값을 넣었을 때 정상적으로 작동시키려면
const delay100 = a => new Promise(resolve =>
setTimeout(() => resolve(a), 100) //resolve로 데이터 전달
);
const go1 = (a, f) => a instanceof Promise ? a.then(f) : f(a);
//a가 Promise일 때 then을 이용해서 접근
const add5 = a => a+5;
console.log(go1(10, add5));
console.log(go1(delay100(10), add5));
// PromiseStatus : "resolved", Promisevalue : 15
모나드 관점에서의 Promise
- 모나드 : 함수를 안전하게 합성하기 위한 개념
//박스 모나드
const g = a=> a + 1;
const f = a => a * a;
console.log(f(g())); //NaN, 값이 들어있지 않다면 오류발생 가능성
[].map(g).map(f).forEach(r => console.log(r));
//박스에 인수가 없을 시 출력이 되지 않음(forEach가 실행되지 않음);
- Promise를 통한 함수 합성 : Promise는 비동기 상황에서 연속적인 함수 합성을 안전하게 하는 모나드
//비동기적으로 일어나는 합성
new Promise(resolve =>
setTimeout(() => resolve(7), 100)
).then(g).then(f).then(r => console.log(r));
// resolve를 통해 Promise의 값을 생성하여 then을 통해 합성
Promise.resolve().then(g).then(f).then(r => console.log(r));
//NaN, 프로미스는 값의 유무에 따른 안전한 합성이 아닌
//비동기 상황에서의 안전한 합성을 위해 사용
Kleisli Composition관점에서의 Promise
- Kleisli Composition/Arrow : 오류가 있을 수 있는 상황에서의 함수 합성을 안전하게 할 수 있는 규칙
f ㆍ g //f와 g합성
f(g(x)) = f(g(x)) //x가 동일 할 때에 식이 항상 성립해야 하는데
//두번째엔 x가 pop된다면 오류가 날 수 있음
f(g(x)) = g(x) //이런 예외상황에서 특정한 규칙을 통해 합성을
//안전하게 하여 수학적으로 이를 바라볼 수 있도록 하는 것
- Promise를 통한 해결
var users = [
{ id : 1, name : 'aa' },
{ id : 2, name : 'bb' },
{ id : 3, name : 'cc' }
];
const getUserById = id =>
find(u => u.id == id, users) || Promise.reject('id가 없습니다.');
//id가 있는지 찾은 후 없을 시 Promise reject를 반환
const f = ({name}) => name;
const g = getUserById;
const fg = id => Promise.resolve(id).then(g).then(f);
fg(2).then(console.log); //bb
users.pop();
fg(3).then(console.log); //id가 없습니다.
🌊하루를 마치며
const go1 = (a, f) => f(a); //go1의 정상적 장동을 위해 f, a가 동기적이어야 함
const add5 = a => a + 5;
go1(10, add5);
//go1에 비동기적인 값을 넣었을 때 정상적으로 작동시키려면
const delay100 = a => new Promise(resolve =>
setTimeout(() => resolve(a), 100) //resolve로 데이터 전달
);
const go1 = (a, f) => a instanceof Promise ? a.then(f) : f(a);
//a가 Promise일 때 then을 이용해서 접근
const add5 = a => a+5;
console.log(go1(10, add5));
console.log(go1(delay100(10), add5));
// PromiseStatus : "resolved", Promisevalue : 15
//박스 모나드
const g = a=> a + 1;
const f = a => a * a;
console.log(f(g())); //NaN, 값이 들어있지 않다면 오류발생 가능성
[].map(g).map(f).forEach(r => console.log(r));
//박스에 인수가 없을 시 출력이 되지 않음(forEach가 실행되지 않음);
//비동기적으로 일어나는 합성
new Promise(resolve =>
setTimeout(() => resolve(7), 100)
).then(g).then(f).then(r => console.log(r));
// resolve를 통해 Promise의 값을 생성하여 then을 통해 합성
Promise.resolve().then(g).then(f).then(r => console.log(r));
//NaN, 프로미스는 값의 유무에 따른 안전한 합성이 아닌
//비동기 상황에서의 안전한 합성을 위해 사용
f ㆍ g //f와 g합성
f(g(x)) = f(g(x)) //x가 동일 할 때에 식이 항상 성립해야 하는데
//두번째엔 x가 pop된다면 오류가 날 수 있음
f(g(x)) = g(x) //이런 예외상황에서 특정한 규칙을 통해 합성을
//안전하게 하여 수학적으로 이를 바라볼 수 있도록 하는 것
var users = [
{ id : 1, name : 'aa' },
{ id : 2, name : 'bb' },
{ id : 3, name : 'cc' }
];
const getUserById = id =>
find(u => u.id == id, users) || Promise.reject('id가 없습니다.');
//id가 있는지 찾은 후 없을 시 Promise reject를 반환
const f = ({name}) => name;
const g = getUserById;
const fg = id => Promise.resolve(id).then(g).then(f);
fg(2).then(console.log); //bb
users.pop();
fg(3).then(console.log); //id가 없습니다.
프라미스가 단순히 callback 지옥에서 탈출하기 위해서가 아니라 정말 다양한 방식으로 사용된다는 것을 알게됐다. 공부하면 할수록 프라미스가 어떤 문제를 해결할 수 있을지 감이 잡히는 것 같다. 아직 프라미스와 관련한 강의가 많이 남아있어 또 어떤 식으로 사용될지 궁금하다!
내일부턴 VanillaJS를 배우는데 강의가 밀리지 않는(= 시간내에 잘 이해하는..) 일주일을 보낼 수 있었으면 좋겠다.
Author And Source
이 문제에 관하여([TIL]데브코스 프론트엔드 0816), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyo_o/TIL데브코스-프론트엔드-0816저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)