1. 자바스크립트 비동기 처리
- 컴퓨터 동작 원리
- 로드(Load): 외부저장창지에 있는 프로그램을 메인메모리에 적재하는 것
- 입출력 (I/O)
- I/O Device (입출력 장치)는 자신만의 컨트롤러를 가짐
- CPU는 개입 X, CPU는 입출력 지시만 내림
1) 비동기 처리 / 동기 처리
JavaScript - default: 비동기 처리
* 비동기 처리
: 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식
· 원하는 처리 순서에 맞게 프로그래밍 하는 것
* 동기 처리
: 프로그램 코드 작성한 순서대로 처리하는 방식
function displayA() {
console.log('A');
}
function displayB() {
setTimeout(() => {
console.log('D');
}, 2000);
console.log('B');
}
function displayC() {
console.log('C');
}
displayA();
displayB();
displayC();
// A
// B
// C
// D- 자바스크립트 비동기 처리 방법
콜백 함수프라미스async/await
2) 콜백 함수 (Callback)
: 다른 함수의 매개변수로 사용하는 함수
· 콜백 함수가 많아지면 가독성이 떨어짐
· 콜백이 계속 반복되는 상태: 콜백 지옥 (callback hell), 스파게티 코드
const order = (coffee, callback) => {
console.log(`${coffee} 주문 접수`);
setTimeout(() => {
callback(coffee);
}, 2000);
};
const display = (menu) => console.log(`${menu} 완료!`);
order('아메리카노', display);
// 아메리카노 주문 접수
// 아메리카노 완료!// 콜백지옥, 스파게티 코드
function displayLetter() {
console.log('A');
setTimeout(() => {
console.log('B');
setTimeout(() => {
console.log('C');
setTimeout(() => {
console.log('STOP!');
}, 1000);
}, 1000);
}, 1000);
}
displayLetter();3) 프라미스 (Promise)
: 처리 성공/실패에 따라 반환 결과를 미리 약속
· 콜백지옥(Callback hell)을 피할 수 있는 방법 - 중첩 되지 않게
- 프라미스 객체에서는 처리에 성공했는지 실패했는지 판단만 (성공/실패 시 반환값)
: 성공/실패 상관 없이 실행 → finally 함수
- resolve / reject가 사용되지 않으면 promise는 콜백에 나올 때까지 pending 상태
- Promise 객체 생성 시 비동기 작업 함수 전달
resolve(): 성공 시 호출 할 함수result(): 실패 시 호출 할 함수
- Promise 객체의 매서드
then(result): 성공 시 실행catch(result): 실패 시 실행
let likePizza = false;
// pizza = 프라미스 객체
const pizza = new Promise((resolve, reject) => {
if (likePizza) resolve('피자를 주문합니다'); // 성공 시 반환 값
else reject('피자 주문 실패'); // 실패 시 반환 값
});
// 메서드 체이닝 (프라미스 체이닝)
pizza.then((result) => console.log(result)).catch((err) => console.log(err));
console.log('마지막 코드'); // 프라미스가 비동기라 이 코드가 먼저 실행 됨
// 마지막 코드
// 피자 주문 실패const lotto = new Promise((resolve, reject) => {
console.log('나 로또 살까?');
console.log('숫자가 5이상이면 사고 미만이면 사지마~');
setTimeout(() => {
const rand = parseInt(Math.random() * 10);
console.log(`나온 숫자는~ ${rand}!`);
if (rand >= 5) resolve('로또 사자!');
else reject('아 망했어요');
}, 3000);
});
lotto.then((result) => console.log(result)).catch((err) => console.log(err));
// 나 로또 살까?
// 숫자가 5이상이면 사고 미만이면 사지마~
// 나온 숫자는~ 5!
// 로또 사자!4) async / await ★
: 비동기 작업을 동기 스타일로 작업
· promise 또한 then을 여러 번 사용하면 복잡 → async/await 예약어 사용
· async function() - Promise 반환
- async가 선언 된 함수 내에서만 await 사용 가능
- await는 promise가 결과(resolve, reject)를 반환 할 때까지 기다림
const lotto = new Promise((resolve, reject) => {
console.log('나 로또 살까?');
console.log('숫자가 5이상이면 사고 미만이면 사지마~');
setTimeout(() => {
const rand = parseInt(Math.random() * 10);
console.log(`나온 숫자는~ ${rand}!`);
if (rand >= 5) resolve('로또 사자!');
else reject('아 망했어요');
}, 3000);
});
async function AsyncAwait() {
try {
const data = await lotto;
console.log(data);
} catch (err) {
console.log(err);
}
}
AsyncAwait();
// 나 로또 살까?
// 숫자가 5이상이면 사고 미만이면 사지마~
// 나온 숫자는~ 8!
// 로또 사자!
2. 노드의 모듈 ★
- 모듈 (Module)
- 기능별로 만들어 놓은 함수
- 함수 / 객체 정의 해놓은 파일로 필요할 때마다 가져와서 사용
* CommonJS 모듈 시스템 : require( ) 함수를 통해 사용 , node
* ES 모듈 시스템 (에크마 스크립트 모듈) : 자바스크립트 표준 모델 시스템 , web
1) 모듈 만들기
· CommnJS
// 07-1Module_user.js
const user = '홍길동';// 07-1Module_hello.js
const hello = (name) => {
console.log(`${name}님 안녕하세요`);
};2) 모듈 내보내기 - module.exports
module.exports = 외부로 내보낼 함수 또는 변수
