목차

  1. 비동기 처리
  2. Promise
  3. JSON
  4. AJAX

1. 비동기 처리

비동기 처리 방식

방식 설명
콜백 함수 함수 안에 또 다른 함수를 인자로 넘겨 실행 순서를 제어
프로미스 (Promise) 비동기 작업 성공/실패를 resolve/reject로 명확하게 구분
async/await 프로미스를 보다 간결하게 사용할 수 있는 문법

예제: 기본 비동기 처리

console.log('시작...1');

setTimeout(() => {
  console.log('작업...2');
}, 1000);

console.log('끝...3');

결과 순서

시작...1
끝...3
작업...2

예제: 콜백 함수와 콜백 지옥

function start(callback) {
  console.log('start...');
  setTimeout(() => {
    console.log('process...');
    callback();
  }, 1000);
}

function end() {
  console.log('end...');
}

start(end);

콜백 지옥 (Callback Hell)

function step1(cb) {
  setTimeout(() => {
    console.log('step1...');
    cb();
  }, 1000);
}

function step2(cb) {
  setTimeout(() => {
    console.log('step2...');
    cb();
  }, 3000);
}

function step3(cb) {
  setTimeout(() => {
    console.log('step3...');
    cb();
  }, 2000);
}

step1(() => {
  step2(() => {
    step3(() => {});
  });
});

2. Promise