setTimeout(callback, mlilisecond)
: 일정 시간 후에 실행되는 함수
clearTimeout(timerId)
: 실행중인 타이버를 종료시킴
[예시] 실행중인 타이머와 실행중이었을 타이머를 종료시킨 타이머
setInterval(callback, millisecond)
: 일정 시간을 주고 함수를 반복적으로 실행하기
clearInterval(timerId)
: 타이머를 종료
: callback 함수로도 비동기로 작동되는 코드를 제어할 수 있음
const printString = (string, callback) => {
setTimeout(function () {
console.log(string);
callback();
}, Math.floor(Math.random() * 100) + 1);
};
const printAll = () => {
printString('A', () => {
printString('B', () => {
printString('C', () => {});
});
});
};
printAll();
// A
// B
// C
⇒ 하지만, 현재 작성되어진 코드가 짧지만 무한대로 코드가 많아지면 Callback hell(콜백지옥)으로 빠질 수 있음
💡이를 보완하고자 나온게 바로 Promise!
: Promise는 callback 지옥을 보완하기 위해 나온 빌트인 객체
resolve : 콜백함수의 코드가 정상작동일 경우 호출됨
reject : 콜백함수의 코드에서 에러가 발생할 경우 호출됨
const promise = new promise ((resolve, reject) => {
//Promise 함수의 콜백함수 내부에서 비동기 처리 실행
if(/*비동기 처리 성공*/) {
resolve(result);
}
else {
/* 비동기 처리 실패 */
reject('failure reason);
}
});
: promise는 내부 프로퍼티(state, result)를 가지는데 직접 접근이 되지 않고, .then, .catch, .finally 메서드를 사용해서 접근이 가능
비동기 처리를 수행하는 함수가
출처 : MDN
let promise = new Promise((resolve, reject) => {
resolve("성공");
});
//.then 안에서 리턴한 값이 promise면 내부 result를 다음 .then 콜백 함수의 인자로 받음
promise.then(value => {
console.log(value);
// "성공"
})
let promise = new Promise(function(resolve, reject) {
reject(new Error("에러"))
});
promise.catch(error => {
console.log(error);
// Error: 에러
})
let promise = new Promise(function(resolve, reject) {
resolve("성공");
});
promise
.then(value => {
console.log(value);
// "성공"
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log("성공이든 실패든 작동!");
// "성공이든 실패든 작동!"
})
: 비동기 작업을 순차적으로 진행
→ .then, .catch, .finally의 메서드들은 promise를 리턴하기 때문
: 여러개의 비동기 작업을 동시에 처리하고 싶을때 사용
const promiseOne = () => new Promise((resolve, reject) => setTimeout(() => resolve('1초'), 1000));
const promiseTwo = () => new Promise((resolve, reject) => setTimeout(() => resolve('2초'), 2000));
const promiseThree = () => new Promise((resolve, reject) => setTimeout(() => resolve('3초'), 3000));
// promise.all
Promise.all([promiseOne(), promiseTwo(), promiseThree()])
.then((value) => console.log(value))
// ['1초', '2초', '3초']
.catch((err) => console.log(err));
⇒ promise로 비동키 코드의 순서 제어가 가능하지만 코드가 길어질수록 promise hell이 발생
: 사용 목적은 여러 promise의 동작을 동기스럽게 사용가능케함
const printString = (string) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
console.log(string);
}, Math.floor(Math.random() * 100) + 1);
});
};
const printAll = async () => {
await printString('A');
await printString('B');
await printString('C');
};
printAll();
//A
//B
//C
: 비동기 이벤트 기반 자바스크립트 런타임 (특정 언어로 만든 프로그램을 실행할 수 있는 환경)
→ 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 자바스크립트 실행기!
<script src="불러오고싶은_스크립트.js"></script>
: 프로그래밍을 도와주는 플러그인이나 라이브러리 등을 만드는 회사
→ 편리하고 효율적인 개발을 할 수 있음 (제 3자로서의 중간다리 역할을 하는것)
ex) node.js에서 underscore는 공식문서에 없는 모듈이기 때문에 서드파티 모듈이며, 이를 다운 받기 위해서는 npm을 사용해야 함.
npm install underscore
const _ =require('underscor');
: 파일 처리와 관련된 전반적인 작업을 하는 모듈
const fs = require('fs'); // 파일 시스템 모듈을 불러옵니다
const dns = require('dns'); // DNS 모듈을 불러옵니다
// 이제 fs.readFile 메서드 등을 사용할 수 있습니다!
: read(읽다) 비동기적으로 파일 내요을 읽음/ 전달인자를 3개를 받음