여행을 개발하다
$(document).ready(function(){}) 본문
개발 실무에서 처음 제이쿼리를 접했을 때, 모든 페이지에서 관행처럼 쓰이는 코드가 있었습니다.
"$(document).ready(function(){})"
저는 기본적인 알고리즘과 C++, 자바, 파이썬의 기본 로직만 알고 있는 상태였구요.
어딘가 자바랑 많이 닮은 듯 하지만 문법과 기호들이 생소했고, 그 뜻을 이해하기보단 그저 눈에 익숙해지는데 집중했어요.
하지만 프론트와 백엔드를 두루 알아야했기에 조금씩 자바스크립트, 제이쿼리를 공부하기 시작했습니다.
자바스크립트를 조금더 편하게 사용하고자 만들어진 것이 제이쿼리입니다.
(그런데 제이쿼리에 먼저 익숙해지고 자바스크립트를 이해하려고 했던 것 같아요.)
이러한 스크립트 언어를 자바와 결합하여 사용하자, 구현할 수 있는 화면 및 로직의 범위는 기하급수적으로 늘어났습니다.
제 주관적인 생각으로, 스트립트 언어는 매우 직관적입니다.
여기서 직관적이란, 개발자가 짠 코드를 그저 '순서'에 맞게 따라서 문서 객체를 로드하고 화면상에 표현한다는 점입니다.
사족이 길었습니다.
다음과 같은 html 소스를 호출한다는 예제를 들어보죠.
컴퓨터는 첫 번째 줄인 '<!DOCTYPE html>' 부터 '</html>까지 그저 순서대로 읽으며 화면을 로드합니다.
이해를 돕기 위해 양념을 조금 치겠습니다.
<script>태그 안에는 'alert("안녕하세요");'를,
body 태그 안에는 'startText'라는 id를 가지고 있는 '<input id="startText" type="text">'를 포함시켜 로드해보죠.
당연히 순서는 alert → input로 문서 객체가 읽힐꺼에요.
화면에서 확인해봐도, alert가 먼저 나타납니다.
alert의 확인 버튼을 누르자, 이제 다음 순서의 input 박스가 나타납니다.
그런데 문제가 하나 생겼습니다.
input 박스는 그대로 가져가되, '안녕하세요'라고 텍스트를 넣어서 로드하려고 해요.
그래서,
'$("#startText").val("안녕하세요");'
'$("#startText") = startText라는 id를 가진 선택자를 찾아,
.val("안녕하세요") = value를 "안녕하세요"로 설정해준다.
를 추가하여 로드해봅니다.
그런데 input 박스에는 '안녕하세요'라고 세팅되어 있지 않습니다.
로직이 잘못된건가요?
아니면 문서 객체를 로드하면서, 컴퓨터가 자기 맘대로 해당 코드를 읽지 않은 것일까요?
하지만 컴퓨터는 그저 시키는대로 일했을 뿐입니다.
그 이유는 문서객체를 읽어들이는 순서가
'$("#startText").val("안녕하세요");' → '<input id="startText" type="text">'이라는 점입니다.
제이쿼리는 아이디가 startText인 것을 찾아 value를 '안녕하세요'로 넣어주고 싶었습니다.
하지만 해당 val()라는 메소드가 실행되는 시점에는, id가 'startText'인 input 박스가 정의되어 있지 않았기 때문에 값을 넣어줄 수 없었습니다.
이럴 때 사용하는 것이 바로 "$(document).ready(function(){})"입니다.
메소드명도 스크립트 언어 답게 매우 직관적입니다.
말 그대로 '문서가 준비되면 실행되는 함수'입니다.
즉, 문서 객체가 모두 로드된 다음에 실행될 코드들을 $(document).ready(function(){}) 안에 기술해줘야 합니다.
이렇게 바꾼 코드를 실행하자, 아무런 문제없이 'startText'라는 id를 가진 input 박스에
'안녕하세요'가 세팅되어 나타납니다.
지금까지 '$(document).ready(function(){})'의 의미에 대해 알아보았습니다.
감사합니다.
'FrontEnd > JQuery' 카테고리의 다른 글
| 선택자 3 - 탐색 선택자 (위치 탐색 선택자) (0) | 2019.06.11 |
|---|---|
| 선택자 2 - 기본 선택자 (인접관계 선택자) (0) | 2019.06.07 |
| 선택자 1 - 기본 선택자 (직접 선택자) (0) | 2019.06.06 |
