jQuery | 문서 객체가 완전히 로드되었을 때 실행되게 하는 방법.

회사에서 프론트쪽 ajax 전체 핸들링을 하다가, 
$(function() {...}) 구문이 있는 것과 없는 것의 차이를 깨닫게 되어 기록하려고 합니다. 

아직 jQuery와 친해지지 않아, 이런 사소한 차이들에서 코드가 달라지는 게 아직 신기하네요 :)

 

 

$(function() { ... }) 구문과 $(document).ready(function() { ... }) 구문

두 구문 모두 jQuery에서 문서가 모두 준비되었을 때 실행되는 코드를 정의하는 방법입니다. 

두 가지 방법 모두 문서 객체가 완전히 로드된 후에 코드를 실행합니다. 

 

1. 표현방식의 차이

• $(function() { ... }) 은 축약된 형태로, 문서 객체가 준비되었을 때 실행되는 코드 블록을 정의합니다. 이는 더 간결한 형태이기 때문에, 일반적으로 선호됩니다.
• $(document).ready(function() { ... }) 는 document.ready()함수를 호출하여 문서 객체가 준비되었을 때 실행되는 코드 블록을 정의합니다. 명시적으로 함수 호출을 하므로 의도가 명확하게 드러납니다. 

$(function() { ... }) 구문이 사용되는 경우

• 문서 객체 초기화
  • 문서 객체의 초기화 및 설정 작업을 수행합니다. 
• 이벤트 처리 
  • 문서 객체의 이벤트 핸들러를 정의합니다. 
• AJAX 요청 초기화
  • AJAX 요청을 보내기 전에 초기화 작업을 수행합니다. AJAX 요청에 대한 인증 헤더를 설정하거나 요청을 수정합니다. 
• 플러그인 초기화
  • jQuery 플러그인을 초기화하고 설정합니다. 플러그인이 문서 객체를 수정하거나 특정 요소에 이벤트를 바인딩하는 경우 사용됩니다.
• 애니메이션 및 효과 
  • 문서 객체의 애니메이션 및 효과를 초기화하고 설정합니다. 예를 들어, 페이지 로드 시 특정 요소를 페이드 인 하거나 슬라이드 다운하는 작업을 수행합니다. 

$(function() { ... }) 과 이것을 사용하지 않았을 때의 차이? 

$(function() { ... }) 은 문서가 완전히 로드되었을 때 함수를 실행하도록 jQuery에 지시하는 것이라서, 

만약 비동기인 AJAX를 사용할 때, 어떤 함수는 실행이 되지만, 아직 로드가 안된 ajax의 함수는 실행이 안될 수 있기 때문에, 

이 함수 안에 정의를 해야 실행이 되는 상황이 발생하여, 저도 사용성을 깨닫게 된 함수입니다. 

 

만약 ajax요청이 잘 가지 않는다면, 이 구문을 적용해 보세요! :D