๐ ์ค๋ ๋ฐฐ์ด ๊ฒ
โ๏ธ 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 |
๋๊ธ