์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

์ฝ”๋”ฉ์ธํ„ฐ๋ทฐ๋ฅผ ์ €๊ฒฉํ•˜๋Š” JS ์Šค๋‚˜์ดํผ ์–‘์„ฑํ•™๊ต

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

Thumbnail

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด, ๊ฐœ๋ฐœ ยท ํ”„๋กœ๊ทธ๋ž˜๋ฐ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • JS ์ฝ”์–ด

  • JS DOM

  • JS ์ค‘๊ธ‰ ๊ฐœ๋…

 

[๊ฒ€์ƒ‰ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ ํ…์ŠคํŠธ์ž…๋‹ˆ๋‹ค.]

๋ฌด์‚ฌํžˆ ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋ฅผ ํ†ต๊ณผํ•˜๊ณ ,
๋‘๊ทผ๋‘๊ทผ ์‹ค๋ฌด์ง„ ๋ฉด์ ‘์„ ์•ž๋‘” ๋‹น์‹ !
์—ฌ๊ธฐ์„œ ๋–จ์–ด์งˆ ์ˆ˜๋Š” ์—†๋‹ค!
๋ฉด์ ‘๊ด€๋“ค์˜ ๋ฌด์ž๋น„ํ•œ ์งˆ๋ฌธ์„ ๋šซ๊ณ  ํ•ฉ๊ฒฉ์„ ์‚ฌ์ˆ˜ํ•ฉ์‹œ๋‹ค!

ํ‰์†Œ์— ์–ด๋ ดํ”—์ด ์•Œ๊ณ ๋Š” ์žˆ์ง€๋งŒ
๋ง‰์ƒ ์„ค๋ช…ํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์ž…์ด ์ž˜ ์•ˆ ๋–จ์–ด์ง€๋Š” ๊ฒฝํ—˜,
๋ˆ„๊ตฌ๋‚˜ ํ•ด๋ณด์…จ์„ ๊ฒ๋‹ˆ๋‹ค!

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ธํ„ฐ๋ทฐ๋ฅผ ์•ž๋‘” ๋ชจ๋“  ๋ถ„๋“ค์—๊ฒŒ
๋ณด์•ฝ์ฒ˜๋Ÿผ ์ฑ™๊ฒจ๋“œ๋ฆฌ๊ณ  ์‹ถ์€ ํ•ต์‹ฌ ๊ฐœ๋…!

๋ฉด์ ‘์ž์˜ ๋งˆ์Œ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ ๊ฐœ๋…๋“ค์„
์‰ฝ๊ณ  ๋ช…์พŒํ•˜๊ฒŒ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค.

โœ… ์ปค๋ฆฌํ˜๋Ÿผ

๊ฐ•์˜ ๊ตฌ์„ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. JS ๊ณ ์œ ์˜ ๊ฐœ๋… <ํƒ€์ž…> : ์›์‹œํƒ€์ž…๊ณผ ์ฐธ์กฐ ํƒ€์ž…, ์›์‹œ ๋ž˜ํผ ํƒ€์ž…
  2. ์ข€ ๋” this ํ•˜๊ธฐ (call, apply, bind)
  3. ์ €๊ฒฉ์ˆ˜์˜ ์†Œ์–‘, <scope>
  4. ๊ทธ๊ฒƒ์ด ์•Œ๊ณ ์‹ถ๋‹ค, <ํด๋กœ์ €>
  5. ๊ฐ์ฒด ๊ณต์žฅ์žฅ, <์ƒ์„ฑ์ž>
  6. ๋“œ๋Ÿฌ๋‚˜๋Š” ๋น„๋ฐ€, <ํ”„๋กœํ† ํƒ€์ž…>
  7. es5๋กœ ํด๋ž˜์Šค์ฒ˜๋Ÿผ ์ƒ์†ํ•˜๊ธฐ <์„œ๋ธŒ ํƒ€์ž… & ์Šˆํผ ํƒ€์ž…>
  8. ์–ด์„œ์™€ ํด๋ž˜์Šค, JS๋Š” ์ฒ˜์Œ์ด์ง€? <ํด๋ž˜์Šค>
  9.  ํ•จ์ˆ˜๋ฅผ ๋“ค์—ˆ๋‹ค ๋†จ๋‹ค, ๋‚ด ๋ฉ˜ํƒˆ๋„ ๋“ค์—ˆ๋‹ค ๋†จ๋‹ค. ์‹ฌ์ฟต๐Ÿ’– <ํ˜ธ์ด์ŠคํŒ…>
  10. JS์˜ ์„ธ๊ฐ€์ง€ ์ธํ”ผ๋‹ˆํ‹ฐ ์Šคํ†ค, <BOM, DOM, Node>
  11.  ๋ฌด๋Œ€์˜ ๋’ทํŽธ, ๋ธŒ๋ผ์šฐ์ €๋Š” ์–ด๋–ป๊ฒŒ ๋ Œ๋”๋ง ํ• ๊นŒ? <๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง>
  12. <repaint & reflow>
  13. ํ๋ฅด๋Š” ๊ฐ•๋ฌผ์„ ๊ฑฐ๊พธ๋กœ ๊ฑฐ์Šฌ๋Ÿฌ ์˜ค๋ฅด๋Š” ์ด๋ฒคํŠธ ํ๋ฆ„์ฒ˜๋Ÿผ <์ด๋ฒคํŠธ ํ๋ฆ„>
  14. ๋Œ€์‹  ๊ท€์—ฌ์šด ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. <์ด๋ฒคํŠธ ์œ„์ž„>
  15. ๊นจ์–ด์ง„ ๋”์˜ ์กฐ๊ฐ. <DocumentFragment>

