๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Daily/Today I Learned

201223_TIL

by joooing 2020. 12. 24.
๋ฐ˜์‘ํ˜•

๐ŸŽ ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ


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

โœ”๏ธ Primitive, Reference Type๋Š” ์‚ฌ์‹ค ๋ชจ๋‘ ์ฐธ์กฐํ˜•
์›๋ž˜ '๊ธฐ๋ณธํ˜•์€ ๊ฐ’์„ ๋ณต์‚ฌ, ์ฐธ์กฐํ˜•์€ ์ฃผ์†Œ๊ฐ’์„ ๋ณต์‚ฌ'ํ•œ๋‹ค๊ณ  ๋ฐฐ์› ๋Š”๋ฐ, ์‚ฌ์‹ค ๋” ์—„๋ฐ€ํ•˜๊ฒŒ ๋”ฐ์ง€๊ณ  ๋ณด๋ฉด Javascript์—์„œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ ํƒ€์ž…์€ ์ฐธ์กฐํ˜•์ผ ์ˆ˜๋ฐ–์— ์—†์Œ์„ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค. ๊ธฐ๋ณธํ˜•์€ ์ฃผ์†Œ๊ฐ’์„ ํ•œ๋ฒˆ ์ฐธ์กฐํ•  ๋ฟ์ด๊ณ , ์ฐธ์กฐํ˜•์€ ๋‘๋ฒˆ ์ฐธ์กฐํ•œ๋‹ค๋Š” ์ฐจ์ด์ ์ด ์žˆ์„ ๋ฟ์ด๋‹ค. ์ด ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ๋„ ์žŠ๊ธฐ ์ „์— ๋”ฐ๋กœ ๋ธ”๋กœ๊น…์„ ํ•ด๋‘์–ด์•ผ๊ฒ ๋‹ค.

โœ”๏ธ DOM(Document Object Model) ๊ฐœ๋… & CRUD
HTML์„ ๊ฐ์ฒด์ฒ˜๋Ÿผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” '๋ชจ๋ธ'์ธ DOM์— ๋Œ€ํ•ด ๋ฐฐ์› ๋‹ค. HTML์˜ document ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์กฐ์ž‘ํ•˜๋Š”๋ฐ, document๋Š” ์ˆ˜๋งŽ์€ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ด ์ค‘ HTML element๋ฅผ ๋งŒ๋“ค๊ณ (CREATE), ์กฐํšŒํ•˜๊ณ (READ), ๊ฐฑ์‹ ํ•˜๊ณ (UPDATE), ์‚ญ์ œํ•˜๋Š”(DELETE) ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. DOM์—๋Š” CRUD์— ์ถ”๊ฐ€๋กœ, ์ ์šฉ(APPEND)ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋„ ์žˆ์–ด์„œ ์ด ๋‹ค์„ฏ๊ฐ€์ง€์˜ ๋ฉ”์„œ๋“œ๋ฅผ html ์˜ˆ์ œ ํŒŒ์ผ์— ์ ์šฉ์‹œ์ผœ๋ณด๋ฉฐ ์ž‘๋™ ๋ฐฉ์‹์„ ์ตํ˜”๋‹ค.

 

๐ŸŽ ๊ธฐ์–ตํ•  ๊ฒƒ


โœ”๏ธ ๋ณ€์ˆ˜ ์„ ์–ธ, ํ• ๋‹น (feat. ๋ฉ”๋ชจ๋ฆฌ)
์„ ์–ธ = ๋ฉ”๋ชจ๋ฆฌ์— ๋นˆ ๊ณต๊ฐ„ ํ™•๋ณด
ํ• ๋‹น = ๋ฉ”๋ชจ๋ฆฌ์—์„œ ์ฃผ์†Œ๋ช… ๊ฒ€์ƒ‰ํ•ด ๋ฐ์ดํ„ฐ ์ฃผ์†Œ ํ• ๋‹น

