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

 

+ Recent posts