๐ script ํ๊ทธ ์์น?
script ํ๊ทธ๋ ๋ณดํต html ๋ฌธ์์
<head>์์ ์์นํ๊ฑฐ๋</body>์์ชฝ์ ์์น์ํต๋๋ค.
๋ธ๋ผ์ฐ์ ๋ html๋ฌธ์๋ฅผ ์์ชฝ์์๋ถํฐ ์ฝ์ด ๋ด๋ ค์ค๋ค๊ฐ scriptํ๊ทธ๋ฅผ ๋ง๋๊ฒ ๋๋ฉดDOM ์์ฑ์ ๋ฉ์ถ๊ณ scriptํ๊ทธ๋ฅผ ์ฝ์ต๋๋ค.
์๋ ํ๊ทธ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
html
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/script_1.js"></script> /*์คํฌ๋ฆฝํธ ํ์ผ 1*/
<script src="js/script_2.js"></script> /*์คํฌ๋ฆฝํธ ํ์ผ 2*/
</head>
<body>
<script src="js/script_3.js"></script> /*์คํฌ๋ฆฝํธ ํ์ผ 3*/
</body>
</html>
script ํ์ผ1
document.body.prepend('script_1.js');
console.log('script_1.js');script ํ์ผ2
document.body.prepend('script_2.js');
console.log('script_2.js');script ํ์ผ3
document.body.prepend('script_3.js');
console.log('script_3.js');scriptํ์ผ 1๊ณผ 2๋ <head>ํ๊ทธ ๋ด๋ถ์ ์์น๋์ด์๊ณ 3์ </body>์์ ์์น๋์ด ์์ต๋๋ค.
์ ์ฝ๋๋ฅผ ์คํํ๊ฒ ๋๋ฉด scriptํ์ผ 1๊ณผ 2๋ body๊ฐ ์์ฑ๋๊ธฐ ์ ์ ์คํ๋๊ธฐ ๋๋ฌธ์ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
ํ์ง๋ง scriptํ์ผ 3 ์ body๊ฐ ์์ฑ๋ ํ์ ์คํ๋๊ธฐ ๋๋ฌธ์ ์ ์์ ์ผ๋ก ๊ฒฐ๊ณผ๊ฐ ์ถ๋ ฅ๋ฉ๋๋ค.
์์ ๊ฒฐ๊ณผ์ฒ๋ผ scriptํ์ผ์ </body>ํ๊ทธ ์์ ์์น์ํค๋ ๊ฒ์ด ์์ ํฉ๋๋ค.
๐ defer
html
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/script_1.js" defer></script> /*์คํฌ๋ฆฝํธ ํ์ผ 1*/
<script src="js/script_2.js" defer></script> /*์คํฌ๋ฆฝํธ ํ์ผ 2*/
</head>
<body>
<script src="js/script_3.js"></script> /*์คํฌ๋ฆฝํธ ํ์ผ 3*/
</body>
</html>scriptํ๊ทธ์ defer ์์ฑ์ ์ฌ์ฉํ๊ฒ ๋๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ html๋ฌธ์๋ฅผ ์ฝ์ ๋ script ํ๊ทธ๋ฅผ ๋ง๋๋๋ผ๋ DOM์์ฑ์ ๋ฉ์ถ์ง ์๊ณ ๊ณ์ํด์ html์ ์ฝ์ต๋๋ค. defer์์ฑ์ด ์๋ script ํ๊ทธ๋ DOM์ด ์ค๋น๊ฐ ๋ ํ์ ์คํ๋ฉ๋๋ค.
