๐ช Programming
[JS] Array.flatMap ๋ฉ์๋ ํ์ฉ๋ฒ
[JS] Array.flatMap ๋ฉ์๋ ํ์ฉ๋ฒ
2024.05.09flatMap() ๋ฉ์๋๋ ์ฝ๋ฐฑ์ด ๋ฐํํ๋ ๊ฐ์ด ๋ฐฐ์ด์ด๋ฉด 1 ๋์ค๊น์ง ํผ์ณ์ ๋ฐํํ๋ค. map(), flat() ๋ฉ์๋๋ฅผ ์ฒด์ด๋ํ ๊ฒ๊ณผ ๋์ผํ ํจ๊ณผ๋ฅผ ๊ฐ์ง๋ค. e.g. arr.map(...args).flat()const numbers = [1, 2, 3, 4, 5];numbers.map((n) => [n * 2]); // [[1], [2], [3], [4], [5]]numbers.flatMap((n) => [n * 2]); // [2, 4, 6, 8, 10]const sayHello = ['Hello', 'World'];sayHello.map((word) => word.split('')); // [['H', 'e', 'l', 'l', 'o'], ['W', 'o', 'r', 'l', 'd']]sayHell..
[JS] ์ํ๋ ํฌ๋งท์ผ๋ก ๋ ์ง ๋ณํ — toLocaleDateString
[JS] ์ํ๋ ํฌ๋งท์ผ๋ก ๋ ์ง ๋ณํ — toLocaleDateString
2024.05.09Date.toLocaleDateString([locale[, options]]) Date.toLocaleDateString() ๋ฉ์๋๋ ๋ ์ง๋ฅผ ์ง์ ๋ ๋ก์ผ์ผ์ ๋ฌธ์์ด ํํ์ผ๋ก ๋ณํํ๋ค. ์ฒซ ๋ฒ์งธ ์ธ์์ธ ๋ก์ผ์ผ(locale) ๋ฌธ์์ด์ ์ง์ ํ๋ฉด ํด๋น ์ธ์ด ๋ฐ ๊ตญ๊ฐ์ ์ ํฉํ ๋ ์ง ํ์์ ๋ฐํํ๋ค. ๋ก์ผ์ผ์ ๋ช
์ํ์ง ์์๋ค๋ฉด ์น ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ๋ก์ผ์ผ window.navigator.language ๊ฐ์ ์ฌ์ฉํ๋ค. ๋ ๋ฒ์งธ ์ธ์์ธ options๋ ๋ ์ง ํ์์ ๋ ์์ธํ๊ฒ ์ง์ ํ ์ ์๋ ์ต์
๊ฐ์ฒด๋ค. ์ฐ๋, ์, ์ผ ๋ฑ์ ํํ ๋ฐฉ์์ ์ํ๋ ๋ฐฉ์์ผ๋ก ์ค์ ํ ์ ์๋ค. ๋ ์์ธํ ๋ด์ฉ์ MDN ์ฐธ๊ณ .new Date().toLocaleDateString('en-US'); // '7/1/2022'new Date().t..
[React] useInfiniteQuery + IO API ์ฌ์ฉ์ ๋ฌดํ ๋ ๋๋ง ๋ฌธ์ ํด๊ฒฐ
[React] useInfiniteQuery + IO API ์ฌ์ฉ์ ๋ฌดํ ๋ ๋๋ง ๋ฌธ์ ํด๊ฒฐ
2024.05.09๋ฌธ์ ์์ธ๋ ๋๋ง ๋ฐ์ดํฐ์ ๋ง์ง๋ง ์ธ๋ฑ์ค ์์น์ IO(Intersection Observer) ๊ด์ฐฐ ์์๋ฅผ ํ์ํ๋ ๋ฐฉ์์ ๋ฌดํ ๋ ๋๋ง ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค. ๋ฐ์ดํฐ๊ฐ 1~2๊ฐ ๋ฐ์ ์์ด์ ๊ด์ฐฐ ์์๊ฐ ํญ์ ํ๋ฉด์ ๋ค์ด์จ๋ค๋ฉด โfetchNextPage ์คํ(React Query ํ
์ด ๋ฐํํ๋ ํจ์) → โ๊ธฐ์กด ๋ฐ์ดํฐ ๋ฐํ → โ๋ ๋ → โIO ํ๋ฉด์ ๋ค์ด์ด → โfetchNextPage ์คํ → ๋ฐ๋ณต… ์ ๊ณผ์ ์ ๊ณ์ ๋ฐ๋ณตํ๋ฉด์ ๋ฌดํ ๋ ๋๋งํ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. Query Key๊ฐ ๋ฐ๋์ง ์์์ ๋ฐ์ดํฐ fetch ์์ด ์บ์ฑํ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ง๋ง ๋ฌดํ ๋ ๋๋ง ๋๋ฌธ์ ์ดํ๋ฆฌ์ผ์ด์
์ด ์ ์์ ์ผ๋ก ์๋ํ์ง ์๋๋ค. ๋ฐ์ดํฐ๊ฐ ์์ ์๋ค๋ฉด IO ๊ด์ฐฐ ๋์ ์์๋ ๋ ๋๋ง ํ์ง ์์ผ๋ฏ๋ก ๋ฌธ์ ๊ฐ ์๋๊ฒ์ฒ๋ผ ๋ณด์ด๊ธฐ ๋๋ฌธ์ ..
[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..