๐ช Programming
[HTML/CSS] ํผ์นจ/์ ํ Transition ํจ๊ณผ์ ์์ ์จ๊น ๋ฐฉ์ ์ฐจ์ด์
[HTML/CSS] ํผ์นจ/์ ํ Transition ํจ๊ณผ์ ์์ ์จ๊น ๋ฐฉ์ ์ฐจ์ด์
2024.05.10์ํฉ ์ค๋ช
๋ฐ ํด๊ฒฐ ๋ฐฉ๋ฒCSS์ transition ์์ฑ์ ์์์ ์ํ ๋ณํ์ ๋ฐ๋ฅธ ์๊ฐ์ ์ธ ๋ณํ๋ฅผ ์ ์ง์ ์ผ๋ก ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ์ฌ์ฉํ๋ค. ๊ทธ๋ฌ๋ display ์์ฑ์ด none์์ block ์ผ๋ก ๋ณ๊ฒฝ๋ ๋๋ transition ์์ฑ์ ์ฌ์ฉํด์ ์ด ๋ณํ๋ฅผ ํํํ ์ ์๋ค.display: none ์์ฑ์ ๋ ๋ ํธ๋ฆฌ์์ ์์๋ฅผ ์์ ํ ์ ๊ฑฐํ์ฌ ํ๋ฉด์์ ์ฌ๋ผ์ง๊ฒ ๋ง๋ค๊ณ , ์ด๋ก ์ธํด ์ด๋ ํ CSS ์์ฑ๋ ์ ์ฉ๋์ง ์๋๋ค. ๋ ๋ ํธ๋ฆฌ์์ ์ฌ๋ผ์ง๋ฉด ์์์ ์ํ ๋ณํ๋ฅผ ์ถ์ ํ ์ ์๊ธฐ ๋๋ฌธ์ transition ๋ณํ๊ฐ ์์๋๋ ์ง์ ์ญ์ ์ฐพ์ ์ ์๋ค.์ด ๋ฌธ์ ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐํ ์ ์๋ค.animation + display ์ฌ์ฉ : animation ์์ฑ์ ์์์ ์ํ ๋ณํ์ ์๊ด์์ด ์ ๋๋ฉ์ด์
์คํtransiti..
[HTML/CSS] ๊ตฌ๊ธ ํฐํธ ์ฌ์ฉ ๋ฐฉ๋ฒ / CSS์์ ์นํฐํธ ์ฌ์ฉํ๊ธฐ
[HTML/CSS] ๊ตฌ๊ธ ํฐํธ ์ฌ์ฉ ๋ฐฉ๋ฒ / CSS์์ ์นํฐํธ ์ฌ์ฉํ๊ธฐ
2024.05.10CSS ํ์ผ ์ต์๋จ์ @import ๊ตฌ๋ฌธ์ ์ฌ์ฉํด์ ํฐํธ๋ฅผ ๋ถ๋ฌ์ค๋ฉด CSS ํ์ผ์ด ์์ ํ ๋ก๋๋๊ณ ํ์ฑ๋ ๋๊น์ง ๋ฆฌ์์ค ๋ก๋๊ฐ ์ง์ฐ๋ผ์ ์ฑ๋ฅ ์ ํ๋ฅผ ์ด๋ํ ์ ์๋ค. ๋ฐ๋ฉด, HTML ์์์ ํ๊ทธ๋ฅผ ํตํด ํฐํธ๋ฅผ ๋ถ๋ฌ์ค๋ฉด ์ฌ๋ฌ ๋ฆฌ์์ค๋ฅผ ๋ณ๋ ฌ๋ก ๋ก๋ํ ์ ์์ด ๋ ํจ๊ณผ์ ์ด๋ค. ์ค์ ๋ก ๋ฐฉ์์ด @import ๋ณด๋ค 1.3~1.6์ด ์ ๋ ๋ ๋น ๋ฅด๊ฒ ํฐํธ๋ฅผ ๋ก๋ํ๋ค๊ณ ํ๋ค. ๊ตฌ๊ธ ํฐํธ CSS ํ์ผ ๊ฐ์ ธ์ค๊ธฐ ํ์ฌ์ฉํ๊ณ ์ถ์ ๊ตฌ๊ธ ํฐํธ ์ด๋ฆ์ ์ฃผ์์ family ๊ฐ์ ์
๋ ฅํ๋ฉด Font Family CSS ํ์ผ์ ๊ฐ์ ธ์ฌ ์ ์๋ค. ์ฐธ๊ณ ๋ก display=swap ํ๋ผ๋ฏธํฐ๋ ํฐํธ ํ์ผ ๋ก๋๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋์ ํ
์คํธ๊ฐ ๋ณด์ด์ง ์๋ ํ์์ ๋ฐฉ์ง ํ๊ธฐ ์ํด ๋์ฒด ํฐํธ๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ต์
์ด๋ค. ๊ทธ ์ธ์ wght, italic ๋ฑ ์ฌ..
[DevTools] ๊ตฌ๊ธ ํฌ๋กฌ ๋์์ธ ๋ชจ๋ (Design Mode)
[DevTools] ๊ตฌ๊ธ ํฌ๋กฌ ๋์์ธ ๋ชจ๋ (Design Mode)
2024.05.10ํ์ด์ดํญ์ค, ์ฌํ๋ฆฌ, ์ฃ์ง ๋ฑ ๋๋ถ๋ถ ๋ธ๋ผ์ฐ์ ์์ ๋์์ธ ๋ชจ๋๋ฅผ ์ง์ํ๋ค. ํฌ๋กฌ ์ฝ์์์ ๋์์ธ ๋ชจ๋๋ฅผ ํ์ฑํํ๋ฉด ์ฝ๋๋ฅผ ์ง์ ์์ ํ์ง ์๊ณ ๋ ์์ง์
์๋ํฐ์ฒ๋ผ ์์ ์ฝํ
์ธ ๋ฅผ ์์ ํ ์ ์๋ค. ์ด๋ฏธ์ง ์๋ผ๋ด๊ธฐ / ๋ถ์ฌ ๋ฃ๊ธฐ ๋ฑ์ ์์
๋ ๊ฐ๋ฅํ๋ค. ๋ฌผ๋ก ์์ ํ๋ ๋ด์ฉ์ ์๋ก๊ณ ์นจํ๋ฉด ์์๋ณต๊ท ๋๋ค. ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ(F12)๋ฅผ ์ด๊ณ document.designMode ๊ฐ์ 'on'์ผ๋ก ๋ฐ๊ฟ์ฃผ๋ฉด ๋์์ธ ๋ชจ๋๊ฐ ํ์ฑํ ๋๋ค. document.designMode = 'on'; // ๋์์ธ ๋ชจ๋ ์ผํคdocument.designMode = 'off'; // ๋์์ธ ๋ชจ๋ ๋๊ธฐ ๊ธ ์์ ์ฌํญ์ ๋
ธ์
ํ์ด์ง์ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ๋ฐ์๋ฉ๋๋ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด ์ฃผ์ธ์
[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 ๊ด์ฐฐ ๋์ ์์๋ ๋ ๋๋ง ํ์ง ์์ผ๋ฏ๋ก ๋ฌธ์ ๊ฐ ์๋๊ฒ์ฒ๋ผ ๋ณด์ด๊ธฐ ๋๋ฌธ์ ..