오늘은...............
어제 배웠던 자바스크립트 Blocking-IO에서 언급되었던 동기 / 비동기에 대해서 좀더 알아보겠다.
Synchronous(동기), Asynchronous(비동기)
사실 여러 강의 찾아보면 Synchronous를 "동기", Asynchronous를 "비동기"라고 표현하는것도 되게 애매하다고 하는 말이 좀 있었다.
참고 블로그 : https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90
여기가 딲!! 내가 찾던 개념들 정리가 잘 되어있었다
이둘의 가장 큰 차이점
- 동기는 '직렬적'으로 작동하는 방식
- 하나의 태스크가 긑날 때 까지 기다렸다가 다음 태스크가 실행됨.
- 비동기는 '병렬적'으로 작동하는 방식
- 코드가 끝날 떄 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행 하는 것
사진처럼 보통 동기의 실행속도가 더 느리다
둘의 차이점과 기본적인 특징은 이정도로만 알아두면 되고,
난 좀더 비동기에 대해서 알아보려 한다.
보통 비동기에 대한 개념이 나오면 + 멀티스레드 도 세트로 나온다.
이 둘의 차이점도 좀 궁금하다..
Asynchronous(비동기)
'비동기 (asynchronous)'란 무엇인가?
- 병렬적으로 태스크를 수행하는 방식이다.
- 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식이다.
a 태스크가 실행되는 시간 동안 b 태스크를 할 수 있으므로 자원을 효율적으로 사용할 수 있다. - 이때, 비동기 요청시 응답 후 처리할 '📌콜백 함수'를 함께 알려준다. 따라서 해당 태스크가 완료되었을 때, '콜백 함수'가 호출된다.
📌콜백 함수에 대해서
📌콜백함수
콜백함수라는 단어가 어렵고 생소해서 이해가 잘안됏다.. 그래서 도움이되는 예제를 적어본다!!!
쉽게 얘기하면 콜백함수는 "나중에 실행될 함수"이다
즉, 함수 안에서 또 다른 함수를 실행할 수 있도록 넘겨주는 함수라고 생각하면 됨!!!🍕 피자 배달 예제 🍕
1. 피자를 시킴
2. 가게가 피자를 만들고 배달 준비
3. "다 만들면 나한테 전화해!" (콜백 함수)
4. 피자가 완성되면 가게에서 나한테 전화(콜백 실행)
5. "네, 배달 갑니다!"
여기서 전화번호(콜백 함수)를 가게에 넘겨주면, 피자가 다 만들어졌을 때 가게가 그걸 실행function orderPizza(callback) { console.log("🍕 피자 주문 완료! (조리 중...)"); setTimeout(() => { console.log("🍕 피자 완성!"); callback(); // 나중에 실행될 함수 호출 }, 3000); } function eatPizza() { console.log("😋 피자를 먹는다!"); } // 피자 주문하면서 eatPizza 함수를 콜백으로 넘김 orderPizza(eatPizza);✅ 콜백 함수는 비동기 작업(예: 네트워크 요청, 타이머 등)이 끝난 후 실행되는 함수
✅ 정의 : 함수에 파라미터로 들어가는 함수
✅ 용도 : 순차적으로 실행하고 싶을 때 씀
콜백 함수가 왜 필요할까?
- 특정 작업이 끝난 "이후" 에 실행해야 할 코드를 지정할 때 유용함.
- 대표적으로 비동기 작업(예: setTimeout, fetch) 에서 많이 사용됨.
- 하지만 콜백을 너무 많이 쓰면 📌콜백 지옥(Callback Hell) 이 생겨서 가독성이 떨어짐 → 📌Promise나 async/await 사용이 더 좋음.
아오 콜백 지옥은또 뭐야 전화상담많은건가
📌Callback Hell (콜백지옥)
아아 순서대로 일이 처리되는데 재귀함수처럼 뎁스가 깊어지는걸 그렇게 부른다고함.
만일 비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우, 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 현상이 발생하는데 이를 Callback Hell이라 한다.
Callback Hell은 코드의 가독성을 나쁘게 하고 복잡도를 증가시켜 실수를 유발하는 원인이 되며 에러 처리가 곤란하다.
'Promise'가 대체 뭐길래
어제 자바스크립트의 특징을 배웠을때 이런 비동기 처리를 위한 함수를 잠시 언급해썽ㅆ다.
자세히 보면 setTimeout, setInterval 모두 콜백함수를 사용할 때 쓰는 함수인데,
뒤에 Promise 와 async/await 가 있다. 이것도 콜백함수 같이 비동기 처리 지원을 해주는 함수다.
async는 비동기(Asynchronous)의 약자로 사용하는 것 같다. ㅎㅎ (Ajax의 첫 A도 Asynchronous)
어제 대충 개념을 잡아놨으니 Promise에 대해서 덧붙인다.
📌Promise(약속)
자바스크립트에서만 사용하는 객체. 미래에서 일어날 일을 약속하는 것이다.
특이하게도, "객체"를 생성해서 작업 수행에 대해 성공/실패/디폴트 로 나눠서 다음 일을 지정할 수 있음. -> 객체가 "상태"를 가짐!!
<Promise 가 가지는 상태>
1. pending (대기 중) → 처음 생성되었을 때
2. fulfilled (이행됨) → 작업이 성공적으로 완료됨
3. rejected (실패됨) → 작업이 실패함
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
const text = prompt('"hello"를 입력하세요');
if(text === 'hello'){
resolve('진짜했네');
} else{
reject('hello를 입력하라고 했자나');
}
}, 2000)
});
myPromise.then((result) => {
console.log('result :' , result)
})
.catch((err) => {
console.log('err : ', result)
})
.finally(()=>{
console.log('이건그냥 다 출력해')
})
코드보면 알 수 있듯이, fulfilled조건이면 .then() 이,
rejected(err)면 .catch()가 , 일괄적인 default출력은 .finally()가 작동된다.
✅ Promise의 핵심은 "비동기 작업의 상태를 추적하고, 그 결과에 맞는 처리를 할 수 있게 도와주는 것"!
굿.
