[이론내용 정리]

동기(Synchronous)

동기 방식은 여러 작업을 순서대로 하나씩 처리하는 방식이다.

• 한 줄씩 순서대로 실행
• 앞 코드가 끝나야 다음 코드가 실행됨
• 코드 흐름이 위 → 아래로 그대로 진행

예제

console.log('one');
console.log('two');
console.log('three');

실행 결과

one
two
three

동기식의 단점

• 작업이 순차적으로 실행됨
• 하나의 작업이 오래 걸리면 전체가 멈춤
• 브라우저 UI가 멈출 수 있음
• 네트워크 요청에 취약함

예를 들어:

• 서버 API 호출이 오래 걸리면
• 파일 로딩이 느리면
• 전체 프로그램이 대기 상태에 빠짐

---

비동기(Asynchronous)

비동기 방식은 어떤 작업이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 방식이다.

• 작업을 순서대로 처리하지 않음
• 오래 걸리는 작업을 백그라운드에서 처리
• 대표 예시: setTimeout, 이벤트, AJAX, Promise, async/await

웹에서는 주로

• 서버 통신(API 호출)
• 파일 로딩
• 타이머
• 사용자 이벤트 처리

에서 사용된다.

비동기 예제

console.log('one');

setTimeout(() => {
    console.log('two');  // 5초 뒤 실행
}, 5000);

console.log('three');

실행 결과

one
three
two

setTimeout은 비동기 작업이다.
5초를 기다리는 동안 아래 코드가 먼저 실행된다.

비동기 처리 방식 3가지

1. 콜백 함수 (Callback)

function hello(callback) {
    setTimeout(() => {
        console.log("작업 완료");
        callback();
    }, 2000);
}

hello(function() {
    console.log("다음 작업 실행");
});

단점: 콜백 지옥(callback hell) 발생 가능

2. Promise

비동기 작업의 성공/실패를 처리하기 위한 객체

let promise = new Promise(function(resolve, reject) {
    setTimeout(() => {
        resolve("성공");
    }, 2000);
});

promise.then(function(result) {
    console.log(result);
});

3. async / await

Promise를 더 쉽게 사용하기 위한 문법

async function test() {
    let result = await new Promise(function(resolve) {
        setTimeout(() => {
            resolve("완료");
        }, 2000);
    });

    console.log(result);
}

test();

---

Spread 문법 (전개 연산자)

Spread 문법은 ... 을 사용하여

• 배열 복사
• 객체 복사
• 배열/객체 병합
• 함수 인자 확장

등에 사용된다.

배열에서 Spread

배열 복사

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

console.log(arr2);

기존 배열을 변경하지 않고 새로운 배열 생성

배열 병합

let a = [1, 2];
let b = [3, 4];

let result = [...a, ...b];
console.log(result);

객체에서 Spread

객체 복사

let user = { name: "길동", age: 30 };
let newUser = { ...user };

객체 병합

let info = { grade: "silver" };
let merged = { ...user, ...info };

함수 인자에서 Spread

function sum(a, b, c) {
    return a + b + c;
}

let numbers = [1, 2, 3];
console.log(sum(...numbers));

Spread의 장점

• 얕은 복사 가능
• 코드가 간결해짐
• 배열/객체 불변성 유지
• React 같은 프레임워크에서 매우 많이 사용됨

---

Note.

• 동기 → 순서대로 실행
• 비동기 → 기다리지 않고 다음 실행
• JS는 싱글 스레드
• Web API + Event Loop 구조로 비동기 처리
• 비동기 방식 → 콜백 → Promise → async/await
• Spread 문법 → 배열/객체 확장 및 복사

---

[실습내용 정리]

---

비동기 함수

---

스프레드(...)

얕은복사

스프레드 연산자는 얕은 복사로, 객체의 참조값(주소값)을 복사하기 때문에 원본 데이테 값은 바뀌지 않는다.

Iterable구조

spread 구문은 iterable구조이다. 반복가능한 구조라는 의미이다. 배열, 객체 그리고 문자열 등이 iterable구조에 해당한다.