๐ช Programming
[TS] ํ์
์คํฌ๋ฆฝํธ - ํ์
ํธํ
[TS] ํ์ ์คํฌ๋ฆฝํธ - ํ์ ํธํ
2024.05.04ํ์
ํธํ Type Compatibility๐ก ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด ๋ฆฌํฐ๋ด์ด๋ ์ต๋ช
ํจ์ ๋ฑ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ช
์์ ์ผ๋ก ํ์
์ ์ง์ ํ๋ ๊ฒ๋ณด๋ค ์ฝ๋์ ๊ตฌ์กฐ ๊ด์ ์์ ํ์
์ ์ง์ ํ๋๊ฒ ๋ ์ ์ด์ธ๋ฆด ์๋ ์๋ค. ํ์
์คํฌ๋ฆฝํธ์์ ๋ค๋ฅธ ํ์
๊ฐ์ ํธํ ์ฌ๋ถ๋ฅผ ์ ๊ฒํ๋ ๊ฒ์ ํ์
ํธํ์ด๋ผ๊ณ ํ๋ค. ์๋ Avengers ํด๋์ค๋ Ironman ์ธํฐํ์ด์ค๋ฅผ ์์๋ฐ์ ๊ตฌํํ ๊ฒ ์๋๋ฐ๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๋๋ค. ํ์
์คํฌ๋ฆฝํธ์์ ํ์
์ ์ ์๋์ด ์๋ ์์ฑ์ ํ์
์ ๊ฐ์ง๊ณ ์ฝ๋๊ฐ ํธํ๋๋์ง ํ์ธํ๊ธฐ ๋๋ฌธ์ด๋ค.interface Ironman { name: string;}class Avengers { name: string;}let ironMan: Ironman;ironMan = new Avengers(); // ok..
[DevTools] ์ธ๋ถ์์ ๋ก์ปฌ ์๋ฒ ์ ์ํ๊ธฐ — ngrok
[DevTools] ์ธ๋ถ์์ ๋ก์ปฌ ์๋ฒ ์ ์ํ๊ธฐ — ngrok
2024.05.04๋ก์ปฌ ์๋ฒ๋ฅผ ๋์๋๊ณ ์์
์ค์ธ ๋ด์ฉ์ด ์ธ๋ถ ๋คํธ์ํฌ์์ ์ด๋ป๊ฒ ์๋ํ๋์ง ํ
์คํธํ๊ณ ์ถ์ ๋๊ฐ ์๋ค. ์ธ๋ถ์์ ์ ์ํ๋ ค๋ฉด ๋ก์ปฌ ์๋ฒ์์ ์ฌ์ฉํ๋ ํฌํธ๋ฅผ(3000, 8080 ๋ฑ...) ์ด์ด์ผ ๋๋๋ฐ ๋ณด์์ ์ข์ง ์๊ณ , AWS์ ์ฌ๋ฆฌ์๋ ๋ฒ๊ฑฐ๋กญ๋ค. ์ด๋ ngrok๋ผ๋ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ngrok๋ ๋ฐฉํ๋ฒฝ ๋ท๋จ์ ์๋ ๋ก์ปฌ ์๋ฒ๋ฅผ ๋ณด์ ํฐ๋์ ํตํด ๊ณต์ฉ ์ธํฐ๋ท์ ๋
ธ์ถ๋๋๋ก ํด์ค๋ค. Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels. ์คํ ๋ฐฉ๋ฒโถ ngrok ํ์๊ฐ์
๋ฐ Authtoken ๋ณต์ฌ(๋์๋ณด๋ ์ข์ธก Getting Started → Your Authtoken) โท ngrok ์ค..
[React] Blur ํจ๊ณผ๋ฅผ ํ์ฉํ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ Image Lazy Loading
[React] Blur ํจ๊ณผ๋ฅผ ํ์ฉํ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ Image Lazy Loading
2024.05.04์นํ์ด์ง์์ ์ฑ๋ฅ์ ์ํฅ์ ๊ฐ์ฅ ๋ง์ด ์ฃผ๋ ๋ถ๋ถ์ด ์ด๋ฏธ์ง / ๋น๋์ค ๊ฐ์ ๋ฏธ๋์ด ์์๋ค. ํนํ ์ด๋ฏธ์ง๋ ๋ฐฐ๋, ์ ํ ์ฌ์ง, ๋ก๊ณ ๋ฑ ํ์ด์ง ๊ตฌ์๊ตฌ์์์ ์ฌ์ฉํ๋ค. HTTP Archive Data์ ๋ฐ๋ฅด๋ฉด ์ ์ฒด ์นํ์ด์ง ์ฉ๋์ 45%๋ฅผ ์ด๋ฏธ์ง๊ฐ ์ฐจ์งํ๋ค๊ณ ํ๋ค. ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ง ์๋๊ฑด ๋ถ๊ฐ๋ฅํ์ง๋ง, ํ๋ฉด์ ๋
ธ์ถ๋ ๋๋ง ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ผ๋ก ํ์ด์ง ๋ก๋ฉ ์๊ฐ์ ๋จ์ถ์ํฌ ์ ์๋ค. ์ด๋ฐ ๋ฐฉ์์ Lazy Loading์ด๋ผ๊ณ ํ๋ค. Lazy Loading ๊ตฌํ ๋ฐฉ๋ฒ๐ก Lazy Loading์ด ์ ์ฉ๋ ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๊ทผ์ ํด์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๋ฉด ์ฝํ
์ธ ๊ฐ ๋ฐ๋ ค๋๋ ํ์์ด ๋ฐ์ํ๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๋ ค๋ฉด ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ธ๋ ์ปจํ
์ด๋ ์์์ ๋์ด / ๋๋น๋ฅผ ์ง์ ํ๋ฉด ๋๋ค. Lazy Loading์ ํฌ๊ฒ Chrome Na..
[React] ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
[React] ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
2024.05.041) ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ ๋ฐฉ๋ฒ๋ฌดํ ์คํฌ๋กค์ ํ์ฌ ํ์ด์ง์์ ์คํฌ๋กค๋ฐ๊ฐ ๋ง์ง๋ง ์ฝํ
์ธ ์ง์ ์ ์์ ๋ ๋ค์ ์ฝํ
์ธ ๋ฅผ ์๋์ผ๋ก ๋ถ๋ฌ์ค๋ ๊ตฌํ ๋ฐฉ์์ ๋งํ๋ค. โ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์์ญ์ ๋์ด์ โํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ด๋ฅผ ๋ํ ๊ฐ์ด โ์ ์ฒด ๋ฌธ์์ ๋์ด์ ๊ฐ๋ค๋ฉด ํ์ฌ ์คํฌ๋กค์ด ๊ฐ์ฅ ํ๋จ ๋์ ๋๋ฌํ๋ค๋ ๊ฑธ ์ ์ ์๋ค. ์์์ผ ํ ๊ธฐํ ํ๋กํผํฐ โถ ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์ฝํ
์ธ ์์ญ์ ๋์ด : document.documentElement.scrollTop โท ํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ดwindow.innerHeight : ์คํฌ๋กค๋ฐ ํฌํจdocument.documentElement.clientHeight : ์คํฌ๋กค๋ฐ ์ ์ธ โธ ์ ์ฒด ๋ฌธ์์ ๋์ด// ๋ฌธ์์ ์ ํํ ์ ์ฒด ๋์ด๋ฅผ ๊ตฌํ๊ธฐ ์ํ ์ฝ๋const scrollHei..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
2024.05.03ํํ์์ ํ๊ฐ ์์let foo = { n: 1 };let bar = foo; // foo ๊ฐ์ฒด์ ์ฐธ์กฐ ์ฃผ์๊ฐ bar ๋ณ์์ ํ ๋น๋จfoo.x = foo = { n: 2 }; // ๊ฐ์ ๋ฐํํ๋ ํ ๋น ์ฐ์ฐ์console.log(foo.x); // ? ์ ๋ฌธ์ ๋ฅผ ์ผํ๋ณด๋ฉด foo.x์ ๊ฒฐ๊ณผ๋ { n: 2 }์ผ ๊ฒ ๊ฐ์ง๋ง ์๋๋ค. foo.x๋ undefined๋ฅผ ์ถ๋ ฅํ๋ค. ์ ์ฝ๋์ ์ฐ์ฐ ๊ณผ์ ์ ํ๋ํ๋ ํ์ด๋ณด๋ฉด ์๋์ ๊ฐ๋ค. ์ผ์ชฝ ํํ์ ํ๊ฐ์ฐ์ธก ํํ์์ด ํ๊ฐํ ๊ฐ์ด ํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo.x๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์ค๋ฅธ์ชฝ ํํ์ ํ๊ฐํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo ๋ณ์๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์๋ก์ด ๊ฐ์ฒด { n: 2 }๊ฐ foo ๋ณ์์ ํ ๋น๋๊ณ ํด๋น ๊ฐ์ฒด ๋ฐํ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
2024.05.03์ ๋๋ ์ดํฐ๋ ES6์ ๋์
๋ ํน์ํ ํจ์๋ค. ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๊ณ , ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์๋ ์๋ค. ์ด๋ฐ ํน์ง ๋๋ฌธ์ ์ ๋๋ ์ดํฐ ํจ์์์ ์ฝ๋ ๋ธ๋ก์ ์คํ์ ์ ์ ๋ฉ์ท๋ค๊ฐ ํ์ํ ์์ ์ ์ฌ๊ฐํ ์ ์๋ค. ์ผ๋ฐ ํจ์๋ 0~1๊ฐ ๊ฐ๋ง ๋ฐํํ ์ ์์ง๋ง, ์ ๋๋ ์ดํฐ ํจ์๋ ์ฌ๋ฌ๊ฐ์ ๊ฐ์ ํ์์ ๋ฐ๋ผ ํ๋์ฉ ๋ฐํํ ์ ์๋ค. ์ ๋๋ ์ดํฐ ํจ์์ ํน์งํจ์ ํธ์ถ์์๊ฒ ํจ์ ์คํ์ ์ ์ด๊ถ์ ์๋(yield)ํ ์ ์๋ค์ผ๋ฐ ํจ์ : ํจ์ ํธ์ถ์(caller)๋ ํจ์๋ฅผ ํธ์ถํ ์ดํ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค.์ ๋๋ ์ดํฐ ํจ์ : ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค(ํจ์ ์คํ ์ผ์ ์ ์ง / ์ฌ๊ฐ)ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ค์ผ๋ฐ ํจ์ : ๋งค๊ฐ๋ณ์๋ฅผ ํตํด ๊ฐ์ ์ ๋ฌ๋ฐ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ดํฐ๋ฌ๋ธ Iterable ์ด ์ ๋ฆฌ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ดํฐ๋ฌ๋ธ Iterable ์ด ์ ๋ฆฌ
2024.05.03TL;DR โญ๏ธSymbol.iterator ๋ฉ์๋๊ฐ ๊ตฌํ๋์ด ์๋ ๊ฐ์ฒด๋ฅผ ์ดํฐ๋ฌ๋ธ(iterable)์ด๋ผ๊ณ ํ๋ค. ๊ฐ๋จํ ๋งํ๋ฉด ์ดํฐ๋ฌ๋ธ์ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด๋ค. ๋ฐฐ์ด, ๋ฌธ์์ด์ Symbol.iterator ๋ฉ์๋๊ฐ ์ด๋ฏธ ๊ตฌํ๋์ด ์๋ ๋ํ์ ์ธ ๋ด์ฅ ์ดํฐ๋ฌ๋ธ์ด๋ค. ์ดํฐ๋ฌ๋ธ์ ์ฌ์ฉํ๋ฉด ์ด๋ค ๊ฐ์ฒด๋ โfor of ๋ฐ๋ณต๋ฌธ โ์ ๊ฐ ๋ฌธ๋ฒ โ๋ฐฐ์ด ๊ตฌ์กฐ๋ถํด ํ ๋น์ ๋์์ผ๋ก ์ฌ์ฉํ ์๋ ์๋ค. โถ for of ๋ฌธ์ ์ฌ์ฉํ ์ ์๋ ๊ฐ์ฒด๋ฅผ ์ดํฐ๋ฌ๋ธ์ด๋ผ๊ณ ํ๋ค โท ์ดํฐ๋ฌ๋ธ์ Symbol.iterator ๋ฉ์๋(ํน์ ํ๋กํ ํ์
์ฒด์ธ์ ์ํด ์์)๊ฐ ๊ตฌํ๋์ด ์์ด์ผ ํ๋ค.Symbol.iterator๋ for of์ ์ํด ์๋์ผ๋ก ํธ์ถ๋๋ฉฐ, ๋ช
์์ ์ผ๋ก ํธ์ถํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋คSymbol.iterator ๋ฉ์๋๊ฐ ๋ฐํํ๋ ๊ฐ์ฒด๋ “์ด..
[React] ๋ฆฌ์กํธ ํ์๊ธฐ(TypeWriter) ํจ๊ณผ ๊ตฌํํ๊ธฐ feat.์ ๋๋ ์ดํฐ
[React] ๋ฆฌ์กํธ ํ์๊ธฐ(TypeWriter) ํจ๊ณผ ๊ตฌํํ๊ธฐ feat.์ ๋๋ ์ดํฐ
2024.05.03๊ธฐ๋ณธ ๋ก์งํ์๊ธฐ๋ก ํ ๊ธ์์ฉ ์
๋ ฅํ๋ ํจ๊ณผ(Typewriter Effect)๋ ์ด๋ฏธ ์ ๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ง๋ง, setInterval ํ์ด๋จธ API๋ฅผ ์ด์ฉํด์ ์ง์ ๊ตฌํํ ์ ์๋ค. ์๋ ๋ฌธ์ฅ(ํ
์คํธ)์ ํ ๊ธ์์ฉ ์๋ฅธ ํ ๊ฐ์ฅ ์์ ๊ธ์๋ถํฐ ํ๋์ฉ ์ด์ด ๋ถ์ด๋ ๋ฐฉ์์ด๋ค. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i ๊น๋นก์ด๋ ์ปค์ ํจ๊ณผ๋ | ์ฝํ
์ธ ๋ฅผ ๊ฐ๋ ..
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ 100vh ์ด์ ํด๊ฒฐ
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ 100vh ์ด์ ํด๊ฒฐ
2024.05.03iOS์ ์ฌํ๋ฆฌ์์ 100vh ์์ฑ ๊ฐ์ด ๋ค์ ๋ค๋ฅด๊ฒ ์๋ํ๋ค. ๋ฐ์คํฌํ ํฌ๋กฌ์์ 100vh๋ ํ์ฌ ํ๋ฉด์ ๋ณด์ฌ์ง๋ ๋ทฐํฌํธ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ์ง๋ง, iOS์ ์ฌํ๋ฆฌ์์ ํ๋จ ์ฃผ์์ฐฝ ์์ญ๊น์ง ํฌํจํ๋ค. ๋ทฐํฌํธ๋ฅผ ๊ธฐ์ค์ผ๋ก ์๋ ๋น์จ๋ก ํ๋ฉด์ ๋๋ด๋ค๋ฉด ์์ดํฐ ์ฌํ๋ฆฌ์์ footer ์ผ๋ถ๋ถ์ ํ๋จ ์ฃผ์์ฐฝ ๋๋ฌธ์ ๊ฐ๋ ค์ง๋ค.header : 15%main : 70%footer : 15% ํด๊ฒฐ ๋ฐฉ๋ฒ๋คํํ ์ด ๋ฌธ์ ๋ ์์ CSS๋ง์ผ๋ก ํด๊ฒฐํ ์ ์๋ค. -webkit-fill-available ์์ฑ์ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ด๋ค. ๊ธฐ๋ฅ ์ฟผ๋ฆฌ(@supports) ์ธ์์ ๋ช
์ํ -webkit-touch-callout์ iOS์์๋ง ์ง์ํ๋ ์์ฑ์ด๋ค. ๋ฐ๋ผ์ ์์ดํฐ ์ฌํ๋ฆฌ์์ ์ ์ํ ๋ -webkit-fill-available ์คํ์ผ ๊ฐ์ด ์ ..
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ ํ
๋ง ์ปฌ๋ฌ ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
[HTML/CSS] ์์ดํฐ ์ฌํ๋ฆฌ ํ ๋ง ์ปฌ๋ฌ ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
2024.05.03์์ดํฐ iOS 15 ๋ถํฐ ์ฌํ๋ฆฌ ๋ธ๋ผ์ฐ์ ํญ ๋ง๋์ ํ
๋ง ์์์ ์ถ๊ฐํ ์ ์๋ค. ํญ ๋ง๋ ์์์ ์ฝํ
์ธ ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์๋ ์ ํ๋์ง๋ง ํ๊ทธ๋ฅผ ์ด์ฉํด์ ์ํ๋ ์์์ผ๋ก ๋ณ๊ฒฝํ ์ ์๋ค. ์ฐธ๊ณ ๋ก content ์์ฑ ๊ฐ์ ์ปฌ๋ฌ์ฝ๋ ๋์ CSS ๋ณ์๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. e.g. content="var(--bg-black)" ํ
๋ง ์์ ๋ณ๊ฒฝ ์ โผ ํ
๋ง ์์ ๋ณ๊ฒฝ ํ โผ Light/Dark ๋ชจ๋ ์ปฌ๋ฌ๋ผ์ดํธ/๋คํฌ ๋ชจ๋์์ ๊ฐ๊ฐ ๋ค๋ฅธ ์์ ๋ณด์ด๊ณ ์ถ์ผ๋ฉด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ์๋ ์์์์ ๋ผ์ดํธ ๋ชจ๋์ผ ๋ ํญ ๋ง๋ ์์์ #ffffff(ํ์์), ๋คํฌ ๋ชจ๋์ผ ๋ #28231c ์์ผ๋ก ํ์๋๋ค. ๋ ํผ๋ฐ์คSafari 15 Theme ColorMeta Theme Color and Trickery | CSS-Tr..
[HTML/CSS] ์ ์ฉํ HTML ํ๊ทธ ๋ชจ์
[HTML/CSS] ์ ์ฉํ HTML ํ๊ทธ ๋ชจ์
2024.05.03— ์งํ ์ํ ๋ง๋ ํ๊ทธ๋ ์์
์ ์๋ฃ ์ ๋๋ฅผ ๋ํ๋ธ๋ค. progress ํ๊ทธ์์ ์ต์๊ฐ์ ํญ์ 0์ด๋ฉฐ, ๋ค๋ฅธ ๊ฐ์ผ๋ก ์ง์ ํ ์ ์๋ค. ๋ฐ๋ผ์ ๊ตณ์ด min ์์ฑ์ ๋ช
์ํ์ง ์์๋ ๋๋ค(๋ฐ๋ฉด meta ํ๊ทธ์์ min์์ฑ์ ์ง์ ํด์ผ ํ๋ค). See the Pen <progress> element by ColorFilter (@colorfilter) on CodePen." data-ke-type="html">HTML ์ฝ์
๋ฏธ๋ฆฌ๋ณด๊ธฐํ ์ ์๋ ์์ค ์์ฑFile progress min ์์ฑ : ์ต์๊ฐ / ๊ธฐ๋ณธ๊ฐ 0 / ์ฌ์ฉ์ ์ง์ ๋ถ๊ฐmax ์์ฑ : ์ต๋๊ฐ(0๋ณด๋ค ์ปค์ผํจ) / ๊ธฐ๋ณธ๊ฐ 1value ์์ฑ : ํ์ฌ๊ฐ / 0 ์ด์ max ์ดํ ์ปค์คํ
์คํ์ผprogress ํ๊ทธ๋ ๊ฐ ๋ธ๋ผ์ฐ์ ๋ง๋ค ๊ธฐ๋ณธ ..
[React] ๋ฆฌ์กํธ useRef ํ์ฉ ์ผ์ด์ค ๋ชจ์
[React] ๋ฆฌ์กํธ useRef ํ์ฉ ์ผ์ด์ค ๋ชจ์
2024.05.03useRef ํจ์๋ current ์์ฑ์ ๊ฐ์ง ref ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค. ref.current ๊ฐ์ HTMLElement์ ํ ๋นํด์ ํด๋น ์์์ focusํ๊ฑฐ๋, ์๋ฆฌ๋จผํธ ํฌ๊ธฐ ๋ฑ์ ํ์ธํ ์ ์๋ค. ref ๊ฐ์ฒด๋ ์๋ ํน์ง์ ๊ฐ๋๋ค. ์ปดํฌ๋ํธ๊ฐ ๋ค์ ๋ ๋๋ง ๋ผ๋ ref.current ๊ฐ์ ๊ทธ๋๋ก ์ ์งํ๋ค.ref.current ๊ฐ์ด ๋ณ๊ฒฝ๋ผ๋ ์ปดํฌ๋ํธ๋ ๋ค์ ๋ ๋๋งํ์ง ์๋๋คHTMLElement ๋ฟ๋ง ์๋๋ผ ์ซ์ / ๋ฌธ์์ด / ๋ฐฐ์ด ๋ฑ ๊ฐ์ ํ ๋นํ ์ ์๋ค. Case 1 — ๋ฆฌ๋ ๋๋ง์ด ํ์ ์๋ ๊ฐ์ ๊ด๋ฆฌํ ๋ โญ๏ธuseRef๋ .current ํ๋กํผํฐ๋ก ์ ๋ฌ๋ ์ธ์(initialValue)๋ก ์ด๊ธฐํ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ref ๊ฐ์ฒด๋ฅผ ๋ฐํํฉ๋๋ค. ๋ฐํ๋ ๊ฐ์ฒด๋ ์ปดํฌ๋ํธ์ ์ ์์ ์ฃผ๊ธฐ๋ฅผ ํตํด ์ ์ง๋ ๊ฒ์
๋๋ค. — ..