๐ฑ htmlใใญใฅใกใณใใฎJavaScriptใใกใคใซใฏใฉใใซ็ฝฎใใฐใใใงใใ?
6958 ใฏใผใ
์ด๋ฒ ์๊ฐ์๋ html ๋ฌธ์ ๋ด์ ์คํฌ๋ฆฝํธ ํ๊ทธ๋ฅผ ์ด๋ ์์น์ํค๋ฉด ์ข์์ง ์์๋ณด๊ธฐ๋ก ํ์๋ค.
์ผ๋จ ๋จผ์ ๊ฐ๋จํ ์๋ฉด ์ข์ ๊ฐ๋
์ HTML ํ๊ทธ ์์ ์คํฌ๋ฆฝํธ ํ๊ทธ๊ฐ ์์ผ๋ฉด ํด๋น ํ์ผ์ ๋ค
์ด๋ก๋ ํ๊ณ ์คํํ๋ 2๋จ๊ณ๋ฅผ ๊ฑฐ์น๊ฒ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์คํฌ๋ฆฝํธ ํ๊ทธ ์์ ์ด๋ค ์ต์
์ด ๋ค์ด ์
๋๋์ ๋ฐ๋ผ์ ๋ค์ด๋ก๋ํ๊ณ ์คํํ๋ ๋จ๊ณ๋ฅผ ์ฐ์์ ์ผ๋ก ์ฒ๋ฆฌํ๋์ง ์๋๋ฉด ๊ทธ๋ ์ง ์์์ง ์ค
์ ํ ์ ์๋ค. ์๋ ์์๋ฅผ ํตํด์ ์ดํด๋ณด๋๋ก ํ์.
1. ์คํฌ๋ฆฝํธ ํ์ผ์ HEAD ์์ ๋ฃ๋ ๊ฒ์ ์ง์ํ์
๋ธ๋ผ์ฐ์ ๊ฐ ์นํ์ด์ง๋ฅผ ๋ค์ด๋ก๋๋ฅผ ๋ฐ๊ธฐ ์ํด์ ์ ์ผ ๋จผ์ html๋ฌธ์๋ฅผ DOM ์ผ๋ก ๋ง๋ค์ด์ผ ํ๋ค.
DOM์ ๋์ค์ ๋ค๋ฃจ๊ธฐ๋ก ํ๊ณ DOM์ ๋ง๋ค๊ธฐ ์ํด ์ ์ผ ๋จผ์ HTML๋ฌธ์๋ฅผ ์์์ ๋ถํฐ ํ ์ค ์ฉ ์ฝ
์ด ๋ด๋ ค๊ฐ๋ค.
๊ทธ๋ฌ๋ค๊ฐ ์คํฌ๋ฆฝํธํ์ผ์ ๋ง๋ฌ์ ๋ ์๋ฒ๋ก๋ถํฐ ํด๋น ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ์์ผ ํ๋๋ฐ HEAD ํ๊ทธ
์์ ์คํฌ๋ฆฝํธ ํ์ผ์ด ์์ ๊ฒฝ์ฐ HTML ๋ฌธ์๋ฅผ ๋ชจ๋๋ค ๋ ๋๋ง ํ์ง ์์ ์ํ์์ script ํ์ผ์
๋ค์ด๋ก๋ ํ๊ณ ์คํ์ํค๊ธฐ ๋๋ฌธ์ HTML ๋ฌธ์๊ฐ ๋ค ๋ก๋ฉ๋์ง ์์ ์ํ์์ ์งํ์ด ๋๋ค.
๋จ์
์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ํด ๊ฒฝ์ฐ ํ์ด์ง๊ฐ ์ค๋น๋๊ธฐ ๊น์ง ๋ง์ ์๊ฐ์ด ๊ฑธ๋ฆด ์ ์๊ณ HTML ๋ฌธ์์ ์ฐ
๊ด์ง์ด ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์ฑ ํ ๊ฒฝ์ฐ๊ฐ ๋ง์ ํ
๋ฐ HTML ํ์ผ์ ๋ค ๋ค์ด๋ก๋ ๋ฐ์ง ์์ ์ํ
์์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ค์ด๋ฐ๊ณ ์คํ์ํค๋ ๋ถ๋ถ์ ๋ฌธ์ ๊ฐ ๋ฐ์ ํ ์ ์๋ ์์ง๊ฐ ์๋ค.
2. body + script
<body>
<script src="a.js"></script>
</body>
์คํฌ๋ฆฝํธํ์ผ์ ๋ง์ง๋ง์ ๋ฃ๊ฒ ๋๋ฉด HTML ์ปจํ
์ธ ๋ ๋ชจ๋ ๋ค์ด๋ก๋ ๋ ํ์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ฐ๊ณ
ํด๋น ํ์ผ์ ์คํํ๊ฒ ๋๋ค. ๋งค์ฐ ์คํ ๋ํ ๋ฐฉ๋ฒ์ด๋ค.
๋จ์ ์ผ๋ก๋ HTML ๋ฌธ์๊ฐ ์ค๋น๋ ์ดํ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ด๋ จ ํ์ผ์ด ๋ค์ด๋ก๋ ๋๋ฏ๋ก ํ์ผ ์ฉ๋์ด ์ปค์
๋ค์ด ๋ฐ๋๋ฐ ์๊ฐ์ด ๊ฑธ๋ฆด ๊ฒฝ์ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค. ๋ฌธ์ ๋ผ ํจ์ ์ต์ข
ํ์ด์ง๊ฐ ์์ฑ๋๋๋ฐ ์๊ฐ์ด
๊ฑธ๋ฆฐ ๋ค๋ ๋ถ๋ถ์ด๋ค.
3. head + async ์ต์
<head>
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
</head>
์ด๋ฐ ์์ผ๋ก head ํ๊ทธ ์์ script ํ๊ทธ๊ฐ ์๊ฒ ๋๋ฉด ๋ง๋๋ ์๊ฐ๋ถํฐ ํ์ผ์ ๋ค์ด๋ก๋ ์ํค๊ณ
์์์ ์๊ด์์ด ๋ค์ด๋ก๋๊ฐ ์๋ฃ๋ ํ์ผ๋ถํฐ ์คํ์ ์ํค๊ฒ ๋๋ค. ์ธ๊ฐ์ ํ๊ทธ ์์
์ด ์๋ฃ๋๋ ์
์ ๊น์ง HTML์ ํ์ฑํ๋ ๊ฒ์ ์ค๋จํ๊ฒ ๋๋ค. ํด๋น ์์
์ด ์๋ฃ ๋๋ฉด ํ์ฑ์ ๋ค์ ์์ํ๋ค.
๋จ์
html ํ์ฑ์ด ์๋ฃ๋์ง ์์ ์ํ์์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ค์ด๋ก๋ ํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ์๊ธธ
์์ง๊ฐ ์๋ค.
๋ํ ๋ค์ด๋ก๋ ์์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ์คํ๋๊ธฐ ๋๋ฌธ์ ํ์ผ ๊ฐ ์คํ ์์๊ฐ ์ค์ ํ ๊ฒฝ์ฐ ํด๋น
๋ถ๋ถ๋ ๋ฌธ์ ๊ฐ ๋ ์ ์๋ค.
4. head + defer ์ต์
<head>
<script defer src"a.js"></script>
<script defer src"b.js"></script>
<script defer src"c.js"></script>
</head>
์์ ๊ฐ์ ์์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ๊ฒ ๋๋ฉด ์คํฌ๋ฆฝํธ ํ์ผ์ ๋ค์ด๋ก๋๋ฅผ ์๋ฃํ๋ ์์ ์ด ํ์ผ ๊ฐ ์๋ก ๋ค๋ฅผ ์ ์
์ง๋ง ํ๊ทธ๋ฅผ ๋ง๋๋ ์์ ๋ถํฐ ํ์ผ์ ๋ฏธ๋ฆฌ ๋ค์ด๋ก๋ ํ๋ค๋ ์ฅ์ ์ด ์๊ณ html ํ์ผ์ ๋ชจ๋ ๋ค์ด๋ก๋ ํ ์์ ์ด
ํ์ผ ์์ฑ ์์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์คํ์ํค๊ธฐ ๋๋ฌธ์ ์์์ ๋ฐ์ํ ์ ์๋ ์ค๋ฅ 2๊ฐ๋ฅผ ๋ฐฉ์ง ํ ์ ์๋ค.
html ํ์ผ์ ๋ชจ๋ ์๋ฃํ ์ํ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐ์ผ๋ฏ๋ก html ํ์ผ์ ๋ชจ๋ ๋ฐ์ง ์์ ์ํ์์ ์๋ฐ์คํฌ๋ฆฝํธ
ํ์ผ์ ๋ค์ด๋ก๋ ํ์ ๋ ๋ฐ์ํ ์ ์๋ ์๋ฌ์์๋ฅผ ๋ฐฉ์งํ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์ฑํ ์์๋๋ก ํ์ผ์ ์คํ์์ผ ๋ฌด์์ ์์๋ก ํ์ผ์ด ์คํ๋๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์๋ค.
ใฝใผใน
Dream Coding
Reference
ใใฎๅ้กใซใคใใฆ(๐ฑ htmlใใญใฅใกใณใใฎJavaScriptใใกใคใซใฏใฉใใซ็ฝฎใใฐใใใงใใ?), ๆใ ใฏใใใๅคใใฎๆ ๅ ฑใใใใง่ฆใคใใพใใ https://velog.io/@woodstock1993/html-๋ฌธ์-๋ด-์๋ฐ์คํฌ๋ฆฝํธ-ํ์ผ์-์ด๋์-๋๋ฉด-์ข์๊นใใญในใใฏ่ช็ฑใซๅ ฑๆใพใใฏใณใใผใงใใพใใใใ ใใใใฎใใญใฅใกใณใใฎURLใฏๅ่URLใจใใฆๆฎใใฆใใใฆใใ ใใใ
Collection and Share based on the CC Protocol