๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋„์ ๋„์ /์ฑ…

[์ฑ…] ์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

by mingzoo 2024. 4. 24.
ํ•œ๋น›๋ฏธ๋””์–ด <๋‚˜๋Š” ๋ฆฌ๋ทฐ์–ด๋‹ค> ํ™œ๋™์„ ์œ„ํ•ด์„œ ์ฑ…์„ ์ œ๊ณต๋ฐ›์•„ ์ž‘์„ฑ๋œ ์„œํ‰์ž…๋‹ˆ๋‹ค.

์ฑ… ์ถ”์ฒœ ๋Œ€์ƒ์ž

  • ์›น ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์žˆ๋Š” ์‚ฌ๋žŒ
  • HTML, CSS๋ฅผ ํ•œ๋ฒˆ์ด๋ผ๋„ ๋‹ค๋ค„๋ณธ ์‚ฌ๋žŒ
  • Javascript ์ดˆ๋ณด์ž

์‚ฌ์‹ค ๋‚˜๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฆฌ์•กํŠธ๋ฅผ ํ•˜๋ฉด์„œ ๋ณ‘๋ ฌ์ ์œผ๋กœ ํ„ฐ๋“ํ–ˆ๋˜ ์‚ฌ๋žŒ์ธ์ง€๋ผ, ์ˆœ์ˆ˜ ๋ฐ”๋‹๋ผJS ๊ตฌํ˜„์— ์•ฝํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๊ทธ๋ž˜์„œ ์ด๋ฒˆ '์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ' ์ฑ…์„ ๋ณด๋ฉด์„œ ๋‚ด๊ฐ€ ๋†“์น˜๊ณ  ์žˆ๋˜ ๋ถ€๋ถ„๋“ค์— ๋Œ€ํ•ด์„œ ๋‹ค์‹œ๊ธˆ ์ƒ๊ธฐ์‹œํ‚ฌ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์š”๊ตฌ๋œ ์‚ฌํ•ญ์„ ๋‹ค ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ์ด ์ฑ…์„ ์Šคํ‚ตํ•ด๋„ ๋  ๊ฒƒ ๊ฐ™์ง€๋งŒ, ๊ทธ๋ ‡์ง€ ์•Š์€ ์‚ฌ๋žŒ๋“ค์—๊ฒ ๋ชจ๋‘ ์ถ”์ฒœํ•œ๋‹ค.

 

๋Š๋‚€์ 

์š”์ฆ˜ ์ด๋ก ์ฑ…๋“ค์„ ๋ณด๊ฒŒ ๋˜๋ฉด ๊ธ€ ์œ„์ฃผ์˜ ์ฑ…๋“ค์ด ๋งŽ์€๋ฐ, ์›Œ๋‚™ ์ปดํ“จํ„ฐ ์ง€์‹์€ ์ „๋‹ฌํ•ด์•ผํ•  ๊ฒƒ๋„ ๋งŽ๊ณ  ๊นŠ์ด๋„ ์žˆ์–ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋Ÿด ์ˆ˜ ๋ฐ–์— ์—†๋‹ค๋Š” ๊ฒƒ์„ ์•ˆ๋‹ค. ํ•˜์ง€๋งŒ, ์ฑ…์ด ๋˜ ๋„ˆ๋ฌด ์–ด๋ ต๊ณ  ์ ‘๊ทผ์„ฑ์ด ์•ˆ์ข‹์œผ๋ฉด ์ง€๋ ˆ ๊ฒ๋ถ€ํ„ฐ ๋จน๊ฒŒ ๋˜๊ณ  ์žฌ๋ฏธ์žˆ๋Š” ๊ฒƒ๋„ ์žฌ๋ฏธ์—†๊ฒŒ ๋Š๊ปด์ง€๋Š” ๋ถ€์ž‘์šฉ์ด ์ƒ๊ธธ ์ˆ˜ ๋ฐ–์— ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๊ทธ ๋ฐฉ๋ฉด์—์„œ '์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ'๋Š” ์ผ๋‹จ ์ปฌ๋Ÿฌ๋‹ค. ์†จ์•…- ํ›‘์–ด๋ณด๋ฉด ์‚ฌ์ง„๋“ค๋„ ๋งŽ๊ณ , ๊ฐ•์กฐํ•˜๊ณ  ์‹ถ์€ ๋‚ด์šฉ๋“ค์—๋Š” ํ•˜์ด๋ผ์ดํŒ…๋„ ๋˜์–ด์žˆ๋‹ค. ๋‹จ์ˆœํžˆ ์ปฌ๋Ÿฌ๋ผ์„œ ์ข‹๋‹ค,๊ฐ€ ์•„๋‹ˆ๋ผ ์ฝ๋‹ค๋ฉด์„œ ์ง‘์ค‘๋ ฅ์ด ํ๋ฆฟํ•ด์ ธ๋„ ํ˜ธํก์„ ์งง๊ฒŒ ๊ฐ€์ ธ๊ฐ€๊ณ  ์ค‘์š”ํ•œ ์ •๋ณด๋“ค์€ ์‹œ๊ฐ์ ์œผ๋กœ ๊ฐ•์กฐ๋ฅผ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— easy-reading์ด ๋œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

๋˜ํ•œ, ์ฑ…์˜ ํ๋ฆ„์ด ๊ต‰์žฅํžˆ ์ข‹์•˜๋‹ค. ๋‚ด๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ํ•ด๋‹น ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ ๋‹ค๊ณ  ํ–ˆ์„ ๋•Œ ๊ฒช์„ ์‹ค์ˆ˜๋“ค์˜ ํ๋ฆ„์ด ๊ฑฐ์˜ ๋™์ผํ•˜๊ฒŒ ํ˜๋Ÿฌ๊ฐ”๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ ์ด๋Ÿฌํ•œ ์ ‘๊ทผ์ด ์™œ ๊ฒฐ๊ณผ๋ก ์ ์œผ๋กœ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š๋Š”์ง€์— ๋Œ€ํ•ด์„œ ์„œ์ˆ ๋˜์–ด์žˆ๊ณ , ๊ทธ ๊ณผ์ •์—์„œ ๊ฐœ๋…์ง€์‹๋“ค์„ ์Šต๋“ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค.

์‚ฌ์‹ค DOM, defer ์„ ์–ธ ๋“ฑ ์•Œ๊ณ  ์žˆ์—ˆ๋˜ ๊ฐœ๋…๋“ค์„ ๋‹ค์‹œ ์งš์–ด ๊ฐ€๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ์ˆํ…€ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๋กฑํ…€ ๋ฉ”๋ชจ๋ฆฌ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ์—ญํ• ์„ ํ•ด์คฌ๋‹ค. ์ด ์ฑ…์€ ์กฐ๊ธˆ ๋‚ฎ์€ ๋‚œ์ด๋„๋ฅผ ๋‹ค๋ฃจ๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด๊ฐ€ ์žŠ๊ณ  ์žˆ์—ˆ๋˜, ์ค‘์š”ํ•˜์ง€๋งŒ ์ž ์‹œ ๋‹ค๋ฅธ ์ง€์‹๋“ค์— ๊ฐ์ถฐ์ ธ์žˆ๋˜ ๋ฐฉ์‹ฌํ•˜๊ณ  ์žˆ์—ˆ๋˜ ์งˆ๋ฌธ๋“ค์— ๋Œ€ํ•ด์„œ ๋‹ตํ•ด์ฃผ๊ณ  ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค.

 

 

 

์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์ผ๋ณธ ๋ˆ„์  40๋งŒ ๋ถ€ ๋ŒํŒŒ ์ธ๊ธฐ ์‹œ๋ฆฌ์ฆˆ! ์ด๋ ‡๊ฒŒ ์ž์„ธํ•˜๊ณ  ์žฌ๋ฏธ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ž…๋ฌธ์„œ๋Š” ์—†๋‹ค!

www.hanbit.co.kr

 

728x90