Toggle์์ฝ ๋ชจ์์ ํ ๊ธ ๋ฒํผ ์์ฑโToggle = Buttonโ ์ด๋ผ๊ณ ์๊ฐํ์ฌ ๋ฒํผ ํ๊ทธ๋ก ๋ง๋ค์ด ์ํ์ ๋ฐ๋ผ css์ ๋ณํ๋ฅผ ์ฃผ๋ ค๊ณ ํ๋คํ์ง๋ง ๋ฒํผ๋ณด๋ค๋ ๋๊ฐ์ง ์ํ๋ฅผ ๋ค๋ฃจ๋ checkbox๋ฅผ ์ด์ฉํ๋ ๊ฒ์ด ๊ด๋ฆฌํ๊ธฐ ๋ ์ฉ์ดํ๋ค ์๊ฐํ์ฌ check๋ฐ์ค๋ฅผ ์ด์ฉํด
DOM์ Document Object Model์ ์ฝ์๋ก HTML, XML ๋ฌธ์์ ํ๋ก๊ทธ๋๋ฐ interface์ด๋คDOM์ ๋ฌธ์์ ๊ตฌ์กฐํ๋ ํํ์ ์ ๊ณตํ๋ฉฐ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ DOM ๊ตฌ์กฐ์ ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ๋ฌธ์ ๊ตฌ์กฐ, ์คํ์ผ, ๋ด์ฉ ๋ฑ์ ๋ณ๊ฒฝํ ์ ์๊ฒ ๋
๋ชจ๋: ํน์ ๊ธฐ๋ฅ์ ๊ฐ๋ ์์ ์ฝ๋ ๋จ์๊ฐ๋ ์ฑ, ์ ์ง๋ณด์๋ฅผ ์ํด ์ฌ๋ฌ ๊ฐ์ ํ์ผ๋ก ๋ถ๋ฆฌ -> ๋คํธ์ํฌ ๋ณ๋ชฉํ์ ๋ฐ์์๋ต์๊ฐ์ ์ค์ด๊ธฐ ์ํด ํ์ผ ์๋ฅผ ์ค์ด๋ฉด ๊ฐ๋ ์ฑ, ์ ์ง๋ณด์์ ์ด๋ ค์ ๋ฐ์๋ฒ๋ค๋ง์ด๋ ๋ชจ๋(๋ถ๋ฆฌ๋ ํ์ผ)๋ค์ ์์กด์ฑ ๊ด๊ณ๋ฅผ ํ์ ํ์ฌ ๊ทธ๋ฃนํ์์ผ์ฃผ๋ ์์ ์ด๋ค.์
์นํ์ด๋ ๊ฐ์ฅ ๋์ค์ ์ธ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค.๋ชจ๋ ๋ฒ๋ค๋ฌ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ๋ ์์(HTML,CSS,JS,Image,Font ๋ฑ) ์ฆ, ๋ชจ๋๋ค์ ์กฐํฉํด์ ๋ณํฉ๋ ํ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋๋ ๋๊ตฌ๋ธ๋ผ์ฐ์ ์์ JS๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ์๋ ๋๊ฐ์ง ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.1\. ๊ฐ ๊ธฐ๋ฅ์
<canvas> ํ๊ทธ์ JS๋ฅผ ํตํด ๋ํ, ๋ฐ์ดํฐ ์๊ฐํ, ์ ๋๋ฉ์ด์ , ์น ๊ฒ์ ๋ฑ ๋ค์ํ ์ฝํ ์ธ ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ต๊ทผ์ ๋ง์ ํซํ ๊ฒ์ Vampire Survivors ๋ํ HTML, CSS, JS๋ฅผ ํตํด ๋ง๋ค์์ต๋๋ค.PixiJS์ ๊ฐ์ 2D ๊ฒ์ ์์ง์
localStrage๋ ์น ์คํ ๋ฆฌ์ง ๊ฐ์ฒด๋ก ๋ธ๋ผ์ฐ์ ๋ด ํค-๊ฐ ์์ผ๋ก ์ ์ฅํ๋๋ก ๋์์ค๋๋ค.LocalStorage๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์นจํ๊ฑฐ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ป๋ค ์ผ๋ ๋ฐ์ดํฐ๊ฐ ์ฌ๋ผ์ง์ง ์๊ณ ๋จ์์์ต๋๋ค.setItem(key, value)getItem(key)rem
๋ฐ์ดํฐ์ ์์ด๋ ๊ฐ์ ํตํด ์ฌ์ฉ์์ ์์ด๋์ ๋ฑ๋กํ ์ฌ์ง๋ค์ ์ฌ๋ผ์ด๋ ํ์์ผ๋ก ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ ๊ตฌํํ์ต๋๋ค.์ฌ๋ผ์ด๋๋ฅผ mouseEvent๋ฅผ ์ด์ฉํ์ฌ ๊ตฌํํ๋ คํ์ต๋๋ค.์ฌ๋ผ์ด๋๊ฐ ์ข์ฐ๋ก ์์ง์ด๊ธฐ ๋๋ฌธ์ ๋ง์ฐ์ค์ X์ขํ๋ฅผ ์ด์ฉํด์ ๋ง์ฐ์ค๊ฐ ๋๋ ๊ทธ ๋ ๋งํผ ์ด๋ฏธ์ง๋ ๋๋ ๊ทธ๋ฅผ
ModalToggleTagAutocompleteLoadingInfinite Scroll์ด๋ ๊ฒ ์ฐ๋ฆฌ๊ฐ ์์ฃผ ์ฌ์ฉํ๋ ๊ธฐ๋ฅ๋ค์ด Custom Component๋ฅผ ํตํด ์์ ์ ์ ๋ง์ ๋ง๊ฒ ํ์ฉํ ์ ์์ต๋๋ค.Custom Component๊ณผ ๊ด๋ จ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ๋ง์ง๋ง ๋ผ์ด๋ธ๋ฌ
ModalToggleTagAutocompleteLoadingInfinite Scroll์ด๋ ๊ฒ ์ฐ๋ฆฌ๊ฐ ์์ฃผ ์ฌ์ฉํ๋ ๊ธฐ๋ฅ๋ค์ด Custom Component๋ฅผ ํตํด ์์ ์ ์ ๋ง์ ๋ง๊ฒ ํ์ฉํ ์ ์์ต๋๋ค.Custom Component๊ณผ ๊ด๋ จ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ๋ง์ง๋ง ๋ผ์ด๋ธ๋ฌ
HTTP ๊ด๋ จ ๋ฉด์ ์ค๋น์ค ํ์์ ์์ฃผ ์ฝ์ ์ฐฝ์์ ๋ณด๋ HTTP ์ํ ์ฝ๋์ ๋ํด์ ๊ณต๋ถํด๋ณด์.HTTP ์ํ ์ฝ๋๋ 100~500๊น์ง 5๊ฐ์ ๊ทธ๋ฃน์ผ๋ก HTTP ์์ฒญ ์ํ๋ฅผ ๋ณด์ฌ์ค๋๋ค.ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ๋ณด๋ธ ์์ฒญ์ ๋ฌธ์ ๊ฐ ์์ผ๋ ๋ค์ ์์ฒญ์ ์ด์ด์ ๋ณด๋ด๋ ๋ฉ๋๋ค.์์ฒญ
Calendar Mui date picker react date picker dayjs
๋ด๋ถ ์๋น์ค์ ๊ฐ์ ํด์ ๋ด๋ถ ์๋น์ค์์ ์ ๋ณด ์ธ์ฆ์ด ํ์ ์์ด ์ธ๋ถ ์๋น์ค์์๋ ์ธ์ฆ์ ๊ฐ๋ฅํ๊ฒ ํ๊ณ ๊ทธ ์๋น์ค์ API๋ฅผ ์ด์ฉํ๊ฒ ํด์ฃผ๋ ๊ฒ์ ๋๋ค oauth๋ฅผ ํตํด ๋ณ๋์ ํ์๊ฐ์ ์์ด ๋ก๊ทธ์ธ์ ์ ๊ณตํ๋ ์นด์นด์ค, ํ์ด์ค๋ถ ๋ฑ ํ๋ซํผ์ ์์ด๋๋ง ์์ผ๋ฉด ์๋น์ค๋ฅผ ์ด์ฉ ํ
CORS Error cors error๋ ๊ฐ๋ฐํ๋ฉด์ ํ๋ฒ์ ๋ง์ฃผ์น ์ค๋ฅ์ด๋ค. ๋๋ถ๋ถ API ์์ฒญ์ ํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ฌ ๋, ๋ง์ฃผํ๋ค. ๋ ๋ํ API๋ฅผ ์ด์ฉํด ์ฌ์ดํธ๋ฅผ ๋ง๋๋ คํ์ ๋, CORS error์ ๋ง์ฃผํ๊ธฐ๋ ํ๋ค. SOP - Same-Origin Polic
์ ๋๋ฉ์ด์ CSS ์ ๋๋ฉ์ด์ ์ ํตํด ์ฌ์ฉ์์๊ฒ ๊ฐํ ์ธ์์ ์ค ์ ์์ผ๋ฉฐ ๋๋ก๋ ์์ฐ์ค๋ฌ์ด ์ ๋๋ฉ์ด์ ์ ํตํด ์ด์ง์ ์ธ ๋๋์ ์์จ ์ ์์ต๋๋ค. @keyframes ์ ๋๋ฉ์ด์ ์์ฑ