오늘의 생각

Underbar 과제가 악명 높다고 들었는데, 좋은 페어분을 만나고 그간 복습했던 것도 빛을 발해서 그래도 시간 내에는 Bare minimum 과제를 모두 끝낼 수 있었다. 덕분에 코딩에 조금씩 자신감이 붙고 있다. 후후

비동기로 넘어가면서 프론트보다 백엔드에 가까운 내용들을 조금씩 학습하고 있는데 아무리 들어도 이해가 쉽지 않았던 부분이 드림코딩 채널도 같이 병행하여 수업을 들으니 어느 정도는 이해가 되어서 너무 다행이다 ㅠㅠ 오늘도 공부에 정진하며.. 지렁이 화이팅 b

PS. 드림코딩 엘리쌤 사랑해요..

오늘의 학습내용

비동기

1) 비동기란?

1-1) 동기

: 어떤 작업을 수행할 때, 이전 작업이 끝난 이후 다음 작업을 수행할 수 있는 방식

1-2) 비동기

: 이전 작업이 끝나지 않았더라도 다음 작업을 동시에 수행할 수 있는 방식

2) Javascript 비동기

• Javascript는 위에서부터 아래로 코드를 읽으며 동작을 수행하는 동기적 특성을 지님. 이러한 Javascript에 비동기적인 실행을 가능하게 하는 방법을 정리하였다.

2-1) Callback

• 동기적 Callback

function printImmediately(print){
	print();
}

printImmediately(() => console.log('hello'));

• 비동기적 Callback

function printWithDelay(print, timeout){
	setTimeout(print, timeout);
}

printWithDelay(() => console.log('async callback'), 2000);

• setTimeout()

setTimeout(() => 실행 내용, mllisec);

[!콜백 지옥!]
: Callback을 끝없이 사용할 때, 일명 '콜백 지옥'에 빠지게 된다!

2-2) Promise

: 비동기를 간단하게 처리해주는 JS Object('콜백 지옥'을 해결하기 위한 방법 중 한가지)

• State(상태)
  : pending -> fulfilled or rejected

• Producer / Consumer

[Producer]
// Promise가 만들어지는 순간 함수가 바로 실행되기 때문에 유의해야 함.
// 불필요한 네트워킹이 일어날 수 있음(예: 버튼 클릭 시 Promise가 실행되어야 할 때 등..)
const promise = new Promise((resolve, reject) => {
	// doing some heavy work
  	setTimeout(() => {
    	resolve(실행 내용);
      	reject(new Error(에러메시지));
    }, 2000);
});

[Consumer : then, catch, finally]
// then 이후에는 값을 바로 전달해도 되고, Promise를 전달해도 됨.
// then 이후에 함수를 호출할 경우, 받아오는 인자를 함수에 넣을 경우에는 ()안에 함수명만 적어도 됨.(인자 생략 가능)

promise
.then(value => { 
	console.log(value);
})
.catch(error => {
	console.log(error);
})
.finally(() => { // Promise가 resolve되든 reject되든 마지막에 실행되는 함수
	console.log('finally');
});

• Promise chaining

const fetchNumber = new Promise((resolve, reject) => {
	setTimeout(() => resolve(1), 1000); // Promise가 성공적으로 수행되었다면, 1초 후에 1을 fetchNumber에 전달

});

fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
	return new Promise((resolve, reject) => {
    	setTimeout(() => resolve(num-1), 1000);
    });
})
.then(num => console.log(num));

• Error Handling
  .then 이후 발생하는 에러를 핸들링하고 하고 싶을 경우, 해당 실행 내용(.then) 바로 뒤에 .catch문을 작성해줌으로써 에러 발생 시 다른 내용을 실행할 수 있다.

const getHen = () =>
	new Promise((resolve, reject) => {
    	setTimeout(() => resolve('암탉'), 1000);
    });

const getEgg = hen =>
	new Promise((resolve, reject) => {
    	setTimeout(() => reject(new Error(`error! ${hen} => egg`)), 1000);
    });

getHen()
.then(getEgg)
.catch(error => {
	return 'bread';
})

• Promise.all
  : Promise 를 병렬적으로(동시에) 배열 형태로 한번에 모아주는 기능을 함

function pickAllFruits() {
	return Promise.all([getApple(), getBanana()]).then(fruits => fruits.join('+'));                      
}
pickAllFruits().then(console.log); // 'apple + banana'

• Promise.race
  : Promise 실행 내용 중, 가장 먼저 실행되는 한가지만 출력하는 기능을 함

function pickOnlyOne() {
	return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log); // 'banana'

2-3) async/await

: Promise도 중첩하여 사용할수록 콜백 지옥과 같은 효과를 낼 수 있기 때문에 async/await을 이용하여 이를 더 간소화 할 수 있다.

• async
  : async를 이용하면 자동으로 Promise 를 생성해준다.

async function fetchUser() {
	return 'abc';
}

const user = fetchUser();
user.then(console.log); // Promise{<fulfilled> : 'abc'}
console.log(user); // 'abc'

• await
  : async 안에서만 사용 가능함.

function delay(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
	await delay(3000); // delay가 끝날때까지 3초동안 기다림 
  	return 'apple';
}

async function getBanana() {
	await delay(3000);
  	return 'banana';
}

function pickFurits(){
	const apple = await getApple();
  	const banana = await getBanana();
  	return `${apple}+${banana}`;
}

pickFurits().then(console.log); // 'apple + banana'

* 출처 : 드림코딩

* URL
Callback : https://www.youtube.com/watch?v=s1vpVCrT8f4&t=2s
Promise : https://www.youtube.com/watch?v=JB_yU6Oe2eE&t=1519s
async/await : https://www.youtube.com/watch?v=aoQSOZfz3vQ