모든원인은 비동기처리를 못해서

문제점

 

1. 비동기를 어떻게 처리해야할지 깊게 고민해본적이없다

2.둘다 비동기일땐 어떻게 처리해야하는지 정리를 안하니까 계속 걸려넘어진다.

3.비동기vs동기 비동기vs동기  2가지를 정리하고가야한다.

4.실행순서를 깊게 고민해본적이없다 알아서 되겠지라는 안일한생각을 갖고있었음

 

https://bum-developer.tistory.com/entry/React-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98-Promise-async-await

[React] 비동기 작업(콜백 함수, Promise, async, await)

https://velog.io/@khyup0629/javascript-async%EC%99%80-await%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95

 

2.js의 특성

 

1. 자바스크립트는 싱글쓰레드->한번에 1개코드만가능

2.스택은 무조건 즉발실행하는곳만 존재함-> 스택내에서 시간걸리는건 모두 큐로 1차대기큐로 치워버림

 

 

3.콜백함수 

 

 

4.promise ->콜백함수+성공실패 여부

 

4-1 then->성공적으로되었을때 실행해주세요

4-2 catch-> 실패했을때 실행해주세요

4-3 finally-> 성공이든 실패든 실행해주세요

 

5. async/await ->성공만 판정가능->그냥 콜백대신에쓰는것-

 

5-1 프로미스의 값을 받아와서 결과변수에 넣어야하는상황

5-2   함수에 async를 붙이면 promise객체로 만들어주고 .then을 사용가능

 

 

6.js코드해석   

 

6-1  전역변수 var에 이미지로딩 변수이름을 정한다

6-2 프로미스객체를 생성한다

6-3 프로미스객체 파라미터안에 콜백함수를넣어 객체생성->바로 function을 실행한다 

6-4 function에 img변수를 선언하고 dom에 #test태그를 선택한다.

6-5 태그에 이벤트리스너를 부착하고 이미지가 제대로 로드되었으면 성공을 반환하는 함수를 출력시킨다.

6-6 여기서도 콜백함수가 사용된다.

 

 

 

 

 

7.코드해석

 

7-1 async를 function에 붙인다-> 프로미스객체를 반환하되 성공했을때만 가능하도록 한다.

7-2 프로미스객체이므로 .then사용가능하다

7-3 p2의 함수가 잘실행되면 hello를 출력하고 그뒤에 콘솔에 출력해주는코드다

 

8.코드해석

 

8-1 더하기 함수에 async를 선언한다-> 프로미스 객체를 반환한다는 뜻이다

8-2 프로미스객체란 가장 먼저실행해야 하는 함수를 정의하는 객체 이며 성공,실패 두가지 파라미터에 따라 다르게 반환가능하다..then내장함수를 사용가능하다

8-3 프로미스가실행된후 결과변수에 넣으라고 명령하려면 await로 너가 2번쨰실행이라는걸 알려준다.