JavaScript - async / defer 스크립트 속성 (feat. kakao sdk 로컬 에러)

 

 

카카오 sdk 는 로컬에서 돌아가지 않고 퍼블릭 url 에서만 돌아가게 된다. 

스크립트 형식으로 삽입되면 에러를 내뱉을 때까지 한참을 기다려야 해서

로컬 개발 환경에서의 개발자 경험이 좋지 못하다. 

 

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
// .... err
// 나 : 잉....? 왜 안되지?

 

 

 

왜 그럴까

html  은 <script> 를 읽으며 다른 동작을 멈추게 된다.

이런 케이스에서는 스크립트 아랫쪽의 화면을 그려내지 못하고

스크립트가 다운완료 되거나 실패해서 에러를 내뱉을 때까지 하염없이 기다려야 한다.

그래서 해당 스크립트가 비동기적으로 동작하도록 핸들링해줄 필요가 있다.

 

 

defer

script 안에 defer 속성을 사용하면 브라우저는  '백그라운드’에서 다운로드 한다

따라서 스크립트를 다운로드 하는 도중에도 HTML 파싱은 계속된다. 파싱이 완료 된후 스크립트는 실행된다.

단, DOMContentLoaded  이벤트 전에 실행이 된다. (순서가 보장)

그렇기 때문에  스크립트가 DOM 의 구조에 의존하는 경우 사용이 된다.

<script defer src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

 

 

async

script 안에 async 속성을 사용하면 마찬가지로 브라우저는 백그라운드에서 다운로드한다.

따라서 스크립트를 다운로드 하는 도중에도 HTML 파싱은 계속된다. 파싱이 완료 된후 스크립트는 실행된다.

defer 와 달리 DOMContentLoaded  이벤트를 신경쓰지 앟고 HTML  파싱 후 그냥 되는데로 실행이 된다.

실행순서가 보장이 안되고 제각각이다.

<script async src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

 

 

 

 

 

해결

async 옵션을 통해 비동기적으로 완료되는대로 실행을 시켜주니 해결이 되었다.

//  async 를 추가
<script async src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
// ... success!

 

 

 

 

 

ref: 

https://ko.javascript.info/script-async-defer