04.04.2022 TIL

TIL

Done it

비동기: 특정 코드의 연산이 끝날 때 까지 기다리지 않고 다음 코드를 먼저 실행

• addEventListener: 인자로 들어오는 함수를 addEventListener동작 후 사용
• setTimeout, setInterval: 시간 후 함수 동작
• XMLHttpRequest(XHR): 데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리

 

 

제작 tip

this.state : 들어오는 데이터 상황

this.setState: Update를 위해 필요한 부분

this.render: 실행 부분

을 기본으로 알고 Component별로 데이터가 어떻게 들어오는 지 잘 알아야 하며 Object형 데이터를 잘 사용하도록 연습해야 합니다.

 

 

 

Promise : 비동기 작업을 Chaining 식으로 제어하 것

• Promise.all(iterable)
• 여러 Promise를 동시 처리

Promise.all([promise1, promise2, promise3]).then

2. Promise.allSettled(iterable)

여러 Promise들이 모두 이행된 경우 처리

Promise.allSettled(promises).then

3. Promise.resolve()

비동기 없이 then을 사용하기 위해 Promise를 return 할 수 있는 방법

Promise.resolve()

 

 

 

async & await

자바스크립트 async와 await

1. 비동기를 동기적으로 보이게 하는 것
2. async 키워드가 붙은 함수는 return 값을 Promise로 감싼다

=> await는 Promise를 풀어주는 것

async function F(){
    const res = await request()
}

const F = async () => {
    const res = await request()
}

 

 

Feeling

배운것을 다시 혼자 만드는 식으로 공부를 진행하고 있는데 생각보다 쉽지가 않고 시간이 더 많이 드는 것 같습니다. 그래도 많이 얻어가고 있는 기분이 들어 좋습니다. ㅎㅎㅎㅎ

하나씩 하나씩 해나가야 겠습니다. 너무 많은 것을 잡기 보다는 가진 것에 집중!!

 

 

REF

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

https://joshua1988.github.io/web-development/javascript/js-async-await/