프로그래밍 공부 노트

async / await 을 사용하면 프로미스(Promise)를 좀 더 편리하게 사용할 수 있다. async / await 는 프로미스(Promise) 코드를 보다 간편하고 직관적으로 작성할 수 있게 해주는 API 이다.   async 함수 function 앞에 async 키워드를 작성하면 해당 함수는 프로미스(Promise)가 된다. const asynchronous = async () => { return "something" ; }; 기존의 프로미스 방식에서는 resolve 콜백함수와 reject 콜백함수를 인자로 받아오는 콜백함수를 선언했어야 했다. 하지만 async 키워드를 작성하면 프로미스(Promise)의 콜백함수를 작성하지않아도 해당 함수는 항상 프로미스를 반환하게 된다.  만약 프로미스가 아닌 값을 반환하더라도 이행된 상태의 프로미스로 값을 감싸 이행된 프로미스를 반환해야한다. const asynchronous = async () => { return "something" ; }; asynchronous (). then ( console . log ); // something 위 예시 asynchronous 함수를 호출하면 아래의 사진과 같이 이행된 프로미스 "something"이 반환된다. 이 처럼 함수 앞에 async 키워드가 작성되면 이행된(fulfilled) 프로미스가 반환된다. async 키워드를 사용하면 기존의 .then() 대신에 await을 사용할 수 있다. await await은 영어 단어 뜻 "기다리다" 와 동일하게 동작한다.즉 프로미스가 처리될 때까지 함수 실행을 기다리게 된다. 그리고 처리된 결과를 가지고 코드를 이어서 실행한다. 프로미스가 처리되는 동안에 다른 업무(다른 스크립트 실행, 이벤트 처리 등)을 할 수 있다. await은 async 함수 안에서만 동작한다. async 키워드를 사용하지 않은 함수에서 aw

javascript를 공부하다보면 javascript를 불러오고 작성할 수 있는 태그인 <script></script>를 html의 head 부분 또는 body 태그 마지막 부분에 작성하는것을 볼 수 있다.  JavaScript를 불러오는 script 태그는 head 태그 안쪽에도 작성할 수 있고, body 태그 안쪽에도 작성할 수 있는데 여러 강의나 예제들 마다 위치를 다르게 작성하여 어디에 선언하는게 좋은것인지 찾아보게 되었다. head 태그 또는 body 태그에 작성해도 되지만 코드가 효율적으로 동작하기 위해서는 defer 키워드를 사용하여 head 태그 안쪽에서  script 태그를 작성하는 것이다. < head > < script defer src = "index.js" ></ script > </ head > 아래에는 그동안 볼 수 있었던 방식의 단점들을 알아보았고 왜 defer 키워드를 사용하여 head 태그 안쪽에 작성해야하는지 알아보았다. 첫번째 : head 태그 안쪽에 script 태그를 작성하는 경우 head 태그안에 작성했을때 문제점을 보면 웹브라우저가 html 문서를 해석할 때 왼쪽에서 오른쪽으로, 위에서 아래로 순차적으로 수행되는데   head 태그에 작성한 script 태그를 만나면 그 안에 작성된 javascript 코드들을 해석하고 처리하게되는데, 이러한 작업이 끝날때까지 아래에 작성된 다른 html 코드들이 수행되지 못해 화면을 출력하는데까지 시간이 느려지게 된다. 추가적으로 js파일 내부 코드 중에 html 태그에 접근하여 태그를 조작하도록하는 함수들이 존재하는경우 head 태그 안에 script 태그를 작성하면  body 안에 작성된 태그들이 생성되기 이전에 즉, DOM트리가 완성되기 이전에 함수를 실행하게되면서 함수안에서 접근하고있는 해당 태그들에 접근하지 못하게 되고 오류가 발생하게 된다. 두번째 : body 태그 안쪽 맨아래 끝부분