$(document).ready(function () {})을 쓰는 이유와 module

4주차 강의를 보며 기존의 코드를 수정하는데 Firebase와 연결하기 위해 script에 module 타입을 주게 되었다.

그와 동시에

해당 코드에서 $(document).ready(funtion () {})으로 안의 부분을 감싸줄 필요가 없으니 삭제하겠다고 하셨으나, 이유가 정확히 이해가 되지 않아 따로 찾아보게 되었다.

$(document).ready(function () {}) == html 문서 로딩 끝나면!!

document의 준비가 끝나면(로딩 끝) 함수를 실행한다라는 뜻이다.

여기서 document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체이다.

사용하는 이유로는 컴파일은 일반적으로 위에서 아래방향으로 이루어지는데, 특정 객체에 대한 script문을 작성했을 때, 해당 객체가 script문보다 밑부분에 존재하게 된다면 해당 객체를 찾지 못하여 script문을 적용시키지 못하는 경우가 생길 수 있다.

그리고 컴파일러가 script문을 만날 경우 로드되던 HTML 작업이 중단되고 script문을 우선적으로 처리한다.

따라서 일반적으로 body태그 바로 위에 script문을 작성하는 방식으로 개발을 진행한다고 하는데(제일 마지막에 읽힐 수 있도록) 예외적으로 script문이 상단에 작성 되었을 때도 마지막에 실행되게 하는게 바로 $(document).ready(function(){})인 것이다.

module

script를 module로 설정하게 되면 일반 스크립트와 다른 특징들을 갖게 되는데, 그 중 비동기 로딩 이라는 특징이 있다.

동기적 방식은 위에 적혀있듯이 파싱 중 script문을 만나면, script문을 우선적으로 처리하는 기존의 방식이다. 하지만 비동기적 방식은 HTML 파싱과 script문 처리를 동시에 진행함으로써, 페이지의 초기 로딩 시간을 단축하고 UX를 좋게 만든다.

그리고 type="module"의 경우 defer를 내재하고 있다.

• defer란? : 브라우저가 HTML 파싱 도중 script문을 만나도 파싱과 script문을 병렬적으로 수행한다. 대신 script문은 HTML을 모두 파싱한 뒤에 실행된다.

따라서 script를 module로 설정하면서 자동적으로 비동기 로딩의 특징을 갖게 된다.
-> 굳이 $(document).ready(function (){})으로 감싸지 않아도 비동기적 방식(script문을 나중에 실행)으로 컴파일이 진행된다.

따라서 module 상태에서 $(document).ready(function (){})을 씌우는 것은 같은 특징이 중첩(?)되는 것과 같기에 지우라고 하셨던 것 같다.