Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- css3
- 자바스크립트 상속
- front-end
- css display
- 자바스크립트
- javascript opreator
- HTML
- CSS
- 프론트엔드
- 오블완
- javascript opreators
- html 주석
- css 포지션
- 웹 개발 트렌드
- 자바스크립트 생성자 함수
- 자바스크립트 스코프
- 자바스크립트 클래스
- 자바스크립트 반복문
- 자바스크립트 innerhtml
- javascript
- 자바스크립트 연산자
- 자바스크립트 실행 컨텍스트
- 자바스크립트 dom 문법
- 자바스크립트 dom의 목적
- 자바스크립트 innertext
- 자바스크립트 onclick
- 자바스크립트 scope
- 티스토리챌린지
- html 코드
- css position
Archives
- Today
- Total
Multi Developer SuHo
자바스크립트 Callback hell and Promise(콜백헬 그리고 프로미스) 본문
JavaScript
자바스크립트 Callback hell and Promise(콜백헬 그리고 프로미스)
Dreaming Developer Student 2024. 1. 24. 14:14SMALL
안녕하세요~ 오늘 알아볼 내용은 자바스크립트 Callback hell 그리고 Promise 입니다. 우선 콜백(Callback)에 대해 살펴보겠습니다.
글을 쓰기 앞서 모든 내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여 작성하였습니다.
출처: https://inf.run/xNcEg
콜백(Callback) 이란? - 함수가 다른 함수의 인자로 사용되는 경우, 콜백 함수는 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말합니다. 즉 , 특정 작업이 끝나고 다시 호출하는 함수를 말합니다.
콜백이 많이 중첩되면 코드를 읽기 어려운 콜백 지옥(Callback Hell)이 생길 수 있습니다. 이를 해결하기 위한 방법으로 프로미스(Promise) 같은 방법으로 해결합니다. 다음은 프로미스(Promise)에 대해 알아보겠습니다.
프로미스(Promise)란 ? - 프로미스는 자바스크립트에서 비동기 처리를 좀 더 편리하게 할 수 있도록 ES6에 도입된 기능
전체 소스코드 를 보면서 주석으로 처리된 설명들을 참고하시면 되겠습니다.
/**
* Callback(콜백)
* 특정 작업이 끝나고서 다시 불리는 함수
* 무언가 입력을 해주고서 나중에 실행되는 함수
*
*/
function Continue(){
setTimeout(() =>{ //setTimeOut() 함수에 있는 첫 번째 함수가 Callback 함수를 의미
console.log('End')
}, 5000);
}
Continue(); // 5초뒤 'End'를 출력
// Callback Hell
function Continue2(){
setTimeout(
() => {
console.log('1번 콜백 End');
setTimeout(() => {
console.log('2번 콜백 End');
setTimeout(() =>{
console.log('3번 콜백 End');
}, 5000);
}, 5000);
}, 5000); // 5초를 기다림
}
// 3개의 SetTimeOut()을 5초마다 실행을 할수가 있다.
Continue2();
/**
* Promise(프로미스)
* promise를 반환하는 함수를 만들 수 있다.
* 여러개의 promise를 연결할 수 있다.
*/
const timeoutPromise = new Promise((resolve, reject) =>{ //promise 안에 들어가는 Callback 함수에는 두 개의 매개변수를 받는다
// 1. Resolve , 2. Reject
setTimeout(() => {
resolve('실행완료')
}, 5000);
});
timeoutPromise.then((res) => { // 하나의 매개변수를 받는데, 여기서 매개변수는 Resovle 함수에서 넣어준 값이다.
console.log(res);
});
// TimeoutPromise는 Promise라는 객체, 이 객체에는 then이라는 값이 있다.
// then -> 그러고 난 다음
// then() 메서드는 언제 실행? -> Resovle가 실행이 되고나서 실행
// 순서 -> SetTimeout() 하고서 5초를 기다린 다음 '실행완료'라는 값을 Resovle를 했으니 then() 메서드를 5초 뒤에 첫 번째 매개변수에다가 '실행완료'라는 값을 넣은 뒤에 콜백 함수가 실행
// resolve 함수를 실행하는 순간 반환받은 promise 객체에서 then을 붙이면 끝나는 시점, resolve 함수가 실행되는 시점에 반환값을 받을 수 있다.
// resolve - resolve 안에 argument(실제 값)를 넣어주면 then() 함수가 실행될 때 첫 번째 매개변수에 argument 값이 들어가게 된다.0
// reject - 에러가 났을 때
// resolve를 실행하면 then()을 실행시킬 수 있고, reject를 실행하면 catch()를 실행시킬 수 있다.
// finally()는 callback 함수에 argument를 받지 않고, catch 가 호출되거나 then이 호출되든 무조건 실행된다.
const getPromise = (three) => new Promise((resolve, reject) => {
setTimeout(() => {
reject('Error');
}, three * 1000 );
}); // 함수가 promise를 반환
getPromise(3) // 3초 기다리는 함수
.then((res) =>{
console.log('------first then --------');
console.log(res);
})
.catch((res) => {
console.log('---- first catch -------');
console.log(res);
})
.finally(() => {
console.log('------- finally ---------');
});
// promise는 비동기로 실행이 되기 때문에 then()으로 계속 함수를 이어가지고 붙이면 순서대로 실행됨.
// 여러개의 promise를 동시에 실행 시킬 수 있다.
// 만약 promise들이 서로 의존하고 있지 않다면은 동시에 실행을 시킬 수 있다.
Promise(프로미스) 에 대한 소스코드 입니다.
/**
* Promise(프로미스)
* promise를 반환하는 함수를 만들 수 있다.
* 여러개의 promise를 연결할 수 있다.
*/
const timeoutPromise = new Promise((resolve, reject) =>{ //promise 안에 들어가는 Callback 함수에는 두 개의 매개변수를 받는다
// 1. Resolve , 2. Reject
setTimeout(() => {
resolve('실행완료')
}, 5000);
});
// timeoutPromise.then((res) => { // 하나의 매개변수를 받는데, 여기서 매개변수는 Resovle 함수에서 넣어준 값이다.
// console.log(res);
// });
// TimeoutPromise는 Promise라는 객체, 이 객체에는 then이라는 값이 있다.
// then -> 그러고 난 다음
// then() 메서드는 언제 실행? -> Resovle가 실행이 되고나서 실행
// 순서 -> SetTimeout() 하고서 5초를 기다린 다음 '실행완료'라는 값을 Resovle를 했으니 then() 메서드를 5초 뒤에 첫 번째 매개변수에다가 '실행완료'라는 값을 넣은 뒤에 콜백 함수가 실행
// resolve 함수를 실행하는 순간 반환받은 promise 객체에서 then을 붙이면 끝나는 시점, resolve 함수가 실행되는 시점에 반환값을 받을 수 있다.
const getPromise = (three) => new Promise((resolve, reject) => {
setTimeout(() => {
resolve('실행완료');
}, three * 1000 );
}); // 함수가 promise를 반환
getPromise(3) // 3초 기다리는 함수
.then((res) =>{
console.log('------first then --------');
console.log(res);
return getPromise(3); // 만약 3초를 기다렸다가 promise를 실행을 하고 싶을 때 -> return 하고서 원하는 promise를 반환하면 된다.
}).then((res) => {
console.log('------- Second then ---------');
console.log(res);
return getPromise(2);
}).then((res) => {
console.log('------- third then ---------');
console.log(res);
return getPromise(2);
});
LIST
'JavaScript' 카테고리의 다른 글
Babel(바벨)이란? (0) | 2024.12.21 |
---|---|
자바스크립트 Async & Await (비동기 프로그래밍 문법) (0) | 2024.01.24 |
자바스크립트 비동기 프로그래밍(asynchronous programming), 동기 프로그래밍(Synchronization Programming) (0) | 2024.01.20 |
자바스크립트 Closure(클로저) (0) | 2024.01.19 |
자바스크립트 Execution Context (실행 컨텍스트) (0) | 2024.01.11 |