๐Ÿ˜ฑ htmlใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใฎJavaScriptใƒ•ใ‚กใ‚คใƒซใฏใฉใ“ใซ็ฝฎใ‘ใฐใ„ใ„ใงใ™ใ‹?


์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” 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