async/await에 대한 이해가 맞는지 확인 해주 실 수 있으실까요?

Question

안녕하세요 ~ 강의 잘 듣고 있습니다

async / await을 파면서 궁금한점이 생겼는데 혹시 알려 주실 수 있으시면 정말 감사하겠습니다

첫번째 예시


    reader.onload = async e =>{
        array.push(e.target.result)
        let copyPreview = [...preview]
        await copyPreview.push(...array);
        setPreview(copyPreview)
      }
     }
    }

이렇게 코드가 있다는 가정 (제가 아는한에서 설명하겠습니다)

1. async안의 코드들은 전부 비동기로 작동한다

2. await 붙은 코드는 .then느낌으로 맨 마지막에 작동한다 // 이 정의가 맞을까요?

두번째 예시 (공부하면서 퍼온겁니다)


async function showAvatar() {

  // JSON 읽기
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // github 사용자 정보 읽기
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();
}

let response = await fetch('/article/promise-chaining/user.json');

라는 것은 fetch즉 백엔드에서 데이터를 불러오는 것이 비동기 이기 때문에

await을 안붙여주면 let response에 데이터르 다 불러오기전엔 undefined가 뜨고

다 불러온 후에야 response에 데이터가 담기기 때문에 await을 쓴건가요?

제로초(조현영) · Answer

1. 틀렸습니다. 비동기코드만 비동기고 나머진 전부 동기입니다. 저 코드에서는 setPreview 빼고는 전부 동기입니다. 2. 틀렸습니다. await은 비동기코드가 끝나길 기다린 후 다음 코드 실행하는 겁니다. 근데 그 비동기 코드도 프로미스여야 하고, push는 동기코드라서 await 붙이는 의미가 없습니다. 3. fetch와 json은 비동기 프로미스라서 await 붙입니다.