๐ช Programming
[JS] ES Modules ๋ชจ๋ (Import / Export ์์คํ
)
[JS] ES Modules ๋ชจ๋ (Import / Export ์์คํ )
2024.04.26Intro1๊ฐ ํ์ผ์ ๋ชจ๋ ์ฝ๋๊ฐ ๋ค์ด๊ฐ ๊ฒ ๋ณด๋ค ์ฝ๋๋ค์ด ์๊ฐ ์ชผ๊ฐ์ ธ ์๋๊ฒ ๋ ์ข๋ค.๋ชจ๋์ ๋ณ์์ ํจ์๋ฅผ ๊ตฌ์ฑํ๋ ๋ ์ข์ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค.๋ชจ๋์ ์ ์์๋๋ฉด ์ฝ๋๋ฅผ ๊น๋ํ๊ฒ ์ ๋ฆฌํ ์ ์๋ค.๋ชจ๋ ๋๋ถ์ ์ฝ๋๋ค์ ์์ ํ์ผ๋ก ๋๋ ์ ์๊ณ , import / export ํ ์ ์๋ค.๋ชจ๋์ ํจ์์ ๋ณ์๋ฅผ ๋ชจ๋ ์ค์ฝํ์ ๋ฃ๊ณ , ๋ชจ๋ ์ค์ฝํ๋ฅผ ํตํด ๋ชจ๋ ํจ์ ์ฌ์ด์์ ๋ณ์๋ฅผ ๊ณต์ ํ ์ ์๋ค.๋ค์ด๋๋ฏน ๋ชจ๋์ ์ด์ฉํ๋ฉด ์ดํ๋ฆฌ์ผ์ด์
๋ก๋ฉ์ ๋ ๋น ๋ฅด๊ฒ ํ ์ ์๋ค. Named Exportimport { name } from "file"; ํ์ผ ํน์ ๋ชจ๋์ด ์ํ๋ ๋งํผ์ named exports๋ฅผ ๊ฐ์ง ์ ์๋คimport ํ๋ ค๋ ์ด๋ฆ์ export ํ๋ ํจ์(๋ณ์) ์ด๋ฆ๊ณผ ๊ฐ์์ผ ํ๋ค // math.jsexport..
[Git] SSH ๊ณต๊ฐํค ๋ง๋ค๊ธฐ / Credential ์ธ์ฆ ์์คํ
[Git] SSH ๊ณต๊ฐํค ๋ง๋ค๊ธฐ / Credential ์ธ์ฆ ์์คํ
2024.04.26Credential ์ ์ฅ์ / HTTPS ํ๋กํ ์ฝGit ๋ฆฌ๋ชจํธ ์ ์ฅ์์ ํต์ ํ ๋ ์ฌ์ฉํ๋ ํ๋กํ ์ฝ์ Git(๊ธฐ๋ณธ ํ๋กํ ์ฝ), SSH, HTTPS ๋ฐฉ์์ด ์๋ค. Git ๊ธฐ๋ณธ ํ๋กํ ์ฝ์ ์ธ์ฆ ๊ธฐ๋ฅ์ด ๋ฏธ์ฝํ์ฌ ๊ฑฐ์ ์ฌ์ฉํ์ง ์๊ณ , ์ฃผ๋ก SSH๋ HTTPS๋ฅผ ์ฌ์ฉํ๋ค. HTTPS ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋ฉด ๋งค๋ฒ ์ฌ์ฉ์ ์ด๋ฆ๊ณผ ์ํธ๋ฅผ ์
๋ ฅํด์ผํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๋๋ฐ Git์ ์ด๋ฅผ ์ํด ์ธ์ฆ ์ ๋ณด๋ฅผ ์ ์ฅํด๋๊ณ ์๋์ผ๋ก ์
๋ ฅํด์ฃผ๋ Credential ์์คํ
์ ์ ๊ณตํ๋ค. Credential ๊ธฐ๋ฅ์์ ์ ๊ณตํ๋ ์ต์
์ ์๋ 3๊ฐ์ง๊ฐ ์๋ค. cache ๋ชจ๋ : ์ธ์ฆ์ ๋ณด๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ์์ ์ ์ฅ(๊ธฐ๋ณธ 15๋ถ)store ๋ชจ๋ : ์ธ์ฆ ์ ๋ณด๋ฅผ ํ
์คํธ ํ์ผ๋ก Disk์ ์ ์ฅ. ์ฌ์ฉ์ ํ ๋๋ ํ ๋ฆฌ์ ์ผ๋ฐ ํ
์คํธ ํ์ผ๋ก ์ ์ฅ๋๋ฏ๋ก ์ธ์ฆ ์ ๋ณด ๋
ธ..
[HTML/CSS] focus-within — ์์ ์์๊ฐ ํฌ์ปค์ค ๋์ ๋ ๋ถ๋ชจ ์คํ์ผ ์ง์
[HTML/CSS] focus-within — ์์ ์์๊ฐ ํฌ์ปค์ค ๋์ ๋ ๋ถ๋ชจ ์คํ์ผ ์ง์
2024.04.25focus-within ์ดํด๋ณด๊ธฐ:focus-within์ ํฌ์ปค์ค๋ฅผ ๋ฐ์ ์์ ํน์ ํฌ์ปค์ค๋ฅผ ๋ฐ์ ์์(์ฃผ๋ก input ํ๊ทธ)๋ฅผ ํฌํจํ๋ ๋ถ๋ชจ ์์๋ฅผ ๊ฐ๋ฆฌํจ๋ค. input ๊ฐ์ ํ์ ์์๊ฐ focus ๋์ ๋ ๋ถ๋ชจ ์์์ ์คํ์ผ์ ๋ณ๊ฒฝํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๋ค. ์๋ ์์ ์์ input ํ๊ทธ๋ฅผ ์์์ผ๋ก ํฌํจํ๋ .wrapper ํด๋์ค ์ด๋ฆ์ ๋ถ๋ชจ ์์๊ฐ ์๋ค. Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Choose text color input ํ๊ทธ๋ฅผ ์ ํํด์ ํ์ฑํ๋๋ฉด(ํฌ์ปค์ค๋ฅผ ๋ฐ์ผ๋ฉด), ํด๋น input ํ๊ทธ๋ฅผ ํฌํจํ๋ ๋ถ๋ชจ ์์์ธ .wrapper ํด๋์ค์ focus-within ์์ฌํด๋..
[JS] ์ด๋ฒคํธ ์ ํ(์บก์ฒ๋ง, ๋ฒ๋ธ๋ง) / ์ด๋ฒคํธ ์์ / ๋ฐ์ดํฐ ์์ฑ
[JS] ์ด๋ฒคํธ ์ ํ(์บก์ฒ๋ง, ๋ฒ๋ธ๋ง) / ์ด๋ฒคํธ ์์ / ๋ฐ์ดํฐ ์์ฑ
2024.04.25์ค์ต์ฉ CodePen์ด๋ฒคํธ ๋ฒ๋ธ๋ง/์บก์ฒ๋ง, `stopPropagation()`, `preventDefault()`๊น์ง ๋ชจ๋ ์ค์ตํ ์ ์๋๋ก ์์ฑ See the Pen Learn Event Propagation ์ด๋ฒคํธ ์ ํ ์ค์ต by ColorFilter (@colorfilter) on CodePen." data-ke-type="html">HTML ์ฝ์
๋ฏธ๋ฆฌ๋ณด๊ธฐํ ์ ์๋ ์์ค ์ด๋ฒคํธ ์ ํ | Event Propagation๋ฒ๋ธ๋ง Bubbling / ์บก์ฒ๋ง Capturing์ ์ฝ๋ํ ์์ ์์ ํ๋จ์ ์๋ span ํ๊ทธ๋ฅผ ํด๋ฆญํ๋ฉด โ "span ์์ญ" → โ "p ์์ญ" → โ "div" ์์ญ ์์ผ๋ก ์ฝ์์ด ์ฐํ๋ค. span ์์ญ์ ํด๋ฆญํ ์๊ฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํด์ ์ต์์์ ์๋ ์์๊น์ง ..
[HTML/CSS] ์๋งจํฑ ํ๊ทธ Semantic Tag
[HTML/CSS] ์๋งจํฑ ํ๊ทธ Semantic Tag
2024.04.25Semantic(่ฏญไน)์ "์๋ฏธ๊ฐ ์๋"์ด๋ผ๋ ๋ป. ๋ฌผ์ ๋ง์๋ "์ปต", ๋ฌธ์ ์ฌ๋ "์์ก์ด"์ฒ๋ผ ์ผ์ ์ํ์์ ์ฝ๊ฒ ๋ณผ ์ ์๋ ์ฌ๋ฌผ๋ค์ด ๊ฐ๊ฐ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ฒ๋ผ HTML์ ์ฌ๋ฌ ํ๊ทธ๋ค๋ ๊ฐ๊ฐ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ์๋งจํฑ ํ๊ทธ์ ์ฅ์ SEO : ์ ๋ชฉ ``, ๋ถ์ ๋ชฉ `` ๊ฐ์ ์๋ฉํฑ ํ๊ทธ๋ฅผ ์ ์ ํ๊ฒ ์ฌ์ฉํ๋ฉด ๊ฒ์์์ง์ด ํด๋น ์ฌ์ดํธ๋ฅผ ๋ ์ ์ดํดํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ฒ์ ์ต์ ํ์ ์ ๋ฆฌํ๋ค. Accessbility(์น์ ๊ทผ์ฑ) : ์๋งจํฑ ํ๊ทธ๋ฅผ ์ ์ฌ์ฉํ๋ฉด ์คํฌ๋ฆฐ ๋ฆฌ๋(์นํ์ด์ง๋ฅผ ์์ฑ์ผ๋ก ์ฝ์ด์ฃผ๋)๋ ํค๋ณด๋๋ง ์ฌ์ฉํด์ ์น์ฌ์ดํธ๋ฅผ ์ด์ฉํ๋ ์ฌ๋๋ค๋ ํฐ ๋ฌธ์ ์์ด ์ฌ์ฉํ ์ ์๋ค. Maintainability : `` ํ๊ทธ๋ง ์ฌ์ฉํด์ ๊ฐ๋ฐํ ์น์ฌ์ดํธ๋ณด๋ค ํ ๋์ ์์๋ณด๊ธฐ ์ฌ์ด ์๋งจํฑ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ค๋..
[JS] ์๋ฉด ์ ์ฉํ ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ๋ฌธ๋ฒ
[JS] ์๋ฉด ์ ์ฉํ ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ๋ฌธ๋ฒ
2024.04.25Numeric Separators์ซ์๋ฅผ ์
๋ ฅํ ๋ ์ธ๋์ค์ฝ์ด _๋ฅผ ์ด์ฉํด ์ซ์๋ฅผ ๊ตฌ๋ถํด์ ๊ฐ๋
์ฑ์ ๋์ผ ์ ์๋ค. KRW ํํ์ฒ๋ผ ์๋ฆฌ์๊ฐ ๋ง์ ์ซ์๋ฅผ ์์ฑํ ๋ ์ ์ฉconst cost = 100_000_000;console.log(cost); // 100000000 _ ์ธ๋๋ฐ ํ๊ฐ๋ง ์ฌ์ฉ ๊ฐ๋ฅ ex) 100__000 โ์ซ์ ๋ง์ง๋ง์ ์ฌ์ฉ ๋ถ๊ฐ ex) 100_; โ๊ฐ์ฅ ์ ์ซ์๊ฐ 0์ผ๋ ์ฌ์ฉ ๋ถ๊ฐ ex) 0_1; โ replaceAllreplaceAll(substr, newSubstr)replaceAll(substr, replacerFunction) ๋ฌธ์์ด์์ ์ํ๋ ๋ถ๋ถ์ "๋ชจ๋" ์ง์ ํ ๋ฌธ์๋ก ๋ณ๊ฒฝํ ์ ์๋ค. ์ ๊ท์๋ ์ฌ์ฉ ๊ฐ๋ฅ.const sayHello = 'Hello, John';sayHello..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ต์
๋ ์ฒด์ด๋
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ต์ ๋ ์ฒด์ด๋
2024.04.25์ต์
๋ ์ฒด์ด๋ ๋ฑ์ฅ ๋ฐฐ๊ฒฝ๋น๊ต์ ์๋ก ์ถ๊ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ผ๋ก ํ๋กํผํฐ๊ฐ ์๋ ์ค์ฒฉ ๊ฐ์ฒด๋ฅผ ์๋ฌ์์ด ์ ๊ทผํ ๋ ์ฌ์ฉํ๋ค. ์ ์ ์ ๋ณด๋ฅผ ๋ด์๋๋ user ๊ฐ์ฒด์ ์๋ฌด๋ฐ ์ ๋ณด๊ฐ ์๋ ์ํ์์ address ์์ฑ์ ์ ๊ทผํ๋ ค๊ณ ํ๋ฉด ์๋์ฒ๋ผ ํ์
์๋ฌ๊ฐ ๋ฐ์ํ๋ค.const user = {};console.log(user.address.street);// TypeError: Cannot read property 'street' of undefined React๋ Vue์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ธ ๋ ์์ง ์คํ ์ด์ ์๋ ์ ๋ณด๋ฅผ ๋ค ๋ถ๋ฌ์ค์ง ์์ ์์ ์์ ๊ฐ์ฒด์ ์์ฑ์ ์ ๊ทผํ ๋๋ ๋น์ทํ ํ์
์๋ฌ๊ฐ ๋ฐ์ํ๋ค.// selectedMall์ ์คํ ์ด์์ ๋ถ๋ฌ์ฌ ์ ๋ณด// ์์ง ์คํ ์ด์์ selectedMall ์ ๋ณด๋ฅผ ์กฐํ..
[Git] ๋ณ๊ฒฝํ ์ํ ์์ ์ ์ฅ ํ ๋ธ๋์น ์ด๋ ๋ฐฉ๋ฒ — Git Stash
[Git] ๋ณ๊ฒฝํ ์ํ ์์ ์ ์ฅ ํ ๋ธ๋์น ์ด๋ ๋ฐฉ๋ฒ — Git Stash
2024.04.25ํน์ ๋ธ๋์น์์ ํ์ผ์ ์์ ํ๊ณ git checkout ๋ช
๋ น์ด๋ก ์ ์ ๋ค๋ฅธ ๋ธ๋์น๋ก ์ด๋ํ๋ ค๊ณ ํ๋ฉด ์๋ ๋ฉ์์ง๊ฐ ๋์จ๋ค.Please commit your changes or stash them before you switch branches. ๋ณ๊ฒฝํ ๋ด์ฉ์ commitํ๊ฑฐ๋ stash ํด์ผ๋ง ๋ค๋ฅธ ๋ธ๋์น๋ก ์ด๋ํ ์ ์๋ค๋ ๋ฉ์์ง๋ค. ์์ง ์๋ฃํ์ง ์์ ์์
์ commitํ๊ธฐ ๊ป๋๋ฌ์ธ ๋ stash ๋ช
๋ น์ด๋ฅผ ํ์ฉํ ์ ์๋ค. ๋ง๋ฌด๋ฆฌํ์ง ์์ ์์
์ stash ์คํ์ ์์ ์ ์ฅํ ํ ๋ค๋ฅธ ๋ธ๋์น๋ก ์ด๋ํ ์ ์๋ค. Stash ๋ช
๋ น์ดstashํ๋ ๋ธ๋์น๊ฐ ์๋์ด๋(๋ค๋ฅธ ๋ธ๋์น์์๋) stash์ ์ ์ฅํ ๋ด์ฉ์ ๋ณต์(์ ์ฉ)ํ ์ ์๋ค stash ์คํ์ ์ ์ฅ# ํ์ฌ ์ํ ์์ ์ ์ฅ โญ๏ธgit stash sta..
[JS] console.log ์ฝ์ ๋ก๊ทธ ๋ ์ ์ฌ์ฉํ๊ธฐ
[JS] console.log ์ฝ์ ๋ก๊ทธ ๋ ์ ์ฌ์ฉํ๊ธฐ
2024.04.25console.log๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ console API์ค ํ๋. console ๊ฐ์ฒด์๋ log ์ธ์๋ ๋ค์ํ ๋ฉ์๋๋ค์ด ์กด์ฌํ๋ค. log ๋ ๋ฒจ ์ข
๋ฅ์ ๋ง ํ์ํ ์ ๋ณด๊ฐ ์๋๋ฉด log์ info๋ ์ ํ ๋ฐฐํฌ ๋จ๊ณ์์ ์ถ๋ ฅ๋์ง ์๋๋ก ํ๋ค. ๋ฐฐํฌํ ๋ log๋ info๋ ์ถ๋ ฅํ์ง ์๋๋ก ํ๊ฑฐ๋ ๋คํธ์ํฌ ์์ฒญ์ด ๋ฐ์ํ์ง ์๋๋ก ํ๋ ๋ฑ์ ์ค์ ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ค์๋ ๋ ๋ฒจ์ ๋ง๋ console ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ค์ํ๋ค. console.logconst dog = { type: "๐ถ", name: "์ธ์ธ", owner: { name: "John" } };console.log("logging", dog); ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉํ๋ console ๋ฉ์๋๋ก ๊ฐ๋ฐ ๋์ค ํ์ํ ๋ฐ์ดํฐ๋ฅผ ์ถ๋ ฅํ๊ณ ์ถ์ ๋ ..
[React] ๋ฆฌ์กํธ์์ SVG ์ฌ์ฉ๋ฒ
[React] ๋ฆฌ์กํธ์์ SVG ์ฌ์ฉ๋ฒ
2024.04.25๐ก SVG๋ ์์, ํฌ๊ธฐ ๋ฑ์ ๋์ ์ผ๋ก ์กฐ์ ํ ์ ์๋ ์ฅ์ ์ด ์๋ค ๋ฐฉ๋ฒ 1 — src ์์ฑ์ svg ๊ฒฝ๋ก ์
๋ ฅ ; ๐ก ํ์ผ ๊ฒฝ๋ก ์ง์ ์ฐธ๊ณ ๋ด์ฉโถ JSX ์๋ฆฌ๋จผํธ ์์ฑ์ ๋ฃจํธ ๊ธฐ์ค์ `public` ํด๋๋ง์ฝ `` ํ๊ทธ์ `src` ์์ฑ(JSX ํ๊ทธ ์์ฑ)์ `src` ํด๋์ ์๋ ์ด๋ฏธ์ง ํ์ผ์ ์ง์ ํ๋ ค๋ฉด…ํ์ผ ์ต์๋จ์์ ๋ถ๋ฌ์จ ์ด๋ฏธ์ง ํ์ผ์ `src` ์์ฑ์ ํ ๋นํ๊ฑฐ๋,`src` ์์ฑ ์์์ `require()` ์ฌ์ฉ ex) ``โท CSS ํ์ผ ๋ฃจํธ ํด๋ ๊ธฐ์ค์ `src` ํด๋โธ ํ์ผ ์ต์๋จ `import` ๊ตฌ๋ฌธ์์ `src` ํด๋๋ง ์ฒ๋ฆฌ ๊ฐ๋ฅ(`public` ํด๋์ ์๋ ํ์ผ์ ๋ถ๊ฐ) ํ๊ทธ src ์์ฑ์ svg ํ์ผ ๊ฒฝ๋ก๋ฅผ ์ ์ด์ค๋ค. ๊ฒฝ๋ก๋ฅผ ์ ์ ๋ public ํด๋์ ์๋ ํ์ผ์ public..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ์ค๋ณต ์์ ์ ๊ฑฐ ๋ฐฉ๋ฒ ๋ชจ์
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ์ค๋ณต ์์ ์ ๊ฑฐ ๋ฐฉ๋ฒ ๋ชจ์
2024.04.25๋ฐฉ๋ฒ 1 — Set ์ด์ฉ โญ๏ธSet์ ์ด์ฉํด ์ค๋ณต ์์๋ฅผ ์ ๊ฑฐํ๋ ๋ฐฉ์์ ์ฑ๋ฅ์ด ๊ฐ์ฅ ์ข๋ค Set์ ์ ๋ํฌํ ๊ฐ๋ง ์ ์ฅํ ์ ์๊ธฐ ๋๋ฌธ์ new Set() ์ธ์์ ๋ค์ด์จ ๋ฐฐ์ด์ ์ค๋ณต ์์๋ ์๋์ผ๋ก ์ ๊ฑฐ๋๋ค. Array.from์ โ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด๋ โ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๋ฅผ ์๊ฒ ๋ณต์ฌํด ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ค. ์ ๊ฐ๋ฌธ๋ฒ์ ์ฌ์ฉํด๋ ๊ฒฐ๊ณผ๋ ๋์ผ.const arr = ["A", "B", "A", "D", "B", "F"];const deDuplicated = [...new Set(arr)];// const deDuplicated = Array.from(new Set(arr))console.log(deDuplicated); // [ 'A', 'B', 'D', 'F' ] Set, Map ๊ด๋ จ ๋ ์์ธํ ๋ด์ฉ์ Ma..
[HTML/CSS] CSS ํ์
์ ๋๋ฉ์ด์
๋ง๋ค๊ธฐ
[HTML/CSS] CSS ํ์ ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ
2024.04.25์์ ์จ๊น ๋ฐฉ์ ์ฐจ์ด์ ๋ ๋ ํธ๋ฆฌ๋ฆฌํ๋ก์ฐ๋ฆฌํ์ธํธ์ด๋ฒคํธ ํธ๋ค๋ฌDOM ํธ๋ฆฌ`display: none`์ ์ธ๋ฐ์๋ฐ์๋นํ์ฑ์ ์ง`visibility: hidden`์ ์ง๋ฐ์ ์ํจ๋ฐ์๋นํ์ฑ์ ์ง`opacity: 0`์ ์ง๋ฐ์ ์ํจ๋ฐ์ํ์ฑ์ ์งdisplay: none๋ ๋ ํธ๋ฆฌ : ์ ์ธ๋ฆฌํ๋ก์ฐ : ๋ฐ์ (๋ ๋ํธ๋ฆฌ ์ํ๊ฐ ๋ณ๊ฒฝ๋์ผ๋ฏ๋ก)๋ฆฌํ์ธํธ : ๋ฐ์ (๋ฆฌํ๋ก์ฐ ๋ฐ์์ ๋ฆฌํ์ธํธ๋ ํจ๊ป ๋ฐ์)์ด๋ฒคํธ ํธ๋ค๋ฌ : ๋นํ์ฑDOM ํธ๋ฆฌ : ์ ์ง (์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ ๊ฐ๋ฅ)visibility: hidden๋ ๋ ํธ๋ฆฌ : ์ ์ง (ํ๋ฉด์์ ์๋ณด์ด์ง๋ง ๊ณต๊ฐ์ ์ฐจ์งํจ)๋ฆฌํ๋ก์ฐ : ๋ฐ์ ์ํจ (๋ ์ด์์์ ์ํฅ์ ๋ฏธ์น์ง ์์ผ๋ฏ๋ก)๋ฆฌํ์ธํธ : ๋ฐ์ (์์๊ฐ ๋ณด์ด์ง ์๋๋ก ๋ณ๊ฒฝํ์ผ๋ฏ๋ก)์ด๋ฒคํธ ํธ๋ค๋ฌ : ๋นํ์ฑDOM ํธ๋ฆฌ : ์ ์ง (์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ ๊ฐ๋ฅ)..