๐ช Programming
[DevTools] ๋ฆฌ์กํธ ํ
์คํธ ํ๊ฒฝ(Vitest, React Testing Library) ๋ฐ CI ๊ตฌ์ถ
[DevTools] ๋ฆฌ์กํธ ํ ์คํธ ํ๊ฒฝ(Vitest, React Testing Library) ๋ฐ CI ๊ตฌ์ถ
2024.07.22์ฝ๋ ํ์ง์ ๋ณด์ฅํ๊ณ , ๊ธฐ๋ฅ์ด ์๋ํ ๋๋ก ๋์ํ๋์ง ํ์ธํ๊ธฐ ์ํด ํ
์คํธ ์ฝ๋๋ฅผ ์์ฑํ๋ค. ํนํ ๊ธฐ๋ฅ ์ถ๊ฐ๋ ๋ฆฌํฉํ ๋ง์ ํ ๋ ํ
์คํธ ์ฝ๋๊ฐ ์์ผ๋ฉด ๊ธฐ์กด ๊ธฐ๋ฅ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ์ฝ๊ฒ ํ์ธํ ์ ์๊ณ , ์ฌ๋ฆฌ์ ์ธ ์์ ๊ฐ์ ์ฃผ๋ ์ฅ์ ๋ ์๋ค. ํ๋ก ํธ์๋ ํ
์คํธ ์ข
๋ฅ๋ ํฌ๊ฒ ๋จ์ ํ
์คํธ, ํตํฉ ํ
์คํธ, E2E ํ
์คํธ, ์ ์ ํ
์คํธ๋ก ๋๋๋ค. ํ
์คํธ ์ข
๋ฅ์ค๋ช
์์์ฃผ์ ๋๊ตฌ๋จ์ ํ
์คํธ(Unit Test)๊ฐ๋ณ ํจ์, ์ปดํฌ๋ํธ, ๋ชจ๋์ ๋์ ๊ฒ์ฆ๋ฒํผ ํด๋ฆญ ์ ํน์ ํจ์ ํธ์ถ ์ฌ๋ถJest, Vitest, Mocha, Jasmine ๋ฑํตํฉ ํ
์คํธ(Integration Test)์ฌ๋ฌ ๋ชจ๋์ด ํจ๊ป ์ ์๋ํ๋์ง ํ์ธ์ํ ๊ตฌ๋งค ์ ์์ก ์
๋ฐ์ดํธ, ์ฌ๊ณ ๋ณ๊ฒฝJest, Vitest, React Testing Library ๋ฑE..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๊ท์์ผ๋ก ์ฒ ๋จ์ ๊ตฌ๋ถ์ ์ถ๊ฐํ๊ธฐ (๋จ์ด ๊ฒฝ๊ณ, ์ ํ๋ฐฉํ์)
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๊ท์์ผ๋ก ์ฒ ๋จ์ ๊ตฌ๋ถ์ ์ถ๊ฐํ๊ธฐ (๋จ์ด ๊ฒฝ๊ณ, ์ ํ๋ฐฉํ์)
2024.07.18ํฐ ์ซ์๋ฅผ ์ฝ๊ธฐ ์ฝ๊ฒ ๋ง๋ค๊ธฐ ์ํด ์ผ๋ฐ์ ์ผ๋ก ์ฒ ๋จ์๋ง๋ค ์ฝค๋ง(,)๊ฐ์ ๊ตฌ๋ถ์๋ฅผ ์ถ๊ฐํ๋ค. ์ฒ ๋จ์ ๊ตฌ๋ถ์ ํ๊ตญ์ ํฌํจํ ๋ง์ ๊ตญ๊ฐ์์ ํ์ค์ผ๋ก ์ฌ์ฉํ๋ ์ซ์ ํ๊ธฐ๋ฒ์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์ Number.toLocaleString() ํน์ Intl.NumberFormat ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ๊ตฌ๋ถ์๋ฅผ ์ถ๊ฐํ ์ ์๋ค. ์ฐธ๊ณ ๋ก ์ด ๋ฉ์๋๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก ์คํ ํ๊ฒฝ์ ๋ก์ผ์ผ ์ค์ ์ ๋ฐ๋ฅด๊ธฐ ๋๋ฌธ์ ๋ก์ผ์ผ์ ๋ฐ๋ผ ๊ฒฐ๊ณผ๊ฐ ๋ฌ๋ผ์ง ์๋ ์๋ค. ์๋ฅผ ๋ค์ด ๋
์ผ ๋ก์ผ์ผ(de-DE)์ ์ฒ ๋จ์ ๊ตฌ๋ถ์๋ก ์จ์ (.)์ ์ฌ์ฉํ๊ณ , ์์์ ๊ตฌ๋ถ์๋ก ์ฝค๋ง(,)๋ฅผ ์ฌ์ฉํ๋ค. — ์ฐธ๊ณ ํฌ์คํ
const number = 123456.789;// ๋ก์ผ์ผ์ ์ง์ ํ์ง ์์ผ๋ฉด ๊ธฐ๋ณธ ๋ก์ผ์ผ(navigator.language)์ ๋ฐ๋ฅธ๋คIntl.Number..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ reduce() ๋ฉ์๋ ํ์ฉ ์์ ๋ชจ์
[JS] ์๋ฐ์คํฌ๋ฆฝํธ reduce() ๋ฉ์๋ ํ์ฉ ์์ ๋ชจ์
2024.07.07Array.reduce() ๋ฉ์๋๋ ๋ฐฐ์ด์ ์๋ ๊ฐ ์์์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์คํํ์ฌ ๋์ ๋ ๊ณ์ฐ ๊ฒฐ๊ณผ๋ฅผ ํ๋์ ๊ฐ์ผ๋ก ๋ฐํํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ ๊ณตํ๋ filter(), map() ๋ฑ์ ๋ฐฐ์ด ๋ฉ์๋๋ ๋ชจ๋ reduce()๋ก ๊ตฌํํ ์ ์๊ณ , ์ด ์ธ์๋ ๋ค์ํ ํ์ฉ ๋ฐฉ๋ฒ์ด ์๊ธฐ ๋๋ฌธ์ ๊ฐ์ธ์ ์ผ๋ก ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉํ๋ ๋ฐฐ์ด ๋ฉ์๋๋ค. reduce() ๋ฉ์๋์ ๊ตฌ๋ฌธ์ ์๋์ ๊ฐ๋ค.reduce(callbackFn, initialValue?) callbackFn ์ฝ๋ฐฑ ํ๋ผ๋ฏธํฐaccumulator : ์ด์ callbackFn ๋ฐํ๊ฐ์ด๊ธฐ๊ฐ ์ง์ ์ ์ฝ๋ฐฑ์ ์ฒ์ ํธ์ถํ์ ๋ ๊ฐ : initialValue์ด๊ธฐ๊ฐ ๋ฏธ์ง์ ์ ์ฝ๋ฐฑ์ ์ฒ์ ํธ์ถํ์ ๋ ๊ฐ : array[0]currentValue : ํ์ฌ ์ํํ๊ณ ์๋ ๊ฐ์ด๊ธฐ๊ฐ ์ง..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ Set ๊ฐ์ฒด์ ์งํฉ ์ฐ์ฐ ๋ฉ์๋ (๊ต์งํฉ, ํฉ์งํฉ ๋ฑ)
[JS] ์๋ฐ์คํฌ๋ฆฝํธ Set ๊ฐ์ฒด์ ์งํฉ ์ฐ์ฐ ๋ฉ์๋ (๊ต์งํฉ, ํฉ์งํฉ ๋ฑ)
2024.07.04TL;DR๐ก ES6์ ๋์
๋ Set ๊ฐ์ฒด๋ ์ค๋ณต์ ํ์ฉํ์ง ์๋ ๊ณ ์ ํ ๊ฐ๋ค์ ์ ์ฅํ๋ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ค. Set์ ๋์ผํ ๊ฐ์ ๋ ๋ฒ ์ ์ฅํ ์ ์๊ธฐ ๋๋ฌธ์ ์ค๋ณต๋ ๊ฐ์ ์ถ๊ฐํ๋ฉด ์๋์ผ๋ก ๋ฌด์ํ๋ค. ๋ํ ์ฝ์
์์๋ฅผ ๊ธฐ์ตํ๊ณ , ์์ํ๊ณผ ์ฐธ์กฐํ ๊ฐ์ ๋ชจ๋ ์ง์ํ๋ค — ์ฐธ๊ณ ํฌ์คํ
Firefox 127 ๋ฒ์ ๋ถํฐ ๋ณ๋์ ํด๋ฆฌํ ์์ด ํฌ๋กฌ(Chrome)์ ํฌํจํ ๋๋ถ๋ถ์ ์ฃผ์ ๋ธ๋ผ์ฐ์ ์์ง์์ ๊ต์งํฉ, ํฉ์งํฉ, ์ฐจ์งํฉ ๋ฑ ์งํฉ ์ฐ์ฐ์ ์ํํ๋ ์๋ก์ด Set ๋ฉ์๋๋ฅผ ์ง์ํ๋ค. ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ๋ ๋ฉ์๋๋ ๋ค์๊ณผ ๊ฐ๋ค. A.intersection(B) : ๋ Set์ด ๊ณตํต์ผ๋ก ๊ฐ์ง๋ ์์๋ฅผ ํฌํจํ ์๋ก์ด Set ๋ฐํ — ๊ต์งํฉA.union(B) : ๋ Set์ด ๊ฐ์ง ๋ชจ๋ ์์๋ฅผ ํฌํจํ ์๋ก์ด Set ๋ฐํ..
[Git] RSS ๊ธ ๋ฐํ ์(ํฐ์คํ ๋ฆฌ ๋ฑ) GitHub ์๋ ์ปค๋ฐ ๋ฐฉ๋ฒ
[Git] RSS ๊ธ ๋ฐํ ์(ํฐ์คํ ๋ฆฌ ๋ฑ) GitHub ์๋ ์ปค๋ฐ ๋ฐฉ๋ฒ
2024.07.03GitHub์์ ์ฌ์ฉ์ ์ด๋ฆ(username)๊ณผ ๋์ผํ ์ด๋ฆ์ผ๋ก public ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ์์ฑํ๊ณ RRADME.md ํ์ผ์ ์ถ๊ฐํ๋ฉด ํ๋กํ ํ์ด์ง ์๋จ์ README ๋ด์ฉ์ด ํ์๋๋ค. ํ๋กํ ํ์ด์ง์ ์ฃผ๋ก ์์ ์ด ์๊ฐํ๊ณ ์ถ์ ํ๋ก์ ํธ, ๊ธฐ์ ์คํ ๋ฑ์ ๊ธฐ์ฌํ๋ค. ์นดํ
๊ณ ๋ฆฌ๋ณ๋ก ์ฃผ๋ชฉํ ๋งํ ํ๋กํ ํ์ด์ง๋ฅผ ๋ชจ์๋ ์ฌ์ดํธ๋ ์๋ค. ๋๋ถ๋ถ์ ๊ฐ๋ฐ์๋ค์ด ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๊ณ ์์ด์ ๊ทธ๋ฐ์ง Latest Blog Posts ํค๋์ ์ต๊ทผ ๊ธ ๋ชฉ๋ก์ ๋ณด์ฌ์ฃผ๋ ํ๋กํ์ด ๋ง๋ค. ์ด ๊ธฐ๋ฅ์ rss-parser ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด RSS ํผ๋ ๋ชฉ๋ก์ ๋ถ๋ฌ์ค๊ณ README.md์ ๋ฐ์ํ๋ ๋ฐฉ์์ผ๋ก ๊ตฌํ๋๋๋ฐ, ์ด ์์
์ GitHub Actions๋ฅผ ํตํด ์ ๊ธฐ์ ์ผ๋ก ์ํํ๋๋ก ๋ง๋ค ์ ์๋ค. RSS ์ค์ ๋จผ์ ์์ ์ ๋ธ๋ก๊ทธ ํน์ ..
[DevTools] ESLint 9 Flat Config + Prettier ์ค์ (TypeScript, React)
[DevTools] ESLint 9 Flat Config + Prettier ์ค์ (TypeScript, React)
2024.06.30Flat ConfigESLint 8.21.0 ๋ฒ์ ๋ถํฐ ๊ตฌ์ฑ ํ์ผ์ ํฐ ๋ณํ๊ฐ ์๊ฒผ๋ค. ๊ธฐ์กด .eslintrc ํ์ผ ๋์ ํ๋ซ ๊ตฌ์ฑ(Flat Config)์ ์ฌ์ฉํ๋ eslint.config.js ํ์์ด ์๋ก ๋์
๋ ๊ฒ. ํ๋ซ ๊ตฌ์ฑ์ extends๋ overrides ๊ฐ์ ๊ณ์ธต ๊ตฌ์กฐ์์ด ๊ฐ ๊ตฌ์ฑ์ ์ด๋ฃจ๋ ๊ฐ์ฒด๋ค์ ํฌํจํ 1์ฐจ์ ๋ฐฐ์ด๋ก ํํํ๋ค. ์ด๋ฅผ ํตํด ๊ท์น์ ์ธ๋ถํํด์ผ ํ๋ ์ํฉ์์ ๋ ์ ์ฐํ๊ฒ ๋์ํ ์ ์๊ฒ ๋๋ค. e.g., ๊ตฌ์ฑ ๊ฐ์ฒด 1-์๋ฐ์คํฌ๋ฆฝํธ ๊ท์น, ๊ตฌ์ฑ ๊ฐ์ฒด 2-ํ์
์คํฌ๋ฆฝํธ ๊ท์น ํ์ํ ํ๋ฌ๊ทธ์ธ์ ์ง์ import ํ ํ ์ฌ์ฉํ๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝ๋ผ์ ์ข
์์ฑ์ ๋ ๋ช
ํํ๊ฒ ๊ด๋ฆฌํ ์ ์๋ค.// eslint.config.js ํ์ผ ์์import eslint from '@eslint/js';i..
[DevTools] nvm๋ณด๋ค 40๋ฐฐ ๋น ๋ฅธ ๋
ธ๋ ๋ฒ์ ๊ด๋ฆฌ ๋๊ตฌ — fnm
[DevTools] nvm๋ณด๋ค 40๋ฐฐ ๋น ๋ฅธ ๋ ธ๋ ๋ฒ์ ๊ด๋ฆฌ ๋๊ตฌ — fnm
2024.06.18Node ๋ฒ์ ๊ด๋ฆฌ ๋๊ตฌ๋ก ์ค๊ณง nvm์ ์ฌ์ฉํ๋ค๊ฐ Rust๋ก ์์ฑ๋ fnm์ด nvm์ ๋นํด 40๋ฐฐ ์ด์ ๋น ๋ฅด๋ค๋ ๊ธ์ ๋ณด๊ณ ๋ฐ๊ฟ์ผ๊ฒ ๋ค๊ณ ๋ง์๋จน์๋ค. volta, fnm ๋ ์ค ๊ณ ๋ฏผํ๋ค๊ฐ ๊ฒฐ๊ตญ fnm์ ์ ํํ๋ค. nvm ์ธํฐํ์ด์ค์ ๊ฑฐ์ ๋์ผํ๊ณ .nvmrc ํ์ผ์ ์ง์ํ๋ ์ ์ด ๋ง์์ ๋ค์๋ค. nvm์ bash ์คํฌ๋ฆฝํธ๋ก ์์ฑ๋๊ธฐ ๋๋ฌธ์ ๊ธฐ๋ณธ์ ์ผ๋ก Unix ๊ณ์ด์์๋ง ์๋ํ๋ ๋ฐ๋ฉด, fnm์ Windows๋ ์ง์ํ๋ ์ฅ์ ์ด ์๋ค. fnm์ผ๋ก ๋ฐ๊พธ๊ณ ๋์๋ถํฐ ํฐ๋ฏธ๋ ๋ก๋ ์๋๊ฐ ํจ์ฌ ๋นจ๋ผ์ง ๊ฒ ์ฒด๊ฐ๋๋ค. ์ฐธ๊ณ ๋ก fnm์ Fast Node Manager์ ์ฝ์๋ค. ์ค์น ๋ฐฉ๋ฒ๋๋ณด๊ธฐโถ nvm ๊ด๋ จ ํ์ผ ์ญ์ : rm -rf ~/.nvmโท ~/.bashrc, ~/.bash_profile, ~/.zshrc, ~..
[DevTools] Prettier ์ฃผ์ ํฌ๋งทํ
์ต์
๊ณผ ์ถ์ฒ ์ค์
[DevTools] Prettier ์ฃผ์ ํฌ๋งทํ ์ต์ ๊ณผ ์ถ์ฒ ์ค์
2024.06.15๋ค์ด๊ฐ๋ฉฐ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ์ฝ๋ ํฌ๋งทํ
๋๊ตฌ๋ก Prettier๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ค. Prettier๋ .prettierrc (ํน์ .prettierrc.js) ๊ตฌ์ฑ ํ์ผ์ ์ํ๋ ์ฝ๋ ์คํ์ผ์ ์ปค์คํฐ๋ง์ด์ง ํ ์ ์๋๋ฐ, ํ๊ตญ์ด๋ก ๊ตฌ๊ธ๋ง ํ๋ฉด ๋ง์ด ๋์ค๋ ๊ตญ๋ฃฐ ์ปค์คํ
(?)์ ๋ณ์๊ฐ ์์ด ์ฌ์ฉํ๊ณ ์์๋ค.// .prettierrc{ "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80} ์ฌ์ฉํ๋๋ฐ ํฐ ๋ฌธ์ ๋ ์์์ง๋ง ์ธ์ ํ ๋ฒ ์ ํธํ๋ ์ฝ๋ ์คํ์ผ์ ๋ฐ๋ผ ์ค์ ์ ์๋ด์ผ๊ฒ ๋ค๋ ์๊ฐ์ ํ๋ ์ฐธ์ ์ฐ์ฐํ My Code Formatting Guidelin..
[Algorithm] ์ด์ง ํ์ ๋ฐ ๋ณํ ์๊ณ ๋ฆฌ์ฆ Binary Search Algorithm
[Algorithm] ์ด์ง ํ์ ๋ฐ ๋ณํ ์๊ณ ๋ฆฌ์ฆ Binary Search Algorithm
2024.06.02์ด์ง ํ์ ์๊ณ ๋ฆฌ์ฆ์ ์ ๋ ฌ๋ ๋ฐฐ์ด์์ ํน์ ๊ฐ์ ํจ์จ์ ์ผ๋ก ์ฐพ๊ธฐ ์ํ ์๊ณ ๋ฆฌ์ฆ์ด๋ค. ์ด์ง ํ์์ ๊ฐ์ ํฌ๊ธฐ์ ๋ฐ๋ผ ํ์ ๋ฒ์๋ฅผ ์ ๋ฐ์ผ๋ก ์ค์ฌ๊ฐ๋ฉฐ ์ํ๋ ๊ฐ์ ์ฐพ์๋ด๋ ๋ฐฉ์์ผ๋ก ์๋ํ๊ธฐ ๋๋ฌธ์ ์๊ฐ ๋ณต์ก๋๋ $O(\log n)$์ผ๋ก ํจ์จ์ ์ด๋ค. ์๋ฅผ ๋ค์ด 1024๊ฐ ์์๋ฅผ ๊ฐ์ง ๋ฐฐ์ด์์ ์ํ๋ ๊ฐ์ ์ฐพ์ ๋ ์ต๋ 10๋ฒ์ ๋น๊ต๋ง ํ์ํ๋ค. ํ์ง๋ง ๋ฐ์ดํฐ๊ฐ ์์ฃผ ๋ณ๊ฒฝ๋๋ค๋ฉด ๋งค๋ฒ ์ ๋ ฌ์ ํด์ค์ผ ํ๊ธฐ ๋๋ฌธ์ ํจ์จ์ฑ์ด ๋จ์ด์ง ์ ์๋ค. ๋ฐ์ดํฐ ์ฝ์
/์ญ์ ๊ฐ ๋น๋ฒํ ๊ฒฝ์ฐ์ ํด์ ํ
์ด๋ธ ๊ฐ์ ์๋ฃ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ๋๊ฒ ๋ ๋์ ์ ์๋ค. ๐ก ์ด์ง ํ์์ ์ด๋ถ ํ์์ด๋ผ๊ณ ๋ ๋ถ๋ฆฐ๋ค. ์ด์ง ํ์ ๊ธฐ๋ณธ์ค์๊ฐ ๊ณ์ฐ๋ฐฐ์ด์ ์ค๊ฐ ์ธ๋ฑ์ค๋ฅผ ๊ณ์ฐํ๋ค mid = Math.floor((left + right) / 2)์ค์๊ฐ๊ณผ ์ฐพ๊ณ ์ ํ๋ ..
[Network] ์ฃ์ง ํ๋ซํผ ์ํคํ
์ฒ Edge Platform Architecture
[Network] ์ฃ์ง ํ๋ซํผ ์ํคํ ์ฒ Edge Platform Architecture
2024.06.02์๋ฒ-ํด๋ผ์ด์ธํธ ๊ตฌ์กฐ์๋ฒ-ํด๋ผ์ด์ธํธ ๊ตฌ์กฐ๋ ๊ฐ์ฅ ์ ํต์ ์ธ ์ํคํ
์ฒ ์ค ํ๋๋ก, ์ค์ ์๋ฒ๊ฐ ๋ชจ๋ ํด๋ผ์ด์ธํธ์ ์์ฒญ์ ์ฒ๋ฆฌํ๋ ๊ฐ๋
์ด๋ค. ์ฆ, ๋ชจ๋ ํด๋ผ์ด์ธํธ ์์ฒญ์ ์ค์ ์๋ฒ๋ก ์ ์ก๋๋ค. ์๋ฒ - ํด๋ผ์ด์ธํธ ๊ตฌ์กฐ๋ ๊ฐ๋จํ๊ณ ๊ตฌํํ๊ธฐ ์ฌ์ด ์ฅ์ ์ด ์์ง๋ง, ์ค์ ์๋ฒ๊ฐ ๋จ์ผ ์์กด ์ง์ ์ด๋ผ๋ ๋จ์ ์ด ์๋ค. ์ ์๋์ด ๋ง์ ๊ฒฝ์ฐ ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ผ๋ฉฐ, ์๋น์ค๊ฐ ์ค๋จ๋ ์๋ ์๋ค. ๋ํ, ์ค์ ์๋ฒ์ ๋ฌผ๋ฆฌ์ ์์น๊ฐ ๊ณ ์ ๋์ด ์์ด ์ฌ์ฉ์์ ์ก์ธ์ค ์๋๊ฐ ์ง๋ฆฌ์ ์์น์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฐ๋๋ค. ๋์ผ ์กฐ๊ฑด์์ ์๋ฒ์ ๊ฐ๊น์ธ์๋ก ์ก์ธ์ค ์๋๊ฐ ๋นจ๋ผ์ง๊ณ , ์๋ฒ์์ ๋ฉ์ด์ง์๋ก ์ก์ธ์ค ์๋๊ฐ ๋๋ ค์ง๋ค. CDN์ ์ถํ์ค์ ์๋ฒ์ ๋ถ๋ด์ ์ค์ด๊ณ , ์ฌ์ฉ์์์ ์ง๋ฆฌ์ ๊ฑฐ๋ฆฌ๋ฅผ ๋จ์ถํ๊ธฐ ์ํด CDN ์ํคํ
์ฒ๊ฐ ๋ฑ์ฅํ๋ค. CDN..
[HTML/CSS] ์ํ๋ ์์น์ ๋
ธ๋ ์ฝ์
ํ๊ธฐ — insertAdjacentHTML
[HTML/CSS] ์ํ๋ ์์น์ ๋ ธ๋ ์ฝ์ ํ๊ธฐ — insertAdjacentHTML
2024.06.02insertAdjacentHTML vs innerHTMLelement.insertAdjacentHTML(position, htmlString) element.insertAdjacentHTML() ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌํ ๋ฌธ์์ด(htmlString)์ HTML๋ก ํ์ฑํด์ ์ง์ ๋ ์์น(position)์ ์ฝ์
ํ๋ ๋ฉ์๋๋ค. ์ฌ์ฉ์ ์
๋ ฅ์ ๋ฐ์ง ์๋ ๊ณณ์ ์ฌ์ฉํ๋ฉด createElement() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ๋ณด๋ค ๊ฐํธํ๊ฒ ์์๋ฅผ ์ฝ์
ํ ์ ์๋ค. ์ฌ์ฉ์ ์
๋ ฅ์ ๋ฐ์์ ์ฒ๋ฆฌํ ๋๋ XSS ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ณ๋์ sanitizing์ด ํ์ํ๋ค. ๋น์ทํ ๋ฉ์๋๋ก element.innerHTML()์ด ์์ง๋ง ์ฝ์
์์น๋ฅผ ์ง์ ํ ์ ์๊ณ , ๊ธฐ์กด ์์๋ฅผ ๋ฎ์ด์ฐ๊ธฐ ๋๋ฌธ์ ์ ์ฒด ์์๋ฅผ ๋ค์ ํ์ฑํด์ผ ํ๋ ๋จ์ ์ด ์..
[Next.js] App Router / ์๋ฒ ์ปดํฌ๋ํธ ์ฃผ์ ๋ด์ฉ ์ ๋ฆฌ
[Next.js] App Router / ์๋ฒ ์ปดํฌ๋ํธ ์ฃผ์ ๋ด์ฉ ์ ๋ฆฌ
2024.06.01App Router vs Page Router๊ธฐ๋ฅ์ฑ ๋ผ์ฐํฐํ์ด์ง ๋ผ์ฐํฐ๋ผ์ฐํ
ํ์
์๋ฒ ์ค์ฌํด๋ผ์ด์ธํธ ์ฌ์ด๋์๋ฒ ์ปดํฌ๋ํธ ์ง์OX๋ณต์ก๋๋ ๋ณต์กํจ๋ ๊ฐ๋จํจ์ฑ๋ฅ๋ ์ข์๋ ๋์จ์ ์ฐ์ฑ๋ ์ ์ฐํจ๋ ์ ์ฐํจํ์ผ ๊ธฐ๋ฐ ๋ผ์ฐํ
์ค์ฒฉ ํด๋๋ฅผ ์ฌ์ฉํด ๋ผ์ฐํธ ์ ์ํ์ผ์ด ์ง์ ๋ผ์ฐํธ๋ฅผ ๋ํ๋์ปดํฌ๋ํธ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฒ ์ปดํฌ๋ํธ๊ธฐ๋ณธ์ ์ผ๋ก ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฐ์ดํฐ ํ์นญfetch ํจ์ ์ฌ์ฉgetServerSideProps, getStaticProps, getInitialProps ์ฌ์ฉ๋ ์ด์์๋ ์ด์์ ์ค์ฒฉ / ๋์ ๋ ์ด์์์ ์ ๋ ์ด์์๋์ ๋ผ์ฐํธ์ง์ํ์ง๋ง ๋ฌธ๋ฒ ๋ค๋ฆLink ์ปดํฌ๋ํธ๋ก ์ง์์ฐ์ ์์ํ์ด์ง ๋ผ์ฐํฐ๋ณด๋ค ์ฐ์ ์ฑ ๋ผ์ฐํธ๊ฐ ์์ ๊ฒฝ์ฐ ๋์ฒด ์๋ฒ ์ปดํฌ๋ํธNext.js ๋ฒ์ 13~๋ถํฐ ์ ๊ณตํ๋ App Router๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ฒ ์ปดํฌ๋ํธ๊ฐ ..