서문

회사의 프로젝트의 코드를 보면서 jQuery를 접했습니다. 필요한 순간에 맞춰 인터넷을 찾아가면서 코드를 작성했었는데
이렇게 개발을 하다가 마주한 단점은 아무리 간단한 코드여도 작성된 코드를 이해하기 시간이 든다는 것입니다.

웹 프론트엔드 영역에서 jQuery의 입지가 좁아지고 있다는 글을 읽었지만 여전히 높은 시장 점유율을 보유하고 있고
정적이고 가벼운 페이지에서는 사용되고 있습니다.

이러한 점들을 바탕으로 제이쿼리 기초적인 내용에 관하여서는 공부가 필요할 것 같아 글을 작성하려 합니다.

제이쿼리(jQuery)란

제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다.

$( document ).ready()

문서가 "ready"될 때까지 페이지를 안전하게 조작할 수 없습니다. jQuery는 이러한 준비 상태를 감지합니다. 내부 $( document ).ready() 에 포함된 코드는 페이지 DOM(문서 개체 모델)이 JavaScript 코드를 실행할 준비가 된 후에만 실행됩니다. 내부에 포함된 코드 $( window ).on( "load", function() { ... }) 는 DOM뿐만 아니라 전체 페이지(이미지 또는 iframe)가 준비되면 실행됩니다

iframes : HTML 인라인 프레임 요소

$( document ).ready(function() {
    console.log( "ready!" );
});

숙련된 개발자는 때때로 $( document ).ready()를 $()로 축약하여 사용합니다.
jQuery에 익숙하지 않은 사람들이 볼 수 있는 코드를 작성하는 경우 긴 형식을 사용하는 것이 가장 좋습니다.

$(function() {
    console.log( "ready!" );
});

익명 함수를 작성하여 전달하는 대신에 명명된 함수를 전달할 수도 있습니다 .

function readyFn( jQuery ) {
    // Code to run when the document is ready.
}
 
$( document ).ready( readyFn );
// or:
$( window ).on( "load", readyFn );

참고
https://www.samsungsds.com/kr/insights/jquery.html
https://learn.jquery.com/using-jquery-core/document-ready/