โœ”๏ธ Garbage Collector (GC)
ํŠน์ • ์‹œ์ (๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ)์ด๋‚˜ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์ด ํฌํ™”๋˜๊ธฐ ์ง์ „์— ์ž๋™์œผ๋กœ ๊ทธ๋Ÿฐ ๋Œ€์ƒ๋“ค์„ ์ˆ˜๊ฑฐํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ์ˆ˜๊ฑฐ๋œ ๋ฉ”๋ชจ๋ฆฌ๋Š” ๋นˆ ๊ณต๊ฐ„์ด ๋˜์–ด, ์ƒˆ๋กœ์šด ๊ฐ’์„ ๋‹ค์‹œ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค! '์ฐธ์กฐ ์นด์šดํŠธ'๋Š” ์ž๊ธฐ ์ฃผ์†Œ๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋ณ€์ˆ˜์˜ ๊ฐœ์ˆ˜์ธ๋ฐ, ์ด ์ฐธ์กฐ ์นด์šดํŠธ๊ฐ€ 0์ด ๋˜๋ฉด, ์ฆ‰ ๋ˆ„๊ตฌ๋„ ์ž๊ธฐ๋ฅผ ์ฐธ์กฐํ•˜์ง€ ์•Š์œผ๋ฉด ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ์˜ ์ˆ˜๊ฑฐ ๋Œ€์ƒ์ด ๋œ๋‹คใ… ใ… 

โœ”๏ธ console.dir
console.dir์€ console.log์™€ ๋‹ฌ๋ฆฌ ๊ฐ์ฒด์˜ ์†์„ฑ์„ '๊ณ„์ธต๊ตฌ์กฐ'๋กœ ์ถœ๋ ฅํ•ด์ค€๋‹ค. DOM์„ ๊ฐ์ฒด์˜ ๋ชจ์Šต์œผ๋กœ ๋ณด์—ฌ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ํƒœ๊ทธ๋งŒ ๋ณด์—ฌ์ฃผ๋Š” console.log๋ณด๋‹ค console.dir์ด DOM ๊ตฌ์กฐ๋ฅผ ์กฐํšŒํ•˜๋Š”๋ฐ ์œ ์šฉํ•˜๋‹ค!

โœ”๏ธ DOM(Document Object Model)
DOM์€ HTML(Document)์— ์ ‘๊ทผํ•ด, ๊ฐ์ฒด์ฒ˜๋Ÿผ HTML์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” '๋ชจ๋ธ'์ด๋‹ค. ์ฆ‰, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ฉด DOM์„ ํ™œ์šฉํ•ด HTML์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. DOM ์€ '์›น ํŽ˜์ด์ง€์˜ ๊ฐ์ฒด ์ง€ํ–ฅ ํ‘œํ˜„'์ด๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ™์€ ์–ธ์–ด๋ฅผ ์ด์šฉํ•ด DOM์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. DOM์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋Š” ์•„๋‹ˆ์ง€๋งŒ DOM ์ด ์—†๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋Š” ์›น ํŽ˜์ด์ง€ ๋˜๋Š” XML ํŽ˜์ด์ง€ ๋ฐ ์š”์†Œ๋“ค๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋ธ์ด๋‚˜ ๊ฐœ๋…๋“ค์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ–์ง€ ๋ชปํ•˜๊ฒŒ ๋œ๋‹ค.

โœ”๏ธ DOM ์กฐ์ž‘ํ•˜๊ธฐ
Create : createElement
Append : append, prepend, appendChild
Read : querySelector, querySelectorAll
Update : textContent, classList.add
Delete : remove, removeChild

 

๐ŸŽ ๋” ๊ณต๋ถ€ํ•  ๊ฒƒ


โœ”๏ธ node, element
โœ”๏ธ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๊ฐ€ ๋…ธ๋“œ๋ฆฌ์ŠคํŠธ์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์ด์œ 
โœ”๏ธ ์œ ์‚ฌ ๋ฐฐ์—ด์„ ๋ฐฐ์—ด๋กœ ๋ฐ”๊พธ๋Š” ๋ฐฉ๋ฒ•

 

 

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

 

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

๋ฐ˜์‘ํ˜•

'Daily > Today I Learned' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

201227_TIL  (0) 2020.12.28
201224_TIL  (0) 2020.12.25
201222_TIL  (0) 2020.12.23
201221_TIL  (0) 2020.12.22
201218_TIL  (2) 2020.12.19

๋Œ“๊ธ€