2025/3/12(수)
자바스크립트의 비동기
- 노드 프로그램은 서버에서 실행되므로 대부분의 명령을 비동기 처리
- 자바스크립트의 기본 설정은 비동기식
비동기 처리란?
- 시간이 걸리는 함수와 빨리 처리할 수 있는 함수가 섞여 실행 순서를 알 수 없을 떄
- 함수들이 원하는 처리 순서에 맞게 프로그래밍하는 것
비동기 처리_1) 콜백 함수
함수 안에 또 다른 함수를 매개변수로 넘겨서 실행순서를 제어하는 방식
=> 함수를 실행할 때, 특정 동작이 끝난 후 실행될 함수를 전달하는 개념
function mainFunction(callback) {
console.log("메인 함수 실행");
callback();
}
function myCallback() {
console.log("콜백 함수 실행");
}
mainFunction(myCallback);
실행 결과
-----------
메인 함수 실행
콜백 함수 실행
콜백 함수는 마지막 매개변수로
function order(coffee, callback) {
}
function display(result) {
}
order("아메리카노", display);
콜백 함수를 사용할 때 한번만 실행하고 끝난다면 함수 안에 익명 함수로 직접 작성 가능
function displayLetter() {
console.log('A');
setTimeout(() => {
console.log('B');
setTimeout(() => {
console.log('C');
setTimeout(() => {
console.log('D');
setTimeout(() => {
console.log('stop!');
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}
displayLetter();
콜백이 중첩될수록 코드가 복잡해짐 => 콜백 지옥
==> Promise를 사용하여 콜백 지옥 해결
비동기 처리_ 2) Promise(프라미스)
프라미스 객체와 콜백 함수를 사용해서 실행 순서 제어
"어떤 작업이 끝나면 결과를 반환할 것을 약속하는 객체"
Promise의 3가지 상태
| pending (대기 중) |
비동기 작업이 아직 완료되지 않음 |
| fulfilled (이행됨) |
작업이 성공적으로 완료됨 (resolve()) |
| rejected (거부됨) |
작업이 실패함 (reject()) |
const myPromise = new Promise((resolve, reject) => {
let success = true;
setTimeout(() => {
if (success) {
resolve("✅ 작업 성공!");
} else {
reject("❌ 작업 실패!");
}
}, 2000);
});
myPromise
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("🎯 작업 완료!"));
실행 결과
-----------
✅ 작업 성공!
🎯 작업 완료!
Promise 체이닝
여러개의 비동기 작업을 연결해서 실행
function getUser() {
return new Promise(resolve => {
setTimeout(() => resolve("👤 사용자 데이터"), 1000);
});
}
function getPosts(user) {
return new Promise(resolve => {
setTimeout(() => resolve(`${user}의 게시글`), 1000);
});
}
getUser()
.then(user => getPosts(user))
.then(posts => console.log(posts))
.catch(error => console.error("❌ 오류 발생:", error));
Promise 역시 체이닝을 사용해서 연결을 계속하면 콜백 지옥처럼 코드가 복잡해질 수 있음!
비동기 처리_3) async/await
- Promise를 더 쉽게 사용할 수 있도록 도와주는 최신 문법
- 콜백 함수나 .then() 체이닝 없이 가독성이 뛰어난 비동기 코드를 작성 가능
| await |
비동기 함수 내에서 Promise가 완료될 때까지 기다림 |
async function init() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
console.log(users);
} catch (err) {
console.error(err);
}
}
init();
노드의 모듈
- 노드에서는 대부분의 기능을 모듈 단위로 나누어 작성
- 기능별로 만들어 놓은 함수
모듈의 종류 3가지
1) 내장 모듈(노드가 제공)
2) 내가 만든 모듈
3) 서드파티 모듈
모듈의 사용 이유
CommonJS 모듈 시스템
✅ module.exports
✅ require()
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
module.exports = subtract;
module.exports = { add, subtract };
const math = require('./math');
console.log(math.add(5, 3));
console.log(math.subtract(10, 4));
ES 모듈 시스템
✅ 모듈 내보내기 (export)
export const add = (a, b) => a + b;
-----------------------------------------
const goodbye = (name) => {
console.log(`${name}님, 안녕히 가세요`);
}
export default goodbye;
✅ 모듈 가져오기 (import)
import { add, subtract } from './math.mjs';
console.log(add(5, 3));
console.log(subtract(10, 4));
