220523
비동기
비동기 처리
비동기 이해
비동기적으로 실행된다는 것은 하나의 동작이 완료되지 않아도 다음 코드가 실행되는 것을 의미한다.- thread는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스로, 각 스레드는 한번에 하나의 작업만 수행할 수 있다.
비동기 처리의 필요성
비동기 특성은 서버에 요청을 보내고 결과가 돌아오지 않아도 다음 코드를 실행한다.
비동기 방식이 필요한 이유는 웹에서 서버에 데이터를 요청했을 때 요청이 완료되기 전까지 아무것도 실행되지 않는다면 화면이 멈춘 것처럼 보일 뿐 아니라 하나의 프로그램을 실행하는데 많은 시간이 소요되기 때문이다.비동기 처리의 종류
-
promise : 응답에 관한 정보를 갖고 있는 객체로 then, catch를 통해 결과 값을 처리한다.
-
await/async : promise를 기반이지만 then, catch를 사용하지 않고 try-catch를 사용한다.
-
fetch : 접근하고자 하는 url과 매개변수로 네트워크 요청을 보낼 수 있다.
콜백함수
자바스크립트는 함수의 매개변수로 어떤 자료형이 들어올지 걸러주지 못해 null과 undefined를 제외한 모든 자료형을 전달할 수 있다.콜백함수 이해하기
다른 함수에 인자로 전달되는 함수이다.
매개변수로 넘겨진 함수는 넘겨 받고 이를 실핼할 수 있도록 다시 부르는 것이다.
즉 함수 A의 호출에서 매개변수로 함수 B가 전달되어, 특정 이벤트가 발생했거나 특정 시점이 되면 다시 호출되는 함수 B를 콜백 함수라고 말한다. 동기 / 비동기 처리
- 동기 : 호이스팅(함수 선언들이 제일 위로 올라가는 것)이 시작된 이후로부터 코드가 작성한 순서에 맞춰 동기적으로 실행한다는 말이다.
console.log('1');
console.log('2');
console.log('3');
// 1
// 2
// 3- 비동기 : 언제 코드가 실행될지 예측할 수 없는 것
console.log('1');
setTimeout(function () {
console.log('2');
}, 1000); //1초 뒤
console.log('3');
// 1
// 3
// 2콜백지옥
콜백지옥은 콜백함수를 익명함술로 전달하는 과정에서 또 다시 콜백 안에 함수 호출이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상이다. 프로미스(promise)
프로미스 특징
const promise = new Promise((resolve, reject) => {
console.log("1번손님 들어오세요");//executor(제작코드,실행함수) = 맛집
});- executor의 인수
resolve와reject는 자바스크립트에서 자체 제공하는 콜백 함수이다. 따라서 따로 만들 필요는 없지만 둘중 한가지는 반드시 호출해야 한다. resolve는 일이 성공적으로 끝난 경우 value와 함께 호출한다.reject는 에러 발생 시 에러 객체를 나타내는 error와 함께 호출한다.
프로미스의 상태
- pending(대기): 처리가 완료되지 않은 상태
- fullfilled(이행): 성공적으로 처리가 완료된 상태
- rejected(거부): 처리가 실패로 끝난 상태
소비함수 메서드 : then, catch, finally
then
then은 프로미스가 정상적으로 잘 수행이 되어서 마지막에 최종적으로 resolve라는 콜백 함수를 통해서 전달한 값이 value의 파라미터로 전달되어서 들어온다.//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('입장해주세요');
}, 3000);
});
//소비코드(consuming code)
promise.then(value => {
console.log(value);
});catch
에러가 발생한 경우만 다루고 싶을때 사용한다.//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('손님의 입장순서가 아닙니다'));
}, 3000)
});
//소비코드(consuming code)
promise
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
});
//프로미스에 then을 호출하게 되면 then은 결국 똑같은 프로미스를 리턴하기 때문에 그 리턴된 프로미스에 catch를 다시 호출할 수 있다. 이를 프로미스 체이닝(chaining)이라고 한다.finally
어느 상황이던 마지막에 호출된다.//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('손님의 입장순서가 아닙니다'));
}, 3000)
});
//소비코드(consuming code)
promise
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log('-제주맛집');
});async function(async/await)
프로미스의 후속 처리 메서드인 then 없이도 비동기를 동기처럼 보이도록 구현하는 방식으로 보다 간결한 코드 작성을 위해 등장한 문법인 만큼 프로미스 보다 가독성이 좋고 동기 프로그래밍을 작성하는 방식과 유사하여 로직이 밑으로 흐르는듯 매우 직관적으로 보인다.// 함수 선언식으로의 사용
async function 함수이름() {
return 결과 값;
}async function snack() {
return 1;
}
snack().then(alert); // '1' 반환
function snack() {
return Promise.resolve(1);
}
snack().then(alert); // '1' 반환
// async가 붙은 함수는 항상 반환값을 resolved로 하는 프로미스를 반환한다. 반환값에 프로미스가 명시되지 않더라도 이는 암묵적으로 프로미스로 감싸진다.
따라서 아래의 두 코드는 결과값이 '1'인 프로미스가 반환되는 동일한 코드이다.let snack = async function() {
return "cake!";
};
// 또는 화살표 함수처럼 사용이 가능하다.
let snack = async () => {
return "cake!";
};
- async를 함수와 함께 사용하면 아래와 같이 fullfilled 된 프로미스가 반환되는 것을 확인 가능하다.
async & await의 사용
async function 함수이름() {
await 비동기 처리 메서드 이름();
}
//또는 아래와 같이 사용한다.
const 함수이름 = async () ⇒ {
await 비동기 처리 메서드 이름();
}
// await keyword는 반드시 async 함수 내부에서만 사용해야 하고 프로미스 앞에서 사용해야 한다.
만약 async 외부에서 사용하게되면 SyntaxError가 발생한다.잘 정리가 되지 않는다 많이 어렵지만 눈에 계속 익혀보도록 하자!!!!
할 수 있 다 ! ! !
뜨내기 FE 개발자