โœ… ๊ฐ•์˜์˜ ํŠน์žฅ์ 

  1. ๋งค ๊ฐ•์˜๋งˆ๋‹ค ์ง์ ‘ ๋งŒ๋“  ํ”„๋ ˆ์  ํ…Œ์ด์…˜์„ ๋ฐ”ํƒ•์œผ๋กœ ๋†“์น˜๋Š” ๋‚ด์šฉ ์—†์ด ์ง€์‹์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
  2. ๊ฐ•์˜ ๋งˆ์ง€๋ง‰์—๋Š” ํ•ญ์ƒ ๊ฐ•์˜๋ณ„ ํ•ต์‹ฌ ํฌ์ธํŠธ๋ฅผ ๋ชจ์•„๋‘์–ด ํ•™์Šต ํšจ๊ณผ๋ฅผ ๊ทน๋Œ€ํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค.
  3. ๊ฐ•์˜์— ์“ฐ์ธ ํ”„๋ ˆ์  ํ…Œ์ด์…˜์€ PDF ํŒŒ์ผ๋กœ ๋ชจ์•„ ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜์‹œ๋Š” ๋ชจ๋“  ๋ถ„๊ป˜ ๋ฌด๋ฃŒ๋กœ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋”ฉ ์ธํ„ฐ๋ทฐ๋ฅผ ์•ž๋‘๊ณ  ๊ณ„์‹  ๋ถ„

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ข€ ๋” deepํ•˜๊ฒŒ ์•Œ๊ณ  ์‹ถ์€ ๋ถ„

  • ์ดํ•ด๋Š” ํ•˜์ง€๋งŒ ๋ง‰์ƒ ์„ค๋ช…ํ•˜๊ธฐ๋Š” ์–ด๋ ค์šด ๊ฐœ๋…์ด ์žˆ์œผ์…จ๋˜ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • Javascript ๊ธฐ์ดˆ

์•ˆ๋…•ํ•˜์„ธ์š”
The Oreum์ž…๋‹ˆ๋‹ค.

9,224

๋ช…

์ˆ˜๊ฐ•์ƒ

287

๊ฐœ

์ˆ˜๊ฐ•ํ‰

2

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

20

๊ฐœ

๊ฐ•์˜

๋” ์˜ค๋ฆ„์€ ์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์˜ ํ”„๋ฆฌ๋ฏธ์—„ ๋ธŒ๋žœ๋“œ๋กœ ์ฃผ๋กœ ์‹ค๋ฌด, ์ทจ์—…๊ณผ ์—ฐ๊ด€๋œ ๊ฐ•์˜๋ฅผ ์ œ์ž‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์—์„œ ์ด๋ก ์ ์ธ ์ง€์‹์„ ํš๋“ํ•˜์…จ๋‹ค๋ฉด, ๋” ์˜ค๋ฆ„์˜ ์‹ค์ „ ๊ฐ•์˜๋“ค์„ ํ†ตํ•ด ํฌํŠธํด๋ฆฌ์˜ค์™€ ์‹ค๋ฌด ๋Šฅ๋ ฅ๋“ค์„ ๋ชจ๋‘ ๊ฐ€์ ธ๊ฐ€์„ธ์š”! 

" 2%๋ฅผ ์ฑ„์šฐ๊ธฐ ์œ„ํ•œ ์—ฌ๋Ÿฌ๋ถ„์˜ ์ง‘๋…๊ณผ ์—ด์ •์„ ์‘์›ํ•ฉ๋‹ˆ๋‹ค! "

 

โ–ถ๏ธŽ ๋” ์˜ค๋ฆ„ ๋กœ๋“œ๋งต

The Oreum แ„…แ…ฉแ„ƒแ…ณแ„†แ…ขแ†ธ.png.webp

 

๋”๋ณด๊ธฐ

๊ณต๋™ ์ง€์‹๊ณต์œ ์ž

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

33๊ฐœ โˆ™ (6์‹œ๊ฐ„ 1๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!