6. 강좌 환경, Hellow JavaScript
코딩에 필요한 것
최신 브라우저
- 강좌에서는 크롬 브라우저 사용
편집기 (에디터)
- 손에 익숙한 것 사용
사용하고 있는 것이 없다면
- Visual Studio Code (VS Code)
- 강좌에서는 VS Code 사용
HTML 파일 작성
- 확장자 : html
- 인코딩 : utf-8
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>자바스크립트</title>
<script src="./hello.js" defer></script>
</head>
<body>
</body>
</html>
// hello.js
var hello = "안녕하세요.";
document.body.innerText = hello;
본 강좌에서는 script 요소를 head 요소 안에 작성하는 것을 기본으로 하겠습니다.
그리고 defer 속성을 작성해 주십시오.
defer
html 파일을 처음부터 랜더링하다가 script 요소의 hello.js를 만나면 서버에서 hello.js 파일을 가져옵니다.
그리고 바로 이어서 hello.js 파일에 작성되어있는 코드를 실행합니다.
그런데 그 코드에서 body 태그 안의 어떤 요소에 접근을 하게되면, 아직 body를 랜더링하지 않았으므로 에러가 발생합니다.
반면 defer 속성을 작성하면 body까지 랜더링 한 후에 hello.js 파일에 작성되어있는 코드를 실행합니다.
따라서 그 코드에서 body 안의 어떤 요소에 접근을 하더라도 에러가 발생하지 않습니다.