๐ช Programming
[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 ํธ๋ฆฌ : ์ ์ง (์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ ๊ฐ๋ฅ)..
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ์์ ์
๋ ฅ์ฐฝ ์๋ํ๋ ๋ฐฉ์ง
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ์์ ์ ๋ ฅ์ฐฝ ์๋ํ๋ ๋ฐฉ์ง
2024.04.25, , ํ๊ทธ๋ฅผ ๋ชจ๋ฐ์ผ์์ ํฐ์นํ๋ฉด(ํฌ์ปค์คํ๋ฉด) ํ๋ฉด์ด ์๋์ผ๋ก ํ๋๋ ๋๊ฐ ์๋ค. ์
๋ ฅ์ฐฝ์ ํฐํธ ํฌ๊ธฐ๊ฐ 16px๋ณด๋ค ์์ผ๋ฉด ์๋์ผ๋ก ํ๋๋๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ๋ ํ์. ๋ํ์ ์ผ๋ก ์๋ 3๊ฐ์ง ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์๋ค. ํ๋ ๊ธ์ง — ๋ชจ๋ฐ์ผ์ฉ์ผ๋ก ์ ์ ํ๊ฒ ๋์์ธ๋ ๊ฒฝ์ฐํฐํธ ํฌ๊ธฐ๋ฅผ 16px ์ด์์ผ๋ก ๋ณ๊ฒฝ — ์ถ์ฒํฐํธ ํฌ๊ธฐ๋ฅผ 16px๋ก ๋ณ๊ฒฝํ๊ณ `transform: scale()`์ ์ด์ฉํด ์ํ๋ ๋งํผ ์ค์ด๋ ๋ฐฉ๋ฒ — ๋ณต์กํจ ๋ฐฉ๋ฒ1 — ํ๋ ๊ธ์งhtml ํ์ผ ๋ฉํ ํ๊ทธ์ content ์์ฑ์ ์ต๋ ํ๋ ๋ฐฐ์จ์ 1๋ฐฐ์๋ง ํ์ฉํ๊ณ , ๋จ๋ง๊ธฐ ํ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ๋ชปํ๋๋ก ๋ช
์ํ๋ฉด ๋ฐฉ๋ฒ. ์์ ๊ธ์จ๋ฅผ ์ ๋ณด์ง ๋ชปํ๋ ์ฌ๋๋ค์ ํ๋ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ ๊ทผ์ฑ์ด ๋จ์ด์ง๋ ๋จ์ ์ด ์๋ค. initial-scale ์ด๊ธฐ ํ๋ฉด ๋ฐฐ์จmax..
[HTML/CSS] ์ค๋ฐ๊ฟ(๊ฐํ๋ฌธ์) ํ์ / ๋์น๋ ํ
์คํธ ์๋ต ๊ธฐํธ ํ์ ๋ฐฉ๋ฒ
[HTML/CSS] ์ค๋ฐ๊ฟ(๊ฐํ๋ฌธ์) ํ์ / ๋์น๋ ํ ์คํธ ์๋ต ๊ธฐํธ ํ์ ๋ฐฉ๋ฒ
2024.04.25๐ก ๋ฏธ๋ฆฝ์ ํ : textarea ํ๊ทธ์ readonly ์์ฑ์ ์ถ๊ฐํ๋ฉด ์ฝ๊ธฐ๋ง ๊ฐ๋ฅํ๊ณ ์ฐ๊ธฐ๋ ๋ถ๊ฐ๋ฅํ๋ค. ๋ก๊ทธ์ธํ์ง ์์ ์ ์ ๋ ๋๊ธ์ ์ฐ์ง ๋ชปํ๊ฒํ ๋ ์ ์ฉํ๋ค. `` ์ค๋ฐ๊ฟ ์ ์ฉํ๊ธฐ textarea ํ๊ทธ์ ์ํฐํค(๊ฐํ๋ฌธ์)๋ฅผ ๋๋ฌ ์ค๋ฐ๊ฟ์ ์ ์ฉํด๋, ์
๋ ฅํ value๋ฅผ p ํ๊ทธ ๋ฑ์ ์ถ๋ ฅํด๋ณด๋ฉด ์ค๋ฐ๊ฟ์ด ํ๋๋ ์ ์ฉ๋์ง ์๋๋ค. ๊ฐ์ฅ ๊ฐ๋จํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ํ
์คํธ๋ฅผ ํ์ํ ํ๊ทธ์ ์คํ์ผ์ white-space ์์ฑ์ ์ถ๊ฐํ๋ ๊ฒ. white-space๋ ๊ณต๋ฐฑ ๋ฌธ์๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง ๊ฒฐ์ ํ๋ ์์ฑ์ด๋ค. white-space: normal — ๊ธฐ๋ณธ๊ฐ ์ฌ๋ฌ ๊ณต๋ฐฑ : X (1๊ฐ๋ก ํ์)ๆน่ก๋ฌธ์ \n ํํ : XWrap : O white-space: nowrap — normal๊ณผ ๋์ผํ๋ wrap์ด ์๋จ ์ฌ๋ฌ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๊ฒฝ๊ณผ ์๊ฐ ํ์ / UTC / ISO 8601
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๊ฒฝ๊ณผ ์๊ฐ ํ์ / UTC / ISO 8601
2024.04.25Date ๊ฐ์ฒด ํบ์๋ณด๊ธฐ์ ๋์ค ํ์์คํฌํ์๋ฐ์คํฌ๋ฆฝํธ์์ Date ๊ฐ์ฒด๋ ์ ๋์ค ํ์์คํฌํ๋ฅผ ์ฌ์ฉํ๋ค. SNS์ ๋ณด๋ฉด “1๋ถ ์ ๊ฒ์", “๋ฐฉ๊ธ ์ ๊ฒ์" ๊ฐ์ ๊ฒฝ๊ณผ์ผ๋ก ํฌ์คํ
๋ ์ง๋ฅผ ํ์ํ๋ ๊ฒ์ ์์ฃผ๋ณผ ์ ์๋ค. ๊ฒฝ๊ณผ์ผ์ Date ๊ฐ์ฒด์ getTime() ๋ฉ์๋๋ฅผ ์ด์ฉํด ๋ณํํ ๋ฐ๋ฆฌ์ด์ ํ์ฌ ์๊ฐ์ ๋ฐ๋ฆฌ์ด ์ฐจ์ด๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํ ์ ์๋ค. getTime() ๋ฉ์๋๋ 1970๋
1์ 1์ผ 0์ 0 ๋ถ 0์ด(UTC)๋ถํฐ ํ์ฌ๊น์ง์ ์๊ฐ์ ๋ฐ๋ฆฌ์ด ๋จ์๋ก ํ์ฐํ ๊ฐ์ ๋ฐํํ๋ค. ์ด๋ฅผ ์ ๋์ค ์๊ฐ(์ ๋์ค ํ์์คํฌํ)์ผ๋ก ๋ถ๋ฅธ๋ค. 1000๋ฐ๋ฆฌ์ด(millisecond)๋ 1์ด(second)๋ค.const date = new Date();console.log(date); // Tue Jun 15 2021 15:..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ค ์ซ์, ๋ฐ์ดํฐ ์์ฑ ์์
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ค ์ซ์, ๋ฐ์ดํฐ ์์ฑ ์์
2024.04.25๋๋ค ๊ฒ์๊ธ(ํน์ ๋๊ธ)์ ๊ตฌํํ๋ค๊ณ ๊ฐ์ , ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ๋ฌ๊ฐ์ ์ ์ ์ด๋ฆ, ๋ฉ์์ง ํ
์คํธ๊ฐ ํ์ํ๋ค. ์ ์ ์ด๋ฆ์ด๋ ๋๋ค ํ
์คํธ๋ ์๋ฌธ Lorem์ฒ๋ผ ์๋ ์์ฑํด์ฃผ๋ ์ฌ์ดํธ๋ฅผ ํ์ฉํ๋ฉด ๋๋ค. 10๊ฐ ์ ๋ ๋๋ฏธ ๋ฐ์ดํฐ๋ฅผ ์์ฑํ ํ ์๋ฐ์คํฌ๋ฆฝํธ์ Math.random์ ํ์ฉํ๋ฉด ์ ์ ๋ณ๋ก ๋ค๋ฅธ ๋ฉ์์ง ํ
์คํธ๋ฅผ ์์ฑํ ์ ์๋ค. ํ์ํ ๋ฐ์ดํฐ ๋ฆฌ์คํธ์ ์ ์ด๋ฆ : ํ๊ธ ๋๋ค ์ด๋ฆ ์์ฑ๊ธฐ ์ด์ฉconst randomUser = ['์์ธํฌ', 'ํ์ ์', '์ ๊ฐ์งํ', '์ฌ์ฑํ', ...]๋ฉ์์ง ํ
์คํธ : ํ๊ธ Lorem ์ฌ์ดํธ์ธ ๊ฐ์ธ๋ค ํน์ ํ๊ธ์
์จ ์ด์ฉconst randomMessage = ['๊ด์ผ์์ ๋ฌด์์ ๋ณด๋ด๋...', '...', '...', ...]์์ฑ์ผ : new Date() ์ด์ฉ ๋๋ค ์ซ์ ์์ฑ ํจ์..
[JS] ์บ๋ฒ์ค Canvas ๋ํ ํ๋ ์ถ์ ํ ์์ ์กฐ์ ํ๊ธฐ
[JS] ์บ๋ฒ์ค Canvas ๋ํ ํ๋ ์ถ์ ํ ์์ ์กฐ์ ํ๊ธฐ
2024.04.24๋ํ ์ฌ์ด์ฆ ์กฐ์ ๋ฉ์๋ctx.scale(x, y) : ๋ํ ํฌ๊ธฐ ํ๋/์ถ์. ์บ๋ฒ์ค์์ 1 ๋จ์๋ 1ํฝ์
. scale(2, 2)๋ ํ๋์ ๋จ์๋ฅผ 2ํฝ์
๋ก ํ๋(์ขํ ์ฌ์ด์ ๊ฐ๊ฒฉ ์ฆ๊ฐ) ctx.translate(x, y) : ์บ๋ฒ์ค์ ์์ ์ด๋. ๊ธฐ๋ณธ๊ฐ์ ์ผ์ชฝ ์ข์๋จ (0, 0) ctx.rotate(angle) : ๋ํ์ ๋ผ๋์(angle) ๋จ์ ๋งํผ ์๊ณ ๋ฐฉํฅ์ผ๋ก ํ์ . ํญ์ ์บ๋ฒ์ค ์์ ์ด ํ์ ์ ์ค์ฌ ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() ์ผ๊ด ์ ์ฉํ๋ ๋ฉ์๋์ด์ ๋ณํ ๊ฒฐ๊ณผ ๊ฐ์ ์ด์ด์ ์ํ์ด๊ธฐ ์ํ์์ transform(1.2, 0, 0, 1.2, -30, -30)..
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
[React] Canvas API ๊ธฐ๋ณธ ๋ด์ฉ ์ ๋ฆฌ / ๋ฆฌ์กํธ์์ ์ฌ์ฉ๋ฒ
2024.04.24์บ๋ฒ์ค ๊ธฐ๋ณธ ์ธํ
for React๐ก ์บ๋ฒ์ค๋ HTML ์์ ์ค ํ๋๋ก ์คํฌ๋ฆฝํธ ์ธ์ด๋ก ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ๋๋ฐ ์ฌ์ฉํ๋ค. canvas๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ ์บ๋ฒ์ค context์ DOM์ผ๋ก ์ ๊ทผํด์ผ ํ๋ค. React์์ useRef()๋ฅผ ์ฌ์ฉํด์ Ref ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ์ ๊ทผํ๊ณ ์ถ์ DOM์ ref ๊ฐ์ผ๋ก ์ค์ ํด์ฃผ๋ฉด ๋๋ค. ๊ทธ๋ผ Ref ๊ฐ์ฒด์ .current ๊ฐ์ ํด๋น DOM์ ๊ฐ๋ฆฌํจ๋ค. ์บ๋ฒ์ค ์๋ฆฌ๋จผํธ ์์ฑ ๋ฐ useRef ์ค์ import React, { useRef, useEffect, useState } from 'react';import styled from 'styled-components';const Canvas = () => { const canvasRef = useRef(null); // ์๋ต ..