JS) 37번째 회고

---

1. Promise

자바스크립트 비동기 처리에 사용되는 객체이다.
콜백 지옥을 방지할 수 있으며, 사용자 로그인, 보안 설정, 출력 등 다양한 응용이 가능하다.
여기서 자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고
다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미한다.

프로미스는 비동기 작업의 최종 완료 또는 실패 결과를 나타내며 세 가지 상태를 가질 수 있다.

 

1. Pending(대기)
   초기 상태, 비동기 작업이 아직 완료되지 않은 상태
2. Fulfilled(이행)
   작업이 성공적으로 완료된 상태
3. Rejected(실)
   작업이 실패한 상태

 

💻 Promise 사용 예시 코드

let promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    setTimeout(() => {
        let success = true; // 예시: 작업 성공 여부
        if (success) {
            resolve("작업 성공!");
        } else {
            reject("작업 실패!");
        }
    }, 1000);
});

promise.then((message) => {
    console.log(message); // "작업 성공!"
}).catch((error) => {
    console.log(error); // "작업 실패!"
});

 

 

1️⃣ 동기(Synchronous)

동기 방식에서는 작업이 순차적으로 실행된다.
하나의 작업이 완료될 때까지 다음 작업이 시작되지 않는다.
이는 각 작업이 이전 작업의 완료를 기다려야 함을 의미한다.

 

💻 동기 예시 코드

function task1() {
    console.log('Task 1 completed');
}

function task2() {
    console.log('Task 2 completed');
}

task1();
task2();

// Output:
// Task 1 completed
// Task 2 completed

 

2️⃣ 비동기(Asynchronous)

비동기 방식에서는 작업이 병렬로 실행될 수 있다.
하나의 작업이 완료될 때까지 기다리지 않고, 다음 작업을 바로 실행할 수 있다.
비동기 작업의 결과는 나중에 콜백 함수, 프로미스(Promise), 또는 async/await 구문을 통해 처리된다.

 

💻 비동기 예시 코드

function task1() {
    setTimeout(() => {
        console.log('Task 1 completed');
    }, 1000);
}

function task2() {
    console.log('Task 2 completed');
}

task1();
task2();

// Output:
// Task 2 completed
// Task 1 completed (after 1 second)

위 예시에서 Task1은 1초 후에 완료되지만, Task2는 기다리지 않고 바로 실행되는 것을 볼 수 있다.

 

💡 Promise객체

1. Promise 객체가 만들어지면 내부적으로 executor가 자동실행된다.
2. new Promise(executor) 일 때 state는 pending, result는 undefined가 된다.
3. new Promise에는 resolve와 reject를 인수로 갖는 함수가 전달되는데,
   이 함수를 executor(실행자, 실행함수)라 한다.
   resolve(value) : 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
   reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
4. 비동기 처리가 되면 매개변수 resolve("메세지")는 then 메소드로 전달되며
   이때 state는 fulfilled, result는 "메세지"가 된다.

자바스크립트 Promise 쉽게 이해하기

- 출처 : joshua1988

동기, 비동기 처리

- 출처 : goguard

[JavaScript] Promise, executor, state

- 출처 : JustDoIt

---

2. 블로킹(Blocking)과 논블로킹(Non-Blocking)

1️⃣ 블로킹 (Blocking)

블로킹 호출은 작업이 완료될 때까지 제어권을 반환하지 않는다.
즉, 블로킹 작업이 진행되는 동안 다른 작업은 중단되고, 해당 작업이 완료된 후에야 다음 작업이 실행된다.

 

2️⃣ 논블로킹(Non-Blocking)

논블로킹 호출은 작업을 시작한 후 즉시 제어권을 반환한다.
작업이 완료되기를 기다리지 않고, 다음 작업을 계속 실행할 수 있다.
작업이 완료되면 콜백 함수나 이벤트 핸들러를 통해 결과를 처리한다.

 

🚀 동기/비동기와 블로킹/논블로킹의 차이점

 

개념	설명	예시
동기 (Synchronous)	작업이 순차적으로 실행되어, 하나의 작업이 완료될 때까지 다음 작업이 시작되지 않음	동기 함수 호출 (ex : task1(); task2();에서 task1이 완료된 후 task2가 실행됨)
비동기 (Asynchronous)	작업이 병렬로 실행될 수 있으며, 작업 완료를 기다리지 않고 다음 작업을 바로 실행함	비동기 함수 호출 (ex : setTimeout을 사용하여 비동기 작업 수행)
블로킹 (Blocking)	작업이 완료될 때까지 제어권을 반환하지 않으며, 해당 작업이 완료된 후에야 다음 작업이 실행됨	블로킹 I/O 호출 (ex : readFileSync는 파일을 읽는 동안 제어권을 반환하지 않음)
논블로킹 (Non-Blocking)	작업을 시작한 후 즉시 제어권을 반환하며, 작업 완료를 기다리지 않고 다음 작업을 계속 실행함	논블로킹 I/O 호출 (ex : readFile은 파일을 읽는 작업을 시작한 후 즉시 제어권을 반환함)

 

📍 요약

1. 동기 vs 비동기
   동기는 작업이 순차적으로 실행되는 방식이고, 비동기는 작업이 병렬로 실행되는 방식이다.
   
   
2. 블로킹 vs 논블로킹
   블로킹은 작업이 완료될 때까지 제어권을 반환하지 않는 방식이고,
   논블로킹은 작업을 시작한 후 즉시 제어권을 반환하는 방식이다.

---

3. SPA, MPA

1️⃣ SPA(Single Page Application)

SPA는 하나의 HTML 페이지로 구성된 웹 애플리케이션이다.
초기 로드 후, 페이지 전체를 다시 로드하지 않고, 동적으로 컨텐츠를 업데이트한다.
주로 자바스크립트 프레임워크(예: React, Angular, Vue.js)를 사용한다.

 

💡 특징

1. 빠른 사용자 경험
   페이지 전체를 다시 로드하지 않기 때문에 빠른 응답 속도를 제공한다.
2. 동적 데이터 로딩
   필요할 때 데이터만 로드하여 네트워크 트래픽을 줄인다.
3. 클라이언트 사이드 라우팅
   자바스크립트로 라우팅을 관리하여 URL 변경 시 페이지 전체를 다시 로드하지 않는다.

 

2️⃣ MPA(Multiple Page Application)

MPA는 여러 개의 HTML 페이지로 구성된 웹 애플리케이션이다. 각 페이지는 서버에서 별도로 로드된다.

 

💡 특징

1. SEO 친화적
   각각의 페이지가 별도의 URL을 가지므로 검색 엔진 최적화(SEO)에 유리하다.
2. 서버 사이드 렌더링
   서버에서 페이지를 렌더링 하여 클라이언트로 전송한다.
3. 전통적인 웹 애플리케이션 구조
   각 페이지가 독립적으로 동작하며, 페이지 이동 시 전체를 다시 로드한다.

 

🚀 SPA와 MPA의 차이점

특징	SPA	MPA
초기 로드 속도	느림	빠름
페이지 전환 속도	빠름	느림(페이지 전체를 다시 로드)
SEO	상대적으로 불리함 (SSR을 통해 해결 가능)	유리
개발 복잡도	높음 (클라이언트 사이드 라우팅, 상태 관리)	낮음
유지 보수	중앙집중식 관리로 용이할 수 있음	페이지별로 독립적 관리
사용자 경험	매끄러운 전환, 빠른 반응	전통적인 페이지 전환

 

SPA란? 웹 개발 트렌드 SPA의 특징부터 구현 방법까지 모두 알려드립니다! I 이랜서 블로그

- 출처 : www.elancer.co.kr

SPA vs MPA 개념, 장단점

- 출처 : yejin

---

4. Async ~ Await

Async와 Await는 ES2017에서 도입된 비동기 프로그래밍 구문이다.
Async 함수는 항상 Promise를 반환하며, Await는 Promise가 해결될 때까지 함수 실행을 일시 중지한다.

처리가 완료되면 성공 또는 실패 처리를 하며, 이를 통해 비동기 코드를 동기 코드처럼 작성할 수 있다.

 

💻 Async ~ Await 형식 코드

async function 함수명(){
	try{
		await 비동기처리메소드();   // await : 반드시 async 함수 내에서만 써야하는 키워드
	}catch(e){
		
	}finally{
		
	}
}

동기, 비동기란? (+Promise, async/await 개념)

- 출처 : khy__