🤓 What I Learned Today

❓.비동기적으로 실행 된다는 것이 무엇일까?

하나의 동작이 완료되지 않아도 다음 코드가 실행 된다는 것을 의미한다.

❗️비동기 특성

서버에 요청을 보내고 결과가 돌아오지 않아도 다음 코드를 실행 한다.

❓.그러면 이게 왜 필요해?

웹에서 서버에 데이터를 요청했을때 요청이 완료되기 전까지는 아무것도 실행되지 않는데 그 이유는 하나의 프로그램을 실행하는 데 많은 시간이 소요 되기 때문이기도 하다.

그렇다면 어떻게 해야 빠르게 실행해야할까? 실행 순서가 순차적이아니라 빠르게 불러올 수 있는 것 부터 가져오면 어떨까? 예를 들면 서버에서 이미지를 가져온다고 해보자..

이미지의 크기와 네트워크의 환경에 따라 실행이 불가한 경우가 발생할 수가 있다. 이때 비동기 처리가 필요한 것이다.

fetch 함수는 리퀘스트를 보내고 promise 객체를 리턴하며 그 객체의 then 메소드로 콜백을 ⭐️등록이 된다. 콜백은 서버로부터 리스폰스 받았을 때 실행된다.

또한, 해당 프로미스 객체가 pending 상태에서 fulfilled 상태가 되었을때 실행할 콜백 등록할 수 있으며,

리스폰스가 와서 프로미스 객체가 실제로 pending 에서 fulfilled 상태가 되면 등록해둔 콜백이 실행되고 그 작업 성공 결과가 콜백의 파라미터로 넘어오게 된다.

console.log('start!);

fetch('')
	.then((response) => response.text()) // ① 작업 성공 결과
	.then((result) => { console.log(result); });//② 첫 번째 콜백이 실행되고 나면 실행 
	
console.log('End');

위의 예시에서 start → end → then 메소드에 등록되어두었던 콜백이 순서대로 실행

fetch 함수는 promise 객체를 리턴한다.

여기서 promise 객체란 어떤 작업에 관한 “상태 정보”를 갖고 있는 객체이다.(자바스크립트에서 비동기를 간편하게 처리할 수 있게 도와주는 object )

Promise 객체는 크게 3가지 중 하나의 상태를 가진다.

1. 작업이 진행 중임을 의미하는 pending 상태
2. 작업이 성공적으로 완료되었음을 의미하는 fulifilled 상태
3. 작업이 실패했음을 의미하는 rejected 상태

🤔 그렇다면 fulfilled 상태의 객체와 rejected 상태의 객체를 만들고 싶으면 어떻게 코드를 작성해야할까?

fulfilled 상태의 객체

const x = Promise.resolve('success);

rejected 상채의 객체

const x = Promise.reject(new Error('fail'));

🚀 Challenges Experienced

리액트를 공부하다가 중요하게 나오는 자바스크립트의 비동기에 대해 좀 더 알아보았다. 아직은 잘 와닿지 않은 개념이지만 예제를 많이 봐야겠다.