[20240505] 앱개발 시작하기 #10

동기 / 비동기

 동기 방식에는 치명적인 단점이 존재한다

이를 해결하기 위해 멀티 스레드를 사용하기도 함

그.런.데?

자바스크립트 엔진에는 쓰레드가 1개 밖에 없다는 사실 ㅋㅋㅋ

동기

// 동기적인 방식으로 배열의 숫자들의 합을 구하는 예시
function calculateSum(numbers) {
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
    }
    return sum;
}

const numbers = [1, 2, 3, 4, 5];

// 배열의 숫자들의 합을 구함
const total = calculateSum(numbers);
console.log("배열의 숫자들의 합:", total);

// 동기적으로 파일을 읽어들이는 Node.js 코드
const fs = require('fs');

// 파일을 동기적으로 읽어들임
const data = fs.readFileSync('file.txt', 'utf-8');

console.log('파일 내용:', data);
console.log('이 코드는 파일을 읽어들인 후에 실행됩니다.');

비동기

비동기 작업은 자바스크립트 엔진이 아닌 Web APIs에서 실행

console.log("첫 번째 줄");

setTimeout(() => {
    console.log("세 번째 줄 (2초 후 출력)");
}, 2000); // 2초 후에 실행됩니다.

console.log("두 번째 줄");

첫 번째 줄
두 번째 줄
세 번째 줄 (2초 후 출력)

콜백(callback)은 JavaScript에서 매우 일반적인 개념으로, 비동기 코드에서 주로 사용됩니다.

콜백은 함수를 다른 함수의 인자로 전달하여 해당 함수가 작업을 완료한 후 호출되도록 하는데 사용됩니다. 이를 통해 비동기 작업이 완료되면 결과를 처리할 수 있습니다.

// 비동기 함수 예시: 지정된 시간이 지난 후에 콜백을 호출하는 함수
function delayedGreeting(name, callback) {
    setTimeout(() => {
        callback("안녕하세요, " + name + "님!");
    }, 2000); // 2초 후에 콜백 호출
}

// 콜백 함수 예시: 비동기 함수가 작업을 완료한 후 호출되는 함수
function displayGreeting(greeting) {
    console.log(greeting);
}

// delayedGreeting 함수 호출, 콜백 함수 전달
delayedGreeting("홍길동", displayGreeting);
console.log("인사를 기다리는 중...");

---

Promise

콜백 지옥에서 벗어날 수 있는 help 방법

function add10(num)=>{
	const promise = new Promise((resolve, reject)=>{
		setTiemout(()=>{
            const num = 10;

            if (typeof num==="num"){
                reslove(num+10);
            }
            else{
                reject("num은 숫자가 아닙니다");
            }
    	},2000;)    
    });
    
    return promise;
}

const p = add10(0);

const pormise = new Promise((resolve,reject)=>{
	//비동기 작업 실행하는 함수
    //executor
    
    setTiemout(()=>{
    	const num = 10;
        
        if (typeof num==="num"){
        	reslove(num+10);
        }
        else{
        	reject("num은 숫자가 아닙니다");
        }
        
    	// console.log("hi");
        //reject("why fail?"); //비동기 작업 실패 resolve는 성공시킴 
    },2000;)
})

// then 메소드
promise.then((value)=>{
	console.log(value);
})

// catch 메소드
promise.catch((error)=>{
	console.log(error);
})

console.log(promise);

setTimeout(()=>{
	console.log(promise);
},3000)


promise
.then((value)=>{
	console.log(value);
}
)
.catch((error)=>
	{console.log(error);
});

---

async

: 어떤 함수를 비동기 함수로 만드는 함수

async 함수는 암시적으로 Promise를 반환하며, 내부에서 await 키워드를 사용하여 다른 비동기 작업의 완료를 기다릴 수 있습니다.

// 비동기 함수 예시: 비동기적으로 인사말을 반환하는 함수
async function getGreeting(name) {
    return "안녕하세요, " + name + "님!";
}

// async 함수 호출
getGreeting("홍길동")
    .then(greeting => {
        console.log(greeting); // "안녕하세요, 홍길동님!" 출력
    })
    .catch(error => {
        console.error("오류 발생:", error);
    });

await 함수 - async와 무조건 함께해야 오류가 없다!

// 비동기 함수 예시: 비동기적으로 인사말을 반환하는 함수
function getGreeting(name) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("안녕하세요, " + name + "님!");
        }, 2000); // 2초 후에 Promise가 처리됨
    });
}

// async 함수 예시: await 키워드를 사용하여 비동기 작업을 기다림
async function greetUser() {
    try {
        const greeting = await getGreeting("홍길동");
        console.log(greeting); // "안녕하세요, 홍길동님!" 출력
    } catch (error) {
        console.error("오류 발생:", error);
    }
}

// async 함수 호출
greetUser();