๐ช Programming
[CS] ์ค๋ฒํค๋ / ํ๋ก์ธ์ค / ์ค๋ ๋
[CS] ์ค๋ฒํค๋ / ํ๋ก์ธ์ค / ์ค๋ ๋
2024.05.18์ค๋ฒํค๋์ค๋ฒํค๋๋ ํน์ ์์
์ ์ํํ๊ธฐ ์ํด ๊ฐ์ ํน์ ์ถ๊ฐ์ ์ผ๋ก ํ์ํ ์์
์ด๋ ๋น์ฉ์ ์๋ฏธํ๋ค. ์ฌ๊ธฐ์ ๋น์ฉ์ ์ปดํจํฐ์ ์ฒ๋ฆฌ ์๊ฐ, ๋ฉ๋ชจ๋ฆฌ ๋ฑ์ ๋งํ๋ค. ์๋ฅผ ๋ค์ด ์ฒ๋ฆฌ์๊ฐ 10์ด๊ฐ ํ์ํ A ๊ธฐ๋ฅ์ ์์ ์ฑ์ ์ํ ๋ถ๊ฐ๊ธฐ๋ฅ B๋ฅผ ์ถ๊ฐํ ๊ฒฐ๊ณผ ์ด 15์ด๊ฐ ์์๋๋ค๋ฉด, ์ค๋ฒํค๋๋ 5์ด๊ฐ ๋๋ค. ์ค๋ฒํค๋๋ ํ์ค ์ธ๊ณ์์ ๋งํธ์ ์ฅ๋ณด๋ฌ ๊ฐ๋ ๊ฒ์ ๋น์ ํ๋ฉด ๋ ์ฝ๊ฒ ์ดํดํ ์ ์๋ค. 10๋ง ์์ด์น ๋ฌผ๊ฑด์ ๊ตฌ๋งคํ๊ธฐ(๋ฉ์ธ ์์
A) ์ํด ๋งํธ๊น์ง ๊ฐ๋ ์ผ(๋ถ๊ฐ ์์
B)์ ์ฅ๋ณด๊ธฐ์์ ํฐ ๋ถ๋ถ์ ์ฐจ์งํ์ง ์๋๋ค. ํ์ง๋ง ๊ป ํ๋๋ง ์ฌ๊ธฐ ์ํด(์์
A) ๋งํธ๊น์ง ๊ฐ๋ค๋ฉด, ๋งํธ๊น์ง ์ด๋ํ๋ ์ผ(๋ถ๊ฐ ์์
B)์ ์ฅ๋ณด๊ธฐ์์ ์๋์ ์ผ๋ก ํฐ ๋ถ๋ถ์ ์ฐจ์งํ๋ค. ์ด๋ ๊ป์ ์ฌ๊ธฐ ์ํด ๋งํธ๊น์ง ๊ฐ๋ ๊ฑด ์ค๋ฒํค๋๊ฐ ๋๋ฌด ํฌ๋ค๊ณ ๋ง..
[JS] ๋ฌธ์ฅ, ๋จ์ด, ์์๋ณ๋ก ๋ฌธ์์ด ๋ถ๋ฆฌํ๊ธฐ
[JS] ๋ฌธ์ฅ, ๋จ์ด, ์์๋ณ๋ก ๋ฌธ์์ด ๋ถ๋ฆฌํ๊ธฐ
2024.05.17split() ๋ฉ์๋์ ๋ฌธ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฌธ์์ด์ ๋ถ๋ฆฌํ ๋ ์ผ๋ฐ์ ์ผ๋ก split() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค. ํ์ง๋ง ์๋์ฒ๋ผ ๊ตฌ๋ถ์๋ ๊ฒฐ๊ณผ ๋ฐฐ์ด์์ ์ ์ธ๋๊ณ ๋ถํ์ํ ๊ณต๋ฐฑ์ด ์ถ๊ฐ๋๋ค. ์ฆ, language-sensitive ํ์ง ์๋ ๋จ์ ์ด ์๋ค. language-sensitive๋ ๋ฌธ๋งฅ์ ๋ง๋ ํํ๊ณผ ์ฉ์ด ์ฌ์ฉ์ ์๋ฏธํ๋ค. ํ๊ตญ์ด๋ก๋ ์ธ์ด ๊ฐ์์ฑ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค. 'Hello! How are you?'.split(/[.!?]/);// ['Hello', ' How are you', ''] ๐ก ์ ๊ท์ ๊ด๋ จ ์ฐธ๊ณ ํํ์์ ํ๋์ ๋จ์๋ก ์ทจ๊ธํ๋ ํฌํ ๊ดํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ตฌ๋ถ์๋ ๊ฒฐ๊ณผ ๋ฐฐ์ด์ ํฌํจํ ์ ์๋ค[] ๋ฌธ์ ๊ทธ๋ฃน์ ๋๊ดํธ ๋ด๋ถ ๋ฌธ์์ด ์ค ํ๋๋ผ๋ ์ผ์นํ๋ ๊ฒฝ์ฐ๋ฅผ ์๋ฏธํ๋ค Intl ์๋ฐ์คํฌ๋ฆฝํธ API๋ฅผ ํ์ฉํ..
[TS] ํ์
์คํฌ๋ฆฝํธ์ ๊ณต๋ณ์ฑ / ๋ฐ๊ณต๋ณ์ฑ / ์ด๋ณ์ฑ
[TS] ํ์ ์คํฌ๋ฆฝํธ์ ๊ณต๋ณ์ฑ / ๋ฐ๊ณต๋ณ์ฑ / ์ด๋ณ์ฑ
2024.05.17TL;DR ์๊ฒฉ ๋ชจ๋๋น์๊ฒฉ ๋ชจ๋ํจ์ ๋ฆฌํด ํ์
๊ณต๋ณ์ ๊ณต๋ณ์ ํจ์ ํ๋ผ๋ฏธํฐ ํ์
๋ฐ๊ณต๋ณ์ ์ด๋ณ์ ๊ทธ ์ธ๊ณต๋ณ์ ๊ณต๋ณ์ ๊ณต๋ณ์ฑ : ์ํผ ํ์
(๋์ ํ์
)์ด ์๋ธ ํ์
(์ข์ ํ์
)์ ์ปค๋ฒํ๋ ๊ด๊ณ์๋ธ ํ์
์ ์ํผ ํ์
์ ๋์
ํ ์ ์์ e.g. superType = subTypeํ์
์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ ๋์๋ฐ๊ณต๋ณ์ฑ : ์๋ธ ํ์
(์ข์ ํ์
)์ด ์ํผ ํ์
(๋์ ํ์
)์ ์ปค๋ฒํ๋ ๊ด๊ณ์ํผ ํ์
์ ์๋ธ ํ์
์ ๋์
ํ ์ ์์ e.g. subType = superTypeํจ์ ํ๋ผ๋ฏธํฐ ๋์์ด๋ณ์ฑ : ๊ณต๋ณ์ฑ๊ณผ ๋ฐ๊ณต๋ณ์ฑ์ ๋ชจ๋ ํฌํจํ๋ ๊ด๊ณ์ํผ ํ์
๊ณผ ์๋ธ ํ์
์ ๋ชจ๋ ๋์
ํ ์ ์์strictFunctionTypes ์ต์
์ ๊ป์ ๋ ํจ์ ํ๋ผ๋ฏธํฐ ๋์ ๊ณต๋ณ์ฑ | Covariance๊ณต๋ณ์ฑ : A๊ฐ B์ ์๋ธ ํ์
์ด๋ฉด, T๋ T์ ์๋ธ ํ์
์..
[React] ๋ฆฌ์กํธ์์ Rendering ๋ ๋๋ง์ด๋?
[React] ๋ฆฌ์กํธ์์ Rendering ๋ ๋๋ง์ด๋?
2024.05.16TL;DR๋ง์ดํธ : ์ปดํฌ๋ํธ๊ฐ ์ต์ด๋ก DOM์ ์ฝ์
๋๋ ๊ณผ์ . ์ปดํฌ๋ํธ ์๋ช
์ฃผ๊ธฐ์์ ํ ๋ฒ๋ง ๋ฐ์๋ ๋ : ์ปดํฌ๋ํธ๋ฅผ ์คํํด์ ๋ณ๊ฒฝ์ฌํญ์ ๊ณ์ฐ(์ปดํฌ๋ํธ ์ถ๋ ฅ ๊ฒฐ์ )ํ๋ ๊ณผ์ . ์๋ก์ด ๊ฐ์ DOM์ ์์ฑํ๊ณ ์ด ์๋ก์ด ๊ฐ์ DOM๊ณผ ์ด์ ๊ฐ์ DOM์ ๋น๊ตํ์ฌ ์ค์ DOM์ ๋ฐ์ํ ๋ณ๊ฒฝ์ฌํญ ํ์
์ปค๋ฐ : ๋ ๋ ๋จ๊ณ๋ฅผ ํตํด ํ์
๋ ๋ณ๊ฒฝ์ฌํญ๋ค์ด ์ค์ ๋ธ๋ผ์ฐ์ DOM์ ์ ์ฉ๋๋ ๊ณผ์ ๋ ๋๋ง์ด๋์ผ๋ฐ์ ์ผ๋ก ๋ ๋๋ง(Rendering)์ ์๋ 2๊ฐ์ง ๊ณผ์ ์ ์ง์นญํ๋ค. HTML / CSS / JS๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํด์(ํ์ฑ)ํด์ ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅํ๋ ๊ณผ์ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ HTML๋ก ๋ณํํด์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋ฌํ๋ ๊ณผ์ (SSR) ๋ฐ๋ฉด ๋ฆฌ์กํธ์์ ๋งํ๋ ๋ ๋๋ง์ ๋ธ๋ผ์ฐ์ DOM ์์ ๋น์ฉ์ ์ค์ด๊ธฐ ์ํด ์ํํ๋ ์์
์..
[TS] TypeScript ํ์
์คํฌ๋ฆฝํธ satisfies ์ฐ์ฐ์
[TS] TypeScript ํ์ ์คํฌ๋ฆฝํธ satisfies ์ฐ์ฐ์
2024.05.16ํ์
์คํฌ๋ฆฝํธ 4.9 ๋ฒ์ ๋ถํฐ ์์ ํ *์
์บ์คํ
์ ์ง์ํ๋ satisfies ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค. satisfies ์ฐ์ฐ์๋ฅผ ํ์ฉํ๋ฉด ํ์
์ ๋ณ๊ฒฝํ์ง ์๊ณ ๋ ๋ณ์์ *์ ์ฝ ์กฐ๊ฑด(constraint)์ ์ ์ฉํ ์ ์๋ค. ์ฆ, ๊ฐ์ฒด ํ๋กํผํฐ์ ์ ์ฝ ์กฐ๊ฑด์ ์ ์ฉํ๋ฉด์ ๊ฐ ํ๋กํผํฐ์ ํ์
์ ์ฌ๋ฐ๋ฅด๊ฒ ์ถ๋ก ํ ์ ์๋ค. ๐ก ์ฉ์ด ์ค๋ช
์บ์คํ
: ํ์
๋ณํ์
์บ์คํ
: ์์ ํด๋์ค๋ฅผ ๋ถ๋ชจ ํด๋์ค ํ์
์ผ๋ก ์บ์คํ
(์์ ํ์
์ผ๋ก ๋ณํ)๋ค์ด์บ์คํ
: ๋ถ๋ชจ ํด๋์ค๋ฅผ ์์ ํด๋์ค ํ์
์ผ๋ก ์บ์คํ
(ํ์ ํ์
์ผ๋ก ๋ณํ)์ ์ฝ ์กฐ๊ฑด : ํน์ ํ์
์ด๋ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํ์ฌ ์ฝ๋์ ์์ ์ฑ๊ณผ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ ๋ฐฉ๋ฒ ๋ฌธ์ ์๋ ์ฐธ๊ฐ์ ์ ๋ณด๋ฅผ ๋ํ๋ด๋ attendee ๊ฐ์ฒด๊ฐ ์๋ค. ๊ฐ์ฒด๋ฅผ ์ ์ธํ๋ฉด ํ์
์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด์ ๊ฐ ํ๋กํผํฐ ํ์
์ ์๋..
[React/JS] Promise ํ๋ก๋ฏธ์ค๋ฅผ ํ์ฉํ UX ๊ฐ์ — ํด ๋ฏธ๋ฃจ๊ธฐ
[React/JS] Promise ํ๋ก๋ฏธ์ค๋ฅผ ํ์ฉํ UX ๊ฐ์ — ํด ๋ฏธ๋ฃจ๊ธฐ
2024.05.16๋๊ธฐ ์์
์ ๊ธฐ๋ค๋ฆฌ๋ ํ๋ก๋ฏธ์คํ๋ก๋ฏธ์ค๋ ๋ชจ๋ ๋๊ธฐ ์์
์ ์๋ฃํ ํ์ ์คํํ ์ ์๋ค. ์๋ ์์์์ then ํ์ ์ฒ๋ฆฌ ๋ฉ์๋์ ๋๊ธด console.log๋ ์ ๋ ์คํ๋์ง ์๋๋ค.// ์ฝ๋ ์ฐธ๊ณ via ์ค๋์ ํ๋ก๊ทธ๋๋ฐnew Promise((resolve) => { console.log('1'); // ๋๊ธฐ ์์ญ resolve('2');}).then(console.log); // ๋น๋๊ธฐ ์์ญlet i = 0;while (true) { i += 1;} ํ๋ก๋ฏธ์ค ์์ฑ์์ ๋๊ธด ์ฝ๋ฐฑ ํจ์๋ ๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ฏ๋ก ์ฝ์์ 1์ ์ถ๋ ฅํ๋ค. resolve ํจ์๊ฐ ์คํ๋๋ฉด ํ๋ก๋ฏธ์ค๋ ์ดํ(fulfilled) ์ํ๊ฐ ๋๊ณ ๊ฒฐ๊ณผ ๊ฐ๊ณผ ํจ๊ป ์๋ก์ด ํ๋ก๋ฏธ์ค๋ฅผ ๋ฆฌํดํ๋ค. ๊ทธ๋ผ then ํ์ ์ฒ๋ฆฌ ๋ฉ์๋๋ก ์คํ ํด์ด ๋..
[React] ๋ฆฌ์กํธ Profiler ํ๋กํ์ผ๋ฌ์ Hook ์์
[React] ๋ฆฌ์กํธ Profiler ํ๋กํ์ผ๋ฌ์ Hook ์์
2024.05.16๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ๋ฆฌ๋ ๋๋ง ์์ธ์ ํ์
ํ ๋ ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ๋๊ตฌ์ Profiler(ํ๋กํ์ผ๋ฌ) ํญ์ ํ์ฉํ๋ค. ๋ง์ฝ Profiler ํญ์์ Hook 1 changed๋ฅผ ํ์ํ๋ค๋ฉด, Hook 1์ Components ํญ → ํด๋น ์ปดํฌ๋ํธ์ hooks ํญ๋ชฉ์์ 1๋ฒ์งธ ๋ด์ฅ ํ
์(useState ๋ฑ) ๊ฐ๋ฆฌํจ๋ค. ์ด๋ ์ฃผ์ํ ์ ์ Profiler์์ ํ
์ ์นด์ดํธํ ๋ useContext, ์ปค์คํ
ํ
์ ์๋ตํ๋ค๋ ๊ฒ์ด๋ค. ๋์ ์ปค์คํ
ํ
์ ๋ด๋ถ์ ์๋ ๋ชจ๋ ๋ด์ฅ ํ
(useContext ์ ์ธ)์ ์นด์ดํธ ํ๋ค. ์๋ฅผ ๋ค์ด ๋ด์ฅ ํ
1๊ฐ์ ์ปค์คํ
ํ
์ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ๊ฐ ์๋ค๊ณ ๊ฐ์ ํด๋ณด์. ์ปค์คํ
ํ
์์์ ๋ด์ฅ ํ
2๊ฐ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค. ๊ทธ๋ผ ์ด ์ปดํฌ๋ํธ์ ํ
์ธ๋ฑ์ค๋ ์ปดํฌ๋ํธ ๋ด์ฅ ํ
1, ์ปค์คํ
ํ
๋ด์ฅ ํ
2,..
[DevTools] iPhone ์์ดํฐ ์ฌํ๋ฆฌ์์ ๋๋ฒ๊น
/ ์ฝ์ ์ฌ์ฉํ๊ธฐ
[DevTools] iPhone ์์ดํฐ ์ฌํ๋ฆฌ์์ ๋๋ฒ๊น / ์ฝ์ ์ฌ์ฉํ๊ธฐ
2024.05.16Safari ๊ฐ๋ฐ์ ๋๊ตฌ๐ก ์์ดํฐ ํ๋ฉด์ด ์ ๊ฒจ์์ ๋ ์ฝ์์ ์ฌ์ฉํ ์ ์๋ค. โถ ๋งฅ๋ถ โ ์์ดํฐ USB ์ฐ๊ฒฐโท ์์ดํฐ ์ค์ → Safari → ๊ณ ๊ธ → ์ฒดํฌโธ macOS ์ฌํ๋ฆฌ ์ค์ → ๊ณ ๊ธ → ์ฒดํฌโน macOS ์ฌํ๋ฆฌ ์๋จ ๋ฉ๋ด → ๊ฐ๋ฐ์์ฉ → ์์ดํฐ ๊ธฐ๊ธฐ ์ด๋ฆ → ์์ดํฐ ์ฌํ๋ฆฌ์ ์ด๋ ค์๋ ์น์ฌ์ดํธ ์ ํโบ macOS ์ฌํ๋ฆฌ ์ฝ์ ์ฐฝ์์ ํ์ฌ ์ฐ๋์ค์ธ ์น์ฌ์ดํธ์ ์์ฑ ํ์ธ iOS Simulator๐ก Status bar(๋
ธ์น ์์ญ), Nav bar, Tab bar(์ฃผ์์ฐฝ ์์ญ), Home indicator ๊ฐ์ ์์ดํฐ UI๋ฅผ ๊ทธ๋๋ก ํํํ๋ฏ๋ก ์ค๋ฌผ ๊ธฐ๊ธฐ๋ฅผ ์ด์ฉํ ๋ ์ด๋ป๊ฒ ๋ณด์ผ์ง ํ์ธํ ์ ์๋ค. ์ค์ ์ ์๋ฃํ ํ Xcode ์คํ ์์ด ์คํฌํธ๋ผ์ดํธ์์ Simulator๋ฅผ ๊ฒ์ํ ํ ๋ฐ๋ก ์คํํ ์..
[JS/React] input ํ๋์ ์ซ์๋ง ์
๋ ฅ ํ์ฉํ๊ธฐ (ํ๊ธ ์
๋ ฅ ๋ฐฉ์ง)
[JS/React] input ํ๋์ ์ซ์๋ง ์ ๋ ฅ ํ์ฉํ๊ธฐ (ํ๊ธ ์ ๋ ฅ ๋ฐฉ์ง)
2024.05.16text ํ์
์ผ ๋onKeyDown, onKeyPress ์ด๋ฒคํธ๋ ํธ๋ค๋ฌ ์์์ e.preventDefault() ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด ์
๋ ฅ์ ๋ง์ ์ ์๋ค. ํ์ง๋ง ํ๊ธ์ ํฌํจํ CJK ๋ฌธ์(์กฐํฉ ๋ฌธ์)๋ ๋ฉ์๋๋ฅผ ํธ์ถํด๋ ๊ทธ๋๋ก ์
๋ ฅ๋๋ค. ์ด ๋ฐฉ๋ฒ์ ์ซ์๋ ์์ด ์
๋ ฅ์ ๋ง์๋๋ง ์ ํจํ๋ค. ์๋ ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐํ ์ ์๋ค.export default function App() { const OnKeyDown = (e) => { e.preventDefault(); }; return ( Only allow numbers in input Text Type );} ๐ก React์์ onKeyDown → onKeyPress → onC..
[JS] Promise ํ๋ก๋ฏธ์ค ๋ณ๋ ฌ์ฒ๋ฆฌ ๋ฉ์๋ ํบ์๋ณด๊ธฐ
[JS] Promise ํ๋ก๋ฏธ์ค ๋ณ๋ ฌ์ฒ๋ฆฌ ๋ฉ์๋ ํบ์๋ณด๊ธฐ
2024.05.14TL;DR๐ก ์ฒ๋ฆฌ(settled) ์ํ๋ ์ดํ(fulfilled) ๋๋ ๊ฑฐ์ (rejected) ์ํ๋ฅผ ๋ชจ๋ ํฌํจํ๋ค. Promise.all : ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ์ดํ๋์ด์ผ๋ง ์ฒ๋ฆฌ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํํ๋ค. ํ๋ก๋ฏธ์ค๊ฐ ํ๋๋ผ๋ ๊ฑฐ์ ๋๋ฉด ์ ์ฒด๊ฐ ๊ฑฐ์ ๋๋ค.Promise.allSettled : ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ์ฒ๋ฆฌ(์ดํ ๋๋ ๊ฑฐ์ )๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฐ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํํ๋ค.Promise.race : ๊ฐ์ฅ ๋จผ์ ์ฒ๋ฆฌ(์ดํ ํน์ ๊ฑฐ์ ) ์ํ๊ฐ ๋ ํ๋ก๋ฏธ์ค ์ฒ๋ฆฌ๋ฅผ ๋ฐํํ๋ค.Promise.any : ํ๋ก๋ฏธ์ค ์ค ํ๋๋ผ๋ ์ดํ๋๋ฉด ํด๋น ๊ฐ์ ๋ฐํํ๋ค. ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ๊ฑฐ์ ๋๋ฉด ๊ฑฐ์ ์ด์ ๋ฅผ ๋ด์ AggregateError๋ฅผ ๋ฐํํ๋ค. Promise.all๐ก ํ๋ก๋ฏธ์ค ํ์ ์ฒ๋ฆฌ ๋ฉ์๋๋ฅผ ์ด์ฉํ ์ฒด์ด๋์ ์์ฐจ์ ์ฒ๋ฆฌ, P..
[JS] ํ์
์ด๋ฆ์ ๋ฐํํ๋ getType ์ ํธ ํจ์
[JS] ํ์ ์ด๋ฆ์ ๋ฐํํ๋ getType ์ ํธ ํจ์
2024.05.14value๋ฅผ ์ธ์๋ก ๋ฐ์ ํด๋นํ๋ ํ์
์ด๋ฆ(์๋ฌธ์)์ ๋ฐํํ๋ getType ํจ์. ํ๋ก์ ํธ ๊ณตํต ์ ํธ๋ฆฌํฐ ํ์ผ์ ์ถ๊ฐํด๋๊ณ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๊ฒ ์ธ ์ ์๋ค.const getType = (value: any) => { if (value === undefined) return 'undefined'; if (value === null) return 'null'; return value.constructor.name.toLowerCase();};getType(8); // 'number'getType([8]); // 'array'getType(() => {}); // 'function'getType('8'); // 'string'getType({ id: 8 }); // 'object'getType(new ..
[Next.js] ๋ผ์ฐํธ ๋ณ๊ฒฝ / ์๋ก๊ณ ์นจ ์ทจ์ํ๊ธฐ (๋ค๋น๊ฒ์ด์
๊ฐ๋)
[Next.js] ๋ผ์ฐํธ ๋ณ๊ฒฝ / ์๋ก๊ณ ์นจ ์ทจ์ํ๊ธฐ (๋ค๋น๊ฒ์ด์ ๊ฐ๋)
2024.05.14ํ์๊ฐ์
, ๊ธ์ฐ๊ธฐ ๋ฑ ์
๋ ฅ Form ํ์ด์ง์์ ์ค์๋ก ๋ค๋ฅธ ๋งํฌ๋ฅผ ํด๋ฆญํ๊ฑฐ๋, ์ ์ฅํ๋ ๊ฒ์ ๊น๋นกํ๊ณ ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ๋ฉด ์ ์ ์
์ฅ์์ ๋ฌด์ฒ ์ง์ฆ๋๋ ์ํฉ์ด ๋๋ค. ์ฒ์๋ถํฐ ํผ์ ๋ค์ ์์ฑํ๊ฑฐ๋ ์์ ํด์ผ ํ๊ธฐ ๋๋ฌธ์ด๋ค. ์์ ์ ์ฅ ๊ธฐ๋ฅ์ด ์๋ค๋ฉด ๊ด์ฐฎ์ง๋ง, ๊ทธ๋ ์ง ์๋ค๋ฉด ํ์ด์ง ์ดํ์ ๋ํ Confirm ๋จ๊ณ๋ฅผ ์ถ๊ฐํด์ ์ฌ์ฉ์ฑ์ ๊ฐ์ ํ ์ ์๋ค. ์ค์ ๋ก ์ฌ๋ฌ ์น ์๋น์ค์์ Form ํ์ด์ง ์ดํ์ ‘์ ์ฅํ์ง ์์ ๋ด์ฉ์ ์ญ์ ๋๋ค’๋ ์๋ด ๋ฌธ๊ตฌ๋ฅผ ๋์ด๋ค. ๊ตฌํ ๋ฐฉ๋ฒNextJS ์์ฒด์ ์ผ๋ก ์ฌ๋ฌ ๋ผ์ฐํธ ์ด๋ฒคํธ๋ฅผ ์ ๊ณตํ๋๋ฐ routeChangeStart๋ ๋ผ์ฐํธ ๋ณ๊ฒฝ์ ์์ํ ๋ ํธ๋ฆฌ๊ฑฐ๋๋ ์ด๋ฒคํธ๋ค. ํ์ด์ง๋ฅผ ์ธ๋ก๋(์๋ก๊ณ ์นจ)ํ ๋ window ๊ฐ์ฒด์์ ๋ฐ์ํ๋ beforeunload ์ด๋ฒคํธ๋ฅผ ์ด์ฉํ๋ฉด ๋๋ค. ..