๐ช Programming
[TS] ํ์
์คํฌ๋ฆฝํธ ๋ ์ข
๋ฅ์ ํค(key) ํ์
์ ๋ฐ์ ๋ ๊ฐ์ฒด ์ ๊ทผํ๊ธฐ
[TS] ํ์ ์คํฌ๋ฆฝํธ ๋ ์ข ๋ฅ์ ํค(key) ํ์ ์ ๋ฐ์ ๋ ๊ฐ์ฒด ์ ๊ทผํ๊ธฐ
2024.05.08๋ฌธ์ ์ํฉ์๋์ ๊ฐ์ ํ์
์ด ์๋ค๊ณ ๊ฐ์ ํด๋ณด์.export type OrderStatus = 'pending' | 'new' | '...์๋ต';export type Client = { user_id: number; company_name: string };export type OrderFilterParams = { status: Array; client: Array; // ...์๋ต}; ClientAndOrderFilter ์ปดํฌ๋ํธ์์ "status" | "client" ๋ ์ข
๋ฅ์ ํ์
์ ๋ฐ์ params[type] ํํ๋ก OrderFilterParams ๊ฐ์ฒด์ ์ ๊ทผํด์ ๊ฐ์ ๋ณ๊ฒฝํด์ผ ํ๋ ์ํฉ์ด๋ค. interface ClientAndOrderFilterProps { setParams: Dispa..
[React] ๋ฆฌ์กํธ ref ๊ฐ์ฒด ์ฌ๋ฌ๊ฐ ๋ง๋ค๊ธฐ
[React] ๋ฆฌ์กํธ ref ๊ฐ์ฒด ์ฌ๋ฌ๊ฐ ๋ง๋ค๊ธฐ
2024.05.08์ ์ โผimport { createRef } from 'react';// ํจ์ ์ปดํฌ๋ํธ ๋ณธ๋ฌธconst entriesRef = useRef(FILTER_LIST.map(() => createRef())); ์ฌ์ฉ โผ// ํจ์ ์ปดํฌ๋ํธ ๋ฆฌํด๋ฌธFILTER_LIST.map((name, i) => {name}); ๊ธ ์์ ์ฌํญ์ ๋
ธ์
ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์
[Next.js] document is not defined ์ค๋ฅ ํด๊ฒฐ ๋ฐฉ๋ฒ
[Next.js] document is not defined ์ค๋ฅ ํด๊ฒฐ ๋ฐฉ๋ฒ
2024.05.08Next.js๋ ์๋ฒ ์ฌ์ด๋์์ HTML์ ์์ฑํ๊ณ ํด๋ผ์ด์ธํธ์ ์ ๋ฌํ ํ, ํด๋ผ์ด์ธํธ์์ ๊ฐ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋ฌ์์ ์คํ ๊ฐ๋ฅํ๋๋ก ๋ง๋ ๋ค(์ด๋ฅผ Hydration์ด๋ผ๊ณ ๋ถ๋ฆ)ํ์ง๋ง ์๋ฒ ์ฌ์ด๋์์ HTML์ ์์ฑํ๋ ์์ ์ document ๊ฐ์ฒด๊ฐ ์กด์ฌํ์ง ์์ผ๋ฏ๋ก ์๋ฌ๊ฐ ๋ฐ์ํ๋ ๊ฒ. document๋ DOM(๊ฐ์ฒด์ฒ๋ผ HTML์ ์กฐ์ํ ์ ์๋ ๋ชจ๋ธ)์ ์ ๊ทผํ ๋ ์ฌ์ฉํ๋ ๊ฐ์ฒด์ด๋ฉฐ, ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์๋ง ์ ๊ทผํ ์ ์๋ค.๋๋ฌธ์ ํด๋ผ์ด์ธํธ์์ React ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋ ํ document ๊ฐ์ฒด์ ์ ๊ทผํ๋๋ก ํด์ผ ํ๋ค. react-no-ssr ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ useIsMounted ๊ฐ์ ์ปค์คํ
ํ
์ ์ฌ์ฉํ๋ฉด ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค. ๐ก useIsMounted ๊ฐ์ ์ปค์คํ
ํ
์ ๋ณดํต..
[TS] @ts-ignore, @ts-expect-error ํ์
์คํฌ๋ฆฝํธ ์ฃผ์ ์ฐจ์ด์
[TS] @ts-ignore, @ts-expect-error ํ์ ์คํฌ๋ฆฝํธ ์ฃผ์ ์ฐจ์ด์
2024.05.08@ts-ignore, @ts-expect-error ๋ ์ฃผ์ ๋ชจ๋ ํ์
์คํฌ๋ฆฝํธ์ ํ์
์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง๋ง @ts-expect-error๋ ๊ฐ๋ฐ์๊ฐ ์ค๋ฅ๋ฅผ ์ธ์ํ๊ณ ์์ผ๋ฉฐ, ์ถํ ์์ ํ ์๋๊ฐ ์์์ ๋ช
์์ ์ผ๋ก ๋ํ๋ธ๋ค. ๋ฐ๋ฉด, @ts-ignore ์ฃผ์์ ๋จ์ํ ์ค๋ฅ๋ฅผ ๋ฌด์ํ๋ค. ์ฝ๋ ์ ์ง๋ณด์๋ฅผ ์ํด ๊ฐ๋ฅํ @ts-expect-error ์ฃผ์์ ์ฌ์ฉํ๋๊ฒ ์ข๋ค. @ts-ignoreํน์ ์ฝ๋ ๋ผ์ธ์ ํ์
์ค๋ฅ๊ฐ ์๋๋ผ๋ ์ปดํ์ผ๋ฌ๊ฐ ์ด๋ฅผ ๋ฌด์ํ๋๋ก ์ง์ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ฐพ์ง ๋ชปํ๊ฑฐ๋ ์ผ์์ ์ผ๋ก ์ค๋ฅ๋ฅผ ๋ฌด์ํ๊ณ ์ถ์ ๋ ์ฌ์ฉ @ts-expect-error์ฝ๋์์ ํ์
์ค๋ฅ๊ฐ ์์๋๋ ๊ฒฝ์ฐ, ์ด๋ฅผ ๋ช
์์ ์ผ๋ก ์ ์ธํ๋ฉด์ ์ค๋ฅ๋ฅผ ๋ฌด์ํ ๋ ์ฌ์ฉ์์ํ ์ค๋ฅ๊ฐ ์ค์ ๋ก ๋ฐ์ํ์ง ์์ผ๋ฉด ํด๋น ์ฃผ์์ด ๋์ด์ ํ์ํ์ง..
[JS] ๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ฌ ๋ฌธ์์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ๋ง๋ค๊ธฐ
[JS] ๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ฌ ๋ฌธ์์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ๋ง๋ค๊ธฐ
2024.05.08๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ง ์์์ ๋๐ก charAt์ ์ธ๋ฑ์ค์ ํด๋นํ๋ ๋ฌธ์์ด์ ๋ฐํํ๊ณ , charCodeAt์ ์ ๋์ฝ๋(0~65535) ๊ฐ์ ๋ฐํํ๋คfunction capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1);}capitalizeFirstLetter('hello world') // Hello world ๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ ๋๐ก ๋ก๋ง์(๋ผํด ๋ฌธ์)์์ ์ ์ด ์๋ ์๋ฌธ์ i์ ์ ์ด ์๋ ๋๋ฌธ์ I๊ฐ ์ง์ ์ด๋ฃฌ๋ค. ๋ฐ๋ฉด ํฐํค์ด, ์์ ๋ฅด๋ฐ์ด์์ด์์ ์ ์๋ ๋ฌธ์ฤฑ, I์, ์ ์๋ ๋ฌธ์ i, ฤฐ๊ฐ ์ง์ ์ด๋ฃฌ๋ค. Istanbul์ ํฐํค์ด ์ํ๋ฒณ์ผ๋ก ์ ์ผ๋ฉด ฤฐstanbul์ด ๋๋๋ฐ ์ฒซ ๊ธ์๊ฐ ๋ฐ๋ก ์ ์๋ ..
[React] ๊ฐ์ฒด๋ฅผ prop์ผ๋ก ๋ฐ์ ๋ Default Parameter ์ง์
[React] ๊ฐ์ฒด๋ฅผ prop์ผ๋ก ๋ฐ์ ๋ Default Parameter ์ง์
2024.05.08๋ฌธ์ ๐ก ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ง์ ํ options ๊ฐ์ฒด์ size, color ์์ฑ์ ๋ชจ๋ ์ ์งํด์ผ ํ๋ ์ํฉ ์ปดํฌ๋ํธ ํน์ Prop์ ๊ธฐ๋ณธ๊ฐ์ ๊ฐ์ฒด๋ก ์ง์ ํ๊ณ , ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ณณ์์ ๊ฐ์ฒด๋ฅผ ๋๊ธฐ๋ฉด ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ง์ ํ ๊ฐ์ฒด๋ฅผ ๋ฎ์ด์ด๋ค. ์๋ ์์์์ options ํ๋กญ์ size, color ์์ฑ์ ๊ฐ๋ ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ง์ ํ์ง๋ง ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ณณ์์ size ์์ฑ๋ง ๊ฐ๋ ๊ฐ์ฒด๋ฅผ ๋๊ธฐ๋ฏ๋ก options ํ๋กญ์ { size: 5 }๊ฐ ๋๋ค.// ์ปดํฌ๋ํธ ์ ์function Child({ options = { size: 100, color: 'black' } }) { // options ํ๋กญ ๊ธฐ๋ณธ๊ฐ์ { size: 100, color: 'black' } ์ผ๋ก ์ค์ }// ์ปดํฌ๋ํธ ์ฌ์ฉreturn ;// ํ..
[HTML/CSS] ์์ ์ผ์ชฝ/์์ชฝ ๋ณ๋ถํฐ ํด๋ฆญ ์ง์ ๊น์ง ๊ฑฐ๋ฆฌ ๊ตฌํ๊ธฐ
[HTML/CSS] ์์ ์ผ์ชฝ/์์ชฝ ๋ณ๋ถํฐ ํด๋ฆญ ์ง์ ๊น์ง ๊ฑฐ๋ฆฌ ๊ตฌํ๊ธฐ
2024.05.08// left = clientRect.x, top = clientRect.yconst { height, width, top, left } = element.getBoundingClientRect();// event.clientX, event.clientY๋ ๋ง์ฐ์ค ์ด๋ฒคํธ ์์ฑconst x = event.clientX - left;const y = event.clientY - top; mouseEvent.clientX, mouseEvent.clientY : ๋ธ๋ผ์ฐ์ ํ๋ฉด ์ผ์ชฝ ์ต์๋จ์ ๊ธฐ์ค์ผ๋ก ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์ง์ ๊น์ง ์ผ๋ง๋ ๋จ์ด์ ธ ์๋์ง ๋ํ๋ด๋ ์ขํ. ๋ธ๋ผ์ฐ์ ํ๋ฉด์ด ๊ธฐ์ค์ด๋ฏ๋ก ์คํฌ๋กคํด๋ ๊ฐ์ด ๋ณํ์ง ์์.clientRect.x, clientRect.left : ํ๋ฉด ์ข์ธก๋ถํฐ ํด๋น ์๋ฆฌ๋จผํธ์ ์ผ์ชฝ ๋ณ๊น..
[HTMl/CSS] ์๋ฆฌ๋จผํธ์ ๋ชจ๋ CSS ์คํ์ผ ์์ฑ / ๊ฐ ์กฐํํ๊ธฐ
[HTMl/CSS] ์๋ฆฌ๋จผํธ์ ๋ชจ๋ CSS ์คํ์ผ ์์ฑ / ๊ฐ ์กฐํํ๊ธฐ
2024.05.08์ธ์๋ก ๋๊ธด ์์์ ์ ์ฉ๋ ๋ชจ๋ CSS ์์ฑ ์กฐํWindow.getComputedStyle(element, [pseudoElt]) const styles = getComputedStyle(element);// {0: 'accent-color', 1: 'align-content', 2: 'align-items', ...}console.log(styles); ์ธ์๋ก ๋๊ธด CSS ์์ฑ์ ๋ํ ๊ฐ ์กฐํCSSStyleDeclaration.getPropertyValue(property) const styles = getComputedStyle(element);// 'normal' (align-items์ ๋ํ ์์ฑ ๊ฐ normal ๋ฐํ)styles.getPropertyValue('align-items'); // '..
[HTML/CSS] backdrop-filter vs filter ์์ฑ ๋น๊ต
[HTML/CSS] backdrop-filter vs filter ์์ฑ ๋น๊ต
2024.05.08TL;DRbackdrop-filter : ์์ฑ์ ์ ์ฉํ ์์์ ๋ฐฐ๊ฒฝ์๋ง ํจ๊ณผ๊ฐ ์ ์ฉ๋จ. ์ฝํ
์ธ ๋ ์ํฅ ์๋ฐ์Tailwind : backdrop-blur-smCSS : backdrop-filter: blur(4px);filter : ์์ฑ์ ์ ์ฉํ ์์ ์ ์ฒด(์์์์ ํฌํจ)์ ํจ๊ณผ๊ฐ ์ ์ฉ๋จ. ์ฃผ๋ก ์ด๋ฏธ์ง ํ๊ทธ์ ์ฌ์ฉํจTailwind : blur-smCSS : filter: blur(4px);๐ก ์ฝํ
์ธ ๊ฐ ์๊ฑฐ๋ ๋ฐฐ๊ฒฝ์์ด ์ง์ ๋์ด ์์ง ์์ผ๋ฉด ํจ๊ณผ ์ ์ฉ ์๋๋ฏ๋ก ์ฃผ์ Blur ๋ฐฐ๊ฒฝ ๊ตฌํ๋ ์์ฑ ๋ชจ๋ ์ ์ฉ๋๋ ํจ๊ณผ๋ ๋์ผํ๋ filter ์์ฑ์ ์์ ์์๋ฅผ ํฌํจํ ์์ ์ ์ฒด์ ์ ์ฉ๋๋ฏ๋ก Blur ํจ๊ณผ๊ฐ ๋ค์ด๊ฐ ๋ฐฐ๊ฒฝ์ ๊ตฌํํ๋ ค๋ฉด background ์ถ๊ฐ ์์๋ฅผ ๋ณ๋๋ก ๋ง๋ค์ด์ผ ํ๋ค — ์ฐธ๊ณ ๊ธ .bac..
[HTML/CSS] Tailwind CSS ๋ค์ด๋๋ฏน ํด๋์ค ์ฌ์ฉ์ ์ฃผ์ํ ์
[HTML/CSS] Tailwind CSS ๋ค์ด๋๋ฏน ํด๋์ค ์ฌ์ฉ์ ์ฃผ์ํ ์
2024.05.08Tailwind CSS๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ฐํ์์ ํฌํจํ์ง ์๋๋ค. ์ด๋ ํด๋์ค ์ด๋ฆ์ ๋น๋ ํ์์ ์ถ์ถํ์ฌ ์ ์ ์ธ CSS ํ์ผ๋ง ๋ธ๋ผ์ฐ์ ๋ก ์ ์กํ๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ฆ, ๋ธ๋ผ์ฐ์ ์์ Tailwind CSS ๊ด๋ จ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํํ์ง ์๋๋ค. ๋๋ฌธ์ Tailwind CSS๋ ๋ฐํ์์ ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋๋ ๊ฐ์ ์์กดํ ์ ์๋ค. ๋ฐํ์์ ๋์ ์ผ๋ก ๊ฐ์ ๋ณ๊ฒฝํด์ผ ํ๋ ๊ฒฝ์ฐ Emotion ๊ฐ์ CSS-in-JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฑ์ ํ์ฉํด์ผ ํ๋ค.Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sor..
[DevTools] 1Password์์ SSH ํค ๊ด๋ฆฌํ๊ธฐ
[DevTools] 1Password์์ SSH ํค ๊ด๋ฆฌํ๊ธฐ
2024.05.081Password 8 ๋ฒ์ ๋ถํฐ SSH & Git ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค. ํ์ฌ Ed25519์ RSA ๋๊ฐ์ง ํ์
์ ์ง์ํ๋ฉฐ, ๊ธฐ์กด SSH ํค๋ฅผ ๋ถ๋ฌ์์ ์ ์ฅํ ์๋ ์๋ค. ์ฐธ๊ณ ๋ก *.pem ํ์ผ์ 1Password์ ๋ถ๋ฌ์์ ์ ์ฅํ ํ, ๊ฐ์ธํค๋ฅผ ๋ค์ ๋ค์ด๋ก๋ํด์ ์ฌ์ฉํ ๋ pem ํ์ฅ์๋ฅผ ์ถ๊ฐํด์ผ ํ๋ค. 1Password์ SSH & Git ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด SSH ๊ฐ์ธํค๋ฅผ ๋ก์ปฌ์ ์ ์ฅํ์ง ์๊ณ ๋ SSH ์ธ์ฆ์ ์งํํ ์ ์๋ค. ~/.ssh/config ํ์ผ์ ์ผ์ผ์ด SSH ํค ๊ฒฝ๋ก๋ฅผ ๋ช
์ํด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์๋ ๋ ์ ์๋ค. 1Password์์ ์์ฑํ SSH ํค๋ ๊ณต๊ฐํค์ ํ๊ฑฐ ํ๋ฆฐํธ(Finger Print)๋ฅผ ํจ๊ป ์์ฑํ๊ธฐ ๋๋ฌธ์ GitHub ๊ฐ์ ์๋น์ค์์ ๊ณต๊ฐํค ์๋์์ฑ ๊ธฐ๋ฅ๋ ์ฌ์ฉํ ..
[Algorithm] ํต ์ ๋ ฌ(Quick Sort) ์๊ณ ๋ฆฌ์ฆ ํบ์๋ณด๊ธฐ
[Algorithm] ํต ์ ๋ ฌ(Quick Sort) ์๊ณ ๋ฆฌ์ฆ ํบ์๋ณด๊ธฐ
2024.05.07ํต ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ ๊ฐ๋
ํต ์ ๋ ฌ์ ๋ถํ ์ ๋ณต ์๊ณ ๋ฆฌ์ฆ(๋ฌธ์ ๋ฅผ ๋ ์์ 2๊ฐ์ ๋ฌธ์ ๋ก ๋ถ๋ฆฌํด์ ํด๊ฒฐํ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์์ ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ)์ ํ๋๋ก ์ฐฐ์ค ์คํฐ๋ ๋ฆฌ์ฒ๋ ํธ์ด(Charles Antony Richard Hoare)๊ธฐ์ฌ๊ฐ ๊ฐ๋ฐํ๋ค. ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉํ๋ ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ์ผ๋ก ๋น ๋ฅธ ์ํ ์๋๊ฐ ํน์ง์ด๋ค. ๊ธฐ๋ณธ์ ์ธ ํต ์ ๋ ฌ์ ์๋ 3๋จ๊ณ๋ฅผ ๋ฐ๋ณตํ๋ฉฐ ์ ๋ ฌํ๋ค. ๊ธฐ์ค(Pivot; ํผ๋ฒ) ์์ ์ ํ — ์ฃผ๋ก ๋ฐฐ์ด์ ์ค๊ฐ ์์๋ฅผ ๊ธฐ์ค์ผ๋กํจ๊ธฐ์ค ์์๋ณด๋ค ์์ ์์๋ ์ผ์ชฝ์ผ๋ก ์ด๋, ๊ธฐ์ค ์์๋ณด๋ค ํฐ ์์๋ ์ค๋ฅธ์ชฝ์ผ๋ก ์ด๋์ด๋์ํจ ์ผ์ชฝ / ์ค๋ฅธ์ชฝ ์์๋ค์ ๋ํด 1~2๋ฒ ์์
๋ฐ๋ณต ๊ตฌํBasic Quick Sort๐ก ๊ตฌํํ๊ธฐ ์ฝ์ง๋ง ํญ์ ์๋ก์ด left / right ๋ฐฐ์ด์ ์์ฑํด ๋น๊ตํ ์์๋ฅผ ์ถ๊ฐํ๋ฏ๋ก ..