[새싹X코딩온] 웹 개발자 부트캠프 영등포 5기에 추가 합격하게 되어 5주차부터 합류하게 되었습니다.
기회가 된다면, 합류 이전의 내용들도 복습해보기로 하며,,,
📌 비동기 처리
특정 코드의 연산이 끝날 때까지 코드 실행이 멈추지 않고 다음 코드를 먼저 실행하는 JS의 특성
function goMart() {
console.log('마트에 가서 어떤 음료를 살지 고민한다.');
}
function pickDrink() {
setTimeout(()=>{
console.log('고민 끝!!');
product = '제로 콜라';
price = 2000;
}, 3000);
}
function pay(product, price){
console.log(`상품명: ${product}, 가격: ${price}`);
}
let product;
let price;
goMart();
pickDrink();
pay(product, price);
// 마트에 가서 어떤 음료를 살지 고민한다.
// 상품명: undefined, 가격: undefined
// 고민 끝!!비동기 처리가 필요한 이유
- JS가 싱글스레드 방식으로 동작한다는 점이 주요 원인(즉, 한 번에 한 가지 일만 수행 가능)
- 싱글스레드에서 비동기로 처리한다고 멀티스레드 동작이 가능한 것은 아니지만, 비동기 처리를 사용하는 것만으로도 충분
- 더구나 오늘날 방대하고 복잡해진 웹 환경에서 비동기 처리는 선택이 아닌 필수요소가 됨
→ 서버에서 요청 응답이 언제 올지 모른 채 마냥 기다리겠냐고 물어본다면 당연히 NOPE!!
📌 비동기 코드 처리 방법
📣 callback 함수
파라미터로 대입되는 함수. 즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수
🔸 callback 함수 사용법
- 보통 함수 선언 후, 함수 타입 파라미터를 맨 마지막에 하나 더 선언해주는 방식으로 정의
function goMart() {
console.log('마트에 가서 어떤 음료를 살지 고민한다.');
}
// 콜백 함수
function pickDrink(callback) {
setTimeout(()=>{
console.log('고민 끝!!');
product = '제로 콜라';
price = 2000;
// 콜백 함수
callback(proudct, price);
}, 3000);
}
function pay(product, price){
console.log(`상품명: ${product}, 가격: ${price}`);
}
let product;
let price;
goMart();
pickDrink(pay);
// 마트에 가서 어떤 음료를 살지 고민한다.
// 고민 끝!!
// 상품명: 제로 콜라, 가격: 2000❗콜백 지옥❗
- 비동기 프로그래밍에서 발생하는 문제
- 콜백 함수가 반복되어 코드의 들여쓰기가 너무 깊어지는 현상
→ 가독성이 낮아지고, 코드 수정 난이도가 높아짐
📣 Promise
비동기를 처리할 수 있는 객체
- 비동기 작업이 맞이할 성공과 실패를 분리하여 반환
- 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐
🔸 Promise의 상태
- pending(대기) : Promise를 수행 중인 상태
- fulfilled(이행) : Promise가 resolve된 상태 → 성공
- rejected(거부) : Promise가 reject된 상태 → 실패
- settled : fulfilled 혹은 rejected로 결론이 난 상태
🔸 Promise 사용법
- Promise의 2가지 콜백 함수
- resolve(value) : 작업이 fulfilled 한 경우, 그 결과를 value와 함께 호출
- reject(error) : 작업이 rejected 된 경우, 에러 객체를 나타내는 error와 함께 호출
function goMart() {
console.log('마트에 가서 어떤 음료를 살지 고민한다.');
}
function pickDrink() {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('고민 끝!!');
proudct = '제로 콜라';
price = 2000;
resolve();
}, 3000);
});
}
let product;
let price;
goMart();
pickDrink().then(()=>{
console.log(`상품명: ${product}, 가격: ${price}`);
});
// 마트에 가서 어떤 음료를 살지 고민한다.
// 고민 끝!!
// 상품명: 제로 콜라, 가격: 2000🔸 Promise 체이닝
- 체이닝을 사용하지 않은 Promise는 콜백 지옥이므로 Promise 체이닝만 다룰 예정
function add(n1,n2) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
let result = n1 + n2;
resolve(result);
}, 1000);
});
}
function mul(n) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
let result = n * 2;
resolve(result);
}, 700);
});
}
function sub(n1,n2) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
let result = n - 1;
// resolve(result);
reject(new Error('의도적으로 에러를 일으킴!'));
}, 500);
});
}
add(4,3)
.then((result) => {
console.log('1: ', result);
return mul(result);
})
.then((result) => {
console.log('2: ', result);
return sub(result);
})
.then((result) => {
console.log('3: ', result);
})
.catch((err) => {
console.log('실패!');
console.log(err);
});
// 1: 7
// 2: 14
// 실패!
// Error: 의도적으로 에러를 일으킴!- then 메서드를 연속적으로 사용 → 순차적인 작업 가능
- 예외 처리가 매우 간편함
📣 async / await
- Promise도 체이닝이 늘어나면, 코드의 가독성이 떨어질 수 있음 → Promise 보다 직관적인 코드를 위해 등장함
🔸 async / await 사용 방법
- async : 비동기 실행되는 게 있음을 알림 → 항상 Promise 반환
- await : 프로미스가 다 처리될 때까지 기다린 이후에 결과 반환
→ async가 있는 함수에서만 await 키워드 사용 가능!
function goMart() {
console.log('마트에 가서 어떤 음료를 살지 고민한다.');
}
function pickDrink() {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('고민 끝!!');
proudct = '제로 콜라';
price = 2000;
resolve();
}, 3000);
});
}
function pay(){
console.log(`상품명: ${product}, 가격: ${price}`);
}
async function exec() {
goMart();
await pickDrink();
pay();
}
exec();
// 마트에 가서 어떤 음료를 살지 고민한다.
// 고민 끝!!
// 상품명: 제로 콜라, 가격: 2000
자아를 찾아 떠나는 중,,,