2025/3/12(수)
자바스크립트의 비동기
- 노드 프로그램은 서버에서 실행되므로 대부분의 명령을 비동기 처리
- 자바스크립트의 기본 설정은 비동기식
비동기 처리란?
- 시간이 걸리는 함수와 빨리 처리할 수 있는 함수가 섞여 실행 순서를 알 수 없을 떄
- 함수들이 원하는 처리 순서에 맞게 프로그래밍하는 것
비동기 처리_1) 콜백 함수
함수 안에 또 다른 함수를 매개변수로 넘겨서 실행순서를 제어하는 방식
=> 함수를 실행할 때, 특정 동작이 끝난 후 실행될 함수를 전달하는 개념
function mainFunction(callback) {
console.log("메인 함수 실행");
callback(); // 전달받은 콜백 함수 실행
}
function myCallback() {
console.log("콜백 함수 실행");
}
// mainFunction 실행 시 myCallback을 콜백 함수로 전달
mainFunction(myCallback);
실행 결과
-----------
메인 함수 실행
콜백 함수 실행
콜백 함수는 마지막 매개변수로
function order(coffee, callback) {
//커피 주문
//3초 기다린 후 콜백 실행
}
function display(result) {
//커피 완료 표시
}
order("아메리카노", display); //display함수를 order함수의 매개변수로 전달
콜백 함수를 사용할 때 한번만 실행하고 끝난다면 함수 안에 익명 함수로 직접 작성 가능
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() 체이닝 없이 가독성이 뛰어난 비동기 코드를 작성 가능
async | 비동기 함수를 정의하는 키워드 |
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()
// math.js (CommonJS)
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
// 모듈을 내보내는 방법 (객체 형태로 여러 개 내보낼 수 있음)
module.exports = subtract;
module.exports = { add, subtract };
// app.js (CommonJS)
const math = require('./math'); // 모듈 가져오기
console.log(math.add(5, 3)); // 8
console.log(math.subtract(10, 4)); // 6
ES 모듈 시스템
✅ 모듈 내보내기 (export)
// math.mjs (ES 모듈)
export const add = (a, b) => a + b;
-----------------------------------------
const goodbye = (name) => {
console.log(`${name}님, 안녕히 가세요`);
}
export default goodbye;
✅ 모듈 가져오기 (import)
// app.mjs (ES 모듈)
import { add, subtract } from './math.mjs';
console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6
'KB 국민은행 IT's your life 교육' 카테고리의 다른 글
[Vue.js] 스타일 적용, Vue에서 스타일 및 클래스 바인딩 방법 (1) | 2025.03.24 |
---|---|
[Vue.js] 기초 템플릿, v- 디렉티브 (0) | 2025.03.19 |
[Git/GitHub 특강] 프로젝트 시 GitHub 사용 명령어 정리 !!! (0) | 2025.03.18 |
[Vue.js] MVVM 패턴 및 ES6 / var, let, const 차이점 정리 / 화살표 함수 (0) | 2025.03.14 |
[Node JS] 파일 관리(Path, file system), 노드와 비동기 처리 (0) | 2025.03.13 |