๐ช Programming
[JS] Lodash Import ์ฉ๋ ์ค์ด๊ธฐ ํ
[JS] Lodash Import ์ฉ๋ ์ค์ด๊ธฐ ํ
2024.05.10Lodash ๋ชจ๋์ importํ ๋ import { cloneDeep } from 'lodash' ์ด๋ ๊ฒ ์์ฑ ํ๋ฉด ํ๋ฒ์ ๋ชจ๋์ ๊ฐ์ ธ์จ๋ค. ๋ช๋ช ํจ์๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ๋ถํ์ํ import๋ฅผ ํ๋ ์
์ด ๋๋ค. ์ฐธ๊ณ ๋ก Lodash๋ ์นํฉ์ ํ๋ก๋์
๋น๋๋ก ๋ฒ๋ค๋งํ๋ฉด 25kb ์ ๋ ์ฐจ์งํ๋ค๊ณ ํ๋ค. 30kb ์ ๋์ React DOM, Vue.js์ ๋น๊ตํด๋ ๊ฝค ๋ฌด๊ฑฐ์ดํธ์ด๋ค.import { cloneDeep } from 'lodash' // 73.15 kB (gzip: 25.42 kB) import ๊ตฌ๋ฌธ์ ์๋์ฒ๋ผ ์์ฑํ๋ฉด ํ์ํ ํจ์๋ง ๋ถ๋ฌ์ฌ ์ ์๋ค. ํ์ง๋ง ์ฌ๋ฌ Lodash ํจ์๋ฅผ ์ฐ์์ ์ผ๋ก ์ฌ์ฉํ๋ chaining ํ ์ ์๋ ๋จ์ ์ด ์๋ค. ๋ฐ๋ผ์ ์๋ ๋ฐฉ๋ฒ์ ๋จ์ผ ํจ์๋ฅผ ์ฌ์ฉํ ๋ ์ ํฉํ๋ค.impo..
[React] background-image์ svg ์ฌ์ฉํ๊ธฐ (inline SVG)
[React] background-image์ svg ์ฌ์ฉํ๊ธฐ (inline SVG)
2024.05.10์์น๋ณ ํ์ผ ๊ฒฝ๋ก ๊ธฐ์คJSX ์๋ฆฌ๋จผํธ ์์ฑ์ ๋ฃจํธ ํด๋ ๊ธฐ์ค : publicCSS ํ์ผ ๋ฃจํธ ํด๋ ๊ธฐ์ค : srcํ์ผ ์ต์๋จ import ๊ตฌ๋ฌธ : src ํด๋๋ง ์ฒ๋ฆฌ ๊ฐ๋ฅ(public ํด๋์ ์๋ ํ์ผ์ ๋ถ๊ฐ) ํ๊ทธ src ์์ฑ(JSX ํ๊ทธ ์์ฑ)์ src ํด๋์ ์๋ ์ด๋ฏธ์ง ํ์ผ์ ์ง์ ํ๋ ค๋ฉด…ํ์ผ ์ต์๋จ์์ ๋ถ๋ฌ์จ ์ด๋ฏธ์ง ํ์ผ์ src ์์ฑ์ ํ ๋นํ๊ฑฐ๋,src ์์ฑ ์์์ require() ์ฌ์ฉ e.g. ๋ฌธ์ ์ํฉ JSX ์๋ฆฌ๋จผํธ ์์ฑ์ ๋ฃจํธ ํด๋ ๊ธฐ์ค์ public ํด๋๋ฏ๋ก ์ด๋ฏธ์ง ํ์ผ์ด src ํด๋์ ์๋ค๋ฉด ํ์ผ ์ต์๋จ์์ ์ด๋ฏธ์ง ํ์ผ์ import ํ ํ ์ธ๋ผ์ธ ์คํ์ผ url() ํจ์์ ์ฌ์ฉํ ์ ์๋ค. *.png, *.webp ๊ฐ์ ์ด๋ฏธ์ง ํ์ผ์ ์๋ ๋ฐฉ๋ฒ์ผ๋ก ์ ์๋ํ๋ค.// src/asse..
[JS] toISOString() ๋ฉ์๋ ์คํ์
๊ต์ ํ๊ธฐ (UTC ์๊ฐ๋ ๋ณ๊ฒฝ)
[JS] toISOString() ๋ฉ์๋ ์คํ์ ๊ต์ ํ๊ธฐ (UTC ์๊ฐ๋ ๋ณ๊ฒฝ)
2024.05.09Date.toISOString() ๋ฉ์๋๋ Date ๊ฐ์ฒด๋ฅผ ISO 8601 ํ์์ UTC ์๊ฐ์ผ๋ก ๋ณํํ๋ค. ์ฆ, ์ด๋ค ๊ฐ์ด ๋ค์ด์ค๋ ํญ์ UTC+0 ์๊ฐ์ผ๋ก ๋ณํํ ๊ฐ์ ๋ฐํํ๋ค๋ ์๋ฏธ๋ค. ํ๊ตญ์ UTC ๊ธฐ์ค์๋ณด๋ค 9์๊ฐ(540๋ถ) ๋น ๋ฅด๊ธฐ ๋๋ฌธ์(+9์๊ฐ) toISOString() ๋ฉ์๋๊ฐ ๋ฐํํ๋ ์๊ฐ๊ณผ "ํ๋ฉด์ ์ธ" ์ฐจ์ด๊ฐ ๋ฐ์ํ๋ค. ์๋ฅผ๋ค์ด ํ์ฌ ํ๊ตญ ์๊ฐ์ด 2022๋
7์ 8์ผ 01์ 56๋ถ์ด๋ผ๋ฉด toISOString ๋ฉ์๋๋ ์ด๋ณด๋ค 9์๊ฐ ๋ฆ์ 2022-07-07T16:56... ๋ฅผ ๋ฐํํ๋ค.// +09:00์ UTC ๊ธฐ์ค์ ๋ณด๋ค 9์๊ฐ ๋น ๋ฅด๋ค๋ ๊ฒ์ ๋ช
์ํ ๊ฒconst localDate = new Date('2022-07-08T01:56:00+09:00');// ์ถ๋ ฅ๊ฐ: 2022-07-07T1..
[Git] PR / Commit ๋ฉ์์ง ํค์๋๋ก ์ด์ ์ฐ๋ ๋ฐ ์ข
๋ฃํ๊ธฐ
[Git] PR / Commit ๋ฉ์์ง ํค์๋๋ก ์ด์ ์ฐ๋ ๋ฐ ์ข ๋ฃํ๊ธฐ
2024.05.09ํค์๋ ๊ธฐ๋ฅ ์๊ฐ๐ก Special Keyword ๊ธฐ๋ฅ ์๋ ์กฐ๊ฑดPR ํ๊ฒ์ด ๋ ํฌ์งํ ๋ฆฌ์ default branch ์ผ ๋PR์ base๊ฐ default branch ์ผ ๋ PR Description ํน์ Commit ๋ฉ์์ง(Subject ํน์ Description)์ ํค์๋ #์ด์๋ฒํธ๋ฅผ ์ถ๊ฐํ๋ฉด ์
๋ ฅํ ์ด์๊ฐ ์๋์ผ๋ก ๋งํฌ๋๋ฉฐ, ํด๋น Commit ํน์ PR์ ๊ธฐ๋ณธ ๋ธ๋์น(default branch)์ Merge ํ์ ๋ ๋งํฌํ ์ด์๋ ์๋์ผ๋ก ๋ซํ๋ค.git commit -m "Feat: order filter close #15" ์ฐธ๊ณ ๋ก ๋ธ๋์น ์ด๋ฆ์ ์ด์ ๋ฒํธ๋ฅผ ๊ธฐ์ฌํ๋ฉด(#889-feat-…) ์๋์ผ๋ก ์
๋ ฅํ ์ด์๋ฅผ ์ฐธ์กฐํ๋ค. ์ปค๋ฐ์ ์ถ๊ฐํ๋ฉด ํด๋น ์ด์์ ์๋ ๊ฐ์ ๋ ํผ๋ฐ์ค ํ์คํ ๋ฆฌ๊ฐ ๋จ๋๋ค.userA..
[JS] ๋ก์ผ์ผ ํตํ๋ก ์ซ์ ํฌ๋งคํ
/ ์ฒ ๋จ์๋ง๋ค ์ฝค๋ง ์ถ๊ฐํ๊ธฐ
[JS] ๋ก์ผ์ผ ํตํ๋ก ์ซ์ ํฌ๋งคํ / ์ฒ ๋จ์๋ง๋ค ์ฝค๋ง ์ถ๊ฐํ๊ธฐ
2024.05.09toCurrency์ซ์ ํ์
n ์ ์ธ์๋ก ๋ฐ์ ์ง์ ํ ํตํ ํฌ๋งท์ ๋ฐํํ๋ toCurrency ํจ์. Intl.NumberFormat ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๊ตญ๊ฐ/ํตํ์ ๋ํ sensitive formatting์ ํ์ฑํํ ์ ์๋ค. const toCurrency = (n, currency, LanguageFormat = undefined) => Intl.NumberFormat(LanguageFormat, { style: 'currency', currency, }).format(n);// €123,456.79 | currency: Euro | currencyLangFormat: LocaltoCurrency(123456.789, 'EUR'); // $123,456.79 | currency: ..
[HTML/CSS] ์คํฌ๋กค ๊ธฐ๋ฅ์ ์ ์งํ๋ฉด์ ์คํฌ๋กค๋ฐ ์จ๊ธฐ๊ธฐ
[HTML/CSS] ์คํฌ๋กค ๊ธฐ๋ฅ์ ์ ์งํ๋ฉด์ ์คํฌ๋กค๋ฐ ์จ๊ธฐ๊ธฐ
2024.05.09overflow: hidden ์์ฑ์ผ๋ก ์คํฌ๋กค๋ฐ๋ฅผ ์จ๊ธธ ์ ์์ง๋ง ์คํฌ๋กค ๊ธฐ๋ฅ์ด ์๋ํ์ง ์๋๋ค. ์คํฌ๋กค ๊ธฐ๋ฅ์ ์๋ํ๋ฉด์ ์คํฌ๋กค๋ฐ๋ง ์๊ฐ์ ์ผ๋ก ์จ๊ธฐ๋ ค๋ฉด ์๋ ์คํ์ผ์ ์ ์ฉํ๋ฉด ๋๋ค(๋ ์์ธํ ๋ด์ฉ์ W3Schools ์ฐธ๊ณ )./* Chrome, Safari, Edge, ... */.no-scrollbar::-webkit-scrollbar { display: none; }.no-scrollbar { -ms-overflow-style: none; /* IE */ scrollbar-width: none; /* Firefox */}::-webkit-scrollbar : Blink, WebKit ๋ ๋๋ง ์์ง ๊ธฐ๋ฐ์ ๋ธ๋ผ์ฐ์ ์์๋ง ์ฌ์ฉํ ์ ์๋ค.โ ๏ธ ์์ง ํ์ค์ด ์๋๋ฏ๋ก Production์์ ์ฌ์ฉํ ..
[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 ๊ฐ์ ์ปค์คํ
ํ
์ ๋ณดํต..