defer와 async란?
·
👨‍💻 Dev Note/JavaScript
요즘은 정말 신기한 스크립트들이 많다. 다양한 기능을 지원하고 그것도 오픈소스로 제공하는 것들이 많다. 이렇게 신기한 기능들을 지원하다 보니 모던 웹 브라우저에서 지원하는 스크립트들은 대부분 HTML 보다 무거운게 사실이다. 용량이 크기 때문에 로딩하는데 많은 시간이 걸리고 처리하는 것 역시 마찬가지다. Script 로딩 이슈 브라우저는 HTML을 읽다가 태그를 발견하면 스크립트를 먼저 실행하기 때문에 DOM 생성을 잠시 멈춘다. 이것은 src 속성이 있는 외부 스크립트를 만났을 때도 마찬가지다. 외부 파일에서 스크립트를 다운받아 실행한 후에 남은 DOM을 생성처리 할 수 있다. 이런 브라우저의 동작 방식으로 인해 두 가지 중요한 이슈가 발생한다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할..
콜백지옥 (Callback Hell)과 비동기(async) 처리
·
👨‍💻 Dev Note/JavaScript
콜백 지옥 (Callback Hell) 콜백지옥이란, 콜백 함수를 익명 함수로 전달하는 과정이 반복되면서 코드 Depth가 알아보기 힘들만큼 깊어지는 상황을 이야기한다. 보통 EventHandler나 비동기 처리를 수행할 때 이런 형태가 많이 반복될 때가 있는데, 코드 Depth가 많이 길어지게 되고 가독성이 떨어지면서 수정하기도 두려운 상태가 된다. 아래의 코드를 통해 콜백 지옥을 맛보도록 하자. (a.k.a 앱등이 콜백지옥) setTimeout( (product) => { let appleProducts = product; console.log(appleProducts); setTimeout( (product) => { appleProducts += ", " + product; console.log(..