잡담
jQuery를 사용하다 보니까 JavaScript도 재밌어지고 Front-end 코딩이 눈에 보이는 코딩이다 보니 더 재미있게 만들고 있는 거 같습니다. 별거 아닌 것도 먼가 해낸 거 같고 그렇습니다. 오늘도 열심히 올려보겠습니다.
Ready
.ready() 함수는 jQuery에서 사용되는 이벤트 핸들러입니다. 이 함수는 문서 객체 모델(DOM)이 로드되었을 때 실행할 코드를 지정할 수 있습니다.
HTML 문서가 완전히 로드되고 초기화된 후에 JavaScript 코드를 실행해야 할 때 유용합니다. 일반적으로 JavaScript 코드가 <body> 요소 끝에 위치하는 것이 좋은데, 이는 HTML 문서의 모든 요소가 로드된 후에 JavaScript 코드가 실행되기 때문입니다. 그러나 jQuery를 사용할 때는. ready() 함수를 사용하여 문서 로드 이벤트를 감지하고 코드를 실행할 수 있습니다.
예를 들어, 다음은 .ready() 함수를 사용하여 문서 로드 이벤트를 처리하는 예제입니다.
$(document).ready(function(){
// 문서가 로드된 후에 실행될 코드
console.log("문서가 준비되었습니다.");
// 여기에 추가적인 코드를 작성할 수 있습니다.
});위의 코드에서 $(document).ready()는 문서가 준비되었을 때 실행할 함수를 지정합니다. 이 함수 내부의 코드는 문서가 로드된 후에 실행됩니다.
. ready() 함수의 축약형으로는 $(function(){})를 사용할 수도 있습니다.
$(function(){
// 문서가 로드된 후에 실행될 코드
console.log("문서가 준비되었습니다.");
// 여기에 추가적인 코드를 작성할 수 있습니다.
});이런 식으로 jQuery를 사용하면 문서가 로드되었을 때 초기화 코드를 깔끔하게 관리할 수 있습니다.
Ready 사용 이유?
. ready() 함수를 사용하는 이유는 웹 페이지가 로드될 때 jQuery 코드가 실행되도록 보장하기 위해서입니다.
일반적으로 JavaScript 코드를 HTML 문서 안에 <script> 태그로 포함시키면 해당 코드는 HTML 문서가 파싱 되는 동안에 바로 실행됩니다. 이는 DOM 요소들이 아직 로드되지 않은 상태에서 JavaScript 코드가 실행될 수 있음을 의미합니다. 이런 경우에는 JavaScript 코드가 DOM 요소를 찾지 못하거나 조작할 수 없는 문제가 발생할 수 있습니다.
. ready() 함수는 이러한 문제를 해결하기 위해 사용됩니다. jQuery에서. ready() 함수를 사용하면 HTML 문서의 DOM 요소들이 모두 로드되고 준비된 후에 특정한 함수를 실행할 수 있습니다. 따라서 해당 함수 내에서는 DOM 요소들에 안전하게 접근하여 조작할 수 있습니다.
이렇게 함으로써 코드의 안정성과 일관성을 유지할 수 있습니다. 또한 사용자가 페이지를 빠르게 로드하고 스크립트를 실행할 수 있도록 도와줍니다.
비교
my-div 생성 전 접근
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div{
width:100px;
height:100px;
background-color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$("#my-div").css({"width":"+=100",
"height":"+=100",
"backgroundColor":"green"})
//my-div가 만들어지기 전에 접근했다.
</script>
</head>
<body>
<div id="my-div">
</div>
</body>
</html>See the Pen ready1 by 이현석 (@loxshqac-the-styleful) on CodePen.
my-div 생성 후 접근
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div{
width:100px;
height:100px;
background-color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="my-div">
</div>
</body>
<script>
$("#my-div").css({"width":"+=100",
"height":"+=100",
"backgroundColor":"green"})
//my-div가 만들어지고 나서 접근했다.
</script>
</html>See the Pen ready2 by 이현석 (@loxshqac-the-styleful) on CodePen.
head에 ready를 이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div{
width:100px;
height:100px;
background-color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my-div").css({"width":"+=100",
"height":"+=100",
"backgroundColor":"green"})
//ready콜백함수는 DOM생성 완료가 되면 실행된다.
//일종의 동기화
//Specify a function to execute when the DOM is fully loaded.
//DOM이 완전하게 로드되면 실행할 함수를 지정해라
//ready메서드에 DOM이 완전하게 로드되면 실행할 콜백함수를 지정해라
//익명함수 형태의 콜백함수
})
</script>
</head>
<body>
<div id="my-div">
</div>
</body>
</html>See the Pen ready3 by 이현석 (@loxshqac-the-styleful) on CodePen.
글을 마치며
오늘은 ready에 대해서 알아봤습니다. 매서드들을 만들고 ready 함수 안에 넣어서 다른 함수들을 한 번에 ready 시킬 수도 있어서 유용하게 사용할 수 있습니다. 위에 비교한 것처럼 div생성 후에 접근하는 것과 전에 접근하는 게 달라서 ready를 잘 사용해야 될 것입니다. 감사합니다.
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery 사용법 (0) | 2024.04.26 |
|---|---|
| [Java Script] jQuery / even, odd, lt, gt, eq (1) | 2024.04.26 |
| [Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings (0) | 2024.04.26 |
| [Java Script] jQuery / children, parent (0) | 2024.04.26 |
| [Java Script] jQuery / CSS (0) | 2024.04.24 |