๐ช Programming
[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 ๊ฐ์ ์ปค์คํ
ํ
์ ๋ณดํต..
[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 ;// ํ..