๐คทโ๏ธ ๋ณธ๋ก
๊ฐ๋ฐ์ ํ๋ค ๋ณด๋ฉด ๊ฐ๊ฒฉํ, ๊ธ์ก์ ํ์ํด์ผ ๋ ๋๊ฐ ์์ต๋๋ค.
10000์ ๊ฐ๊ฒฉ์ ํ์ํด์ผ ๋๋ค๊ณ ๊ฐ์ ํ๋ฉด 10000 ๋ณด๋ค 10,000 ๊ฐ๊ฒฉ ํ์๊ฐ ๊ฐ๋ ์ฑ์ด ๋ ์ข์ต๋๋ค.
๊ฐ๊ฒฉํ์ ๊ธ์ก์ ๊ฐ๋ฐ์ ํ๋ฉด์ ์์ฃผ ๋ง์ฃผํ ์ ์๋ ๋ฐ์ดํฐ์ด๋ฉฐ ๋จ์ํ ์ซ์ ๊ทธ๋๋ก ํ์ํ๋ ๊ฒ๋ณด๋ค ์ฝค๋ง์ ํจ๊ป ํ์ํด ์ฃผ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ฌ์ฉ์ ํธ์์ฑ์ ์ํด์ ๊ฐ๊ฒฉํ, ๊ธ์ก์ ํ์ํ ๋ ์๋ฐ์คํฌ๋ฆฝํธ(javascript)์์ ์ฝค๋ง๋ฅผ ํ์ํ๋ ๋ค์ํ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค.
๐คทโ๏ธ 3์๋ฆฌ๋ง๋ค ์ฝค๋ง๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ
1. toLocaleString() ๋ฉ์๋ ์ฌ์ฉ
toLocaleString() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ์ซ์๋ฅผ ์ง์ญ๋ณ ํ์์ ๋ง๊ฒ ๋ณํํ ์ ์์ต๋๋ค.
์ด ๋ฐฉ๋ฒ์ ๊ฐ์ฅ ๋ง์ด ์ฐ์ด๋ ๋ฐฉ๋ฒ์ด๋ฉฐ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ ๋๋ค.
const number = 10000;
const formattedNumber = number.toLocaleString('ko-KR');
//10,000
console.log(formattedNumber);
๋ง์ด ์ฌ์ฉ๋๋ locales ์ธ์ด
toLocaleString(en-US) // ์์ด-๋ฏธ๊ตญ
toLocaleString(ko-KR) // ํ๊ตญ์ด-๋ํ๋ฏผ๊ตญ
toLocaleString(ja-JP) // ์ผ๋ณธ์ด-์ผ๋ณธ
2. ์ ๊ท ํํ์ ์ฌ์ฉ
์ ๊ท ํํ์์ ์ฌ์ฉํ์ฌ ์ซ์๋ฅผ ๋ฌธ์์ด๋ก ๋ณํํ๊ณ replace ๋ฉ์๋๋ฅผ ํ์ฉํด์ 3์๋ฆฌ๋ง๋ค ์ฝค๋ง๋ฅผ ์ฐ์ต๋๋ค.
const number = 100000;
const formattedNumber = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
//10,000
console.log(formattedNumber);
3. ์ ๊ท ํํ์ ์ฌ์ฉ
์ง์ ์ปค์คํ ํจ์๋ฅผ ๋ง๋ค์ด์ 3์๋ฆฌ ๋ง๋ค ์ฝค๋ง๋ฅผ ์ฐ์ ์ ์์ต๋๋ค.
์ด ๋ฐฉ๋ฒ์ ์ฝ๋์ค์๊ฐ ๋์ด๋์ง๋ง ์ ์ฐํ๊ฒ ์ํ๋ ์ปค์คํ ์ด ๊ฐ๋ฅํฉ๋๋ค.
function formatNumber(number) {
const parts = number.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.join('.');
}
const number = 100000;
const formattedNumber = formatNumber(number);
//10,000
console.log(formattedNumber);
๐คทโ๏ธ ๋ง์ง๋ง์ผ๋ก
๊ฐ๋ฐ์ ํ๋ค๋ณด๋ฉด ๊ฐ๊ฒฉํ, ๊ธ์ก์ ํ์ํด์ผ ๋๋ ๋ฐ์ดํฐ๋ค์ด ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ(javascript)์์ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ๊ฐ๊ฒฉํ, ๊ธ์ก์ ์ฝค๋ง๋ฅผ ์ฐ์ ์ ์์ต๋๋ค.
์์ 3๊ฐ์ง ์๋ฐ์คํฌ๋ฆฝํธ(javascript)์์ ์ฒ๋จ์ ๋ง๋ค ์ฝค๋ง๋ฅผ ์ฐ๋ ๋ฐฉ๋ฒ์ ์์๋ดค์ต๋๋ค.
์ ๋ toLocaleString ์์ฃผ ์ฌ์ฉํ๋ฉฐ ์ฌ์ฉ์ํธ์๋ฅผ ๊ณ ๋ คํด์ ๊ฐ๊ฒฉํ์ ๊ธ์ก์ ๋ฐ์ดํฐ๋ฅผ ํ์ํ ๋ ์ฝค๋ง๋ฅผ ์ฐ์ด์ฃผ๋ฉด ๊ฐ๋ ์ฑ์ ๋ ์ข์ต๋๋ค.
์ฌ๋ฐ๋ ์ค๋์ ๋ ๋ณ ์ด์ธ ๋ณด๊ณ ๊ฐ์ธ์!
https://cometruedream.tistory.com/247
[React] Tailwind ํ์ค, ๋์ค, ์ธ์ค ํจ๊ณผ className ์ปค์คํ
๐คทโ๏ธ Tailwind ํ์ค, ๋์ค, ์ธ์ค ํจ๊ณผํ๋ก์ ํธ ์งํ์ค ๋ฐฐ๋ ๋งํฌ์ URL ๊ธธ์ด๊ฐ ๋๋ฌด ๊ธธ์ด์ 3์ค ํจ๊ณผ ์ฒ๋ฆฌ๋ฅผ ํด์ผ ํ์ต๋๋ค. React + Tailwind CSS ์ ํ ๋ ํ๋ก์ ํธ ์ฌ์ CSS ํ์ผ & style ํ๊ทธ๋ฅผ ์ฌ์ฉํ
cometruedream.tistory.com
https://cometruedream.tistory.com/243
NestJS Lifecycle (์๋ช ์ฃผ๊ธฐ) ๊ฐ๋
๐คทโ๏ธ ๋ณธ๋ก ์ ์์ Nest JS ๊ฐ๋ ?Nest JS๋ Node JS ๊ธฐ๋ฐ์ผ๋ก ํ ์๋ฒ ์ดํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋นํ ์ค๋ซ๋์ Express ๊ธฐ๋ฐ์ผ๋ก ์๋ฒ ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์์ ์๋์ ์ธ ์
cometruedream.tistory.com
https://cometruedream.tistory.com/242
๋ฆฌ์กํธ Vite Proxy ํ์ฉํ CORS ์ค๋ฅ ํด๊ฒฐ
๐คทโ๏ธ ๋ณธ๋ก ์ ์์ํ๋ก ํธ์๋ ๋ฒ๋ค๋ฌ ๊ฐ๋ ๊ณผ webpack vs vite ๋น๊ต์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํ๊ณ ๊ธ์ ๋ณด์๋ฉด ๋ ๋ง์ ๋์์ด ๋ฉ๋๋ค^^ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ํ ๋ฒ๋ค๋ฌ ๊ฐ๋ ๊ณผ webpack vs vite ๋น๊ตhttps://comet
cometruedream.tistory.com
https://cometruedream.tistory.com/241
React ํด๋๊ตฌ์กฐ FSD ๊ธฐ๋ฅ ๋ถํ ์ค๊ณ ์ํคํ ์ฒ
๐คทโ๏ธ ๋ณธ๋ก ์ ์์ํ๋ก์ ํธ๋ฅผ ์์ํ๊ธฐ์ ์์ ํด๋ ๊ตฌ์กฐ, ์ค๊ณ์ ๋ํ ์ํคํ ์ฒ๋ฅผ ๋ง๋๋ ๊ฒ์ ์๋นํ ์ด๋ ต๋ค. ์ด๋ฒ ํ๋ก์ ํธ์ React FSD ํด๋๊ตฌ์กฐ ์ํคํ ์ฒ๋ฅผ ์ค๊ณํ ์์ ์ด๋ผ์ FSD ์ํคํ
cometruedream.tistory.com
https://cometruedream.tistory.com/244
์ฝ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉํ ์ ์๋ Prisma ๋ช ๋ น์ด ์ ๋ฆฌ
๐คทโ๏ธ Prisma ๋ช ๋ น์ด ๋ณธ๋ก ์ ์์ Prisma๋?Nest JS ํ๋ ์์ํฌ์ Prisma ORM์ ํ์ฉํด์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ Prisma๋ Node JS ๊ธฐ๋ฐ์ ํ๋ ์์ํฌ/๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ํธ์์ฉ์ด ์๋๋ฉฐ Prisma + DB ์ฐ๋์ผ
cometruedream.tistory.com
[์๋ฐ์คํฌ๋ฆฝํธ 2ํ] ์๋ฐ์คํฌ๋ฆฝํธ ์ซ์ ์๋ฃ๊ตฌ์กฐ์ ๊ฐ๋ ๊ณผ ๋ด์ฅํจ์
์ธ์์ ํฅํด ๋ฌ๋ ค - ์๋ฐ์คํฌ๋ฆฝํธ(javascript) ์ซ์ํ ๋ฐ์ดํฐ ์๋ฃ๊ตฌ์กฐ๋ ๋ชจ๋ ์ข ๋ฅ์ ์ํ์ ์ฐ์ฐ์ ์ํํ ์ ์๋ ์ค์ํ ๋ฐ์ดํฐ ํ์ ์ ๋๋ค. [์๋ฐ์คํฌ๋ฆฝํธ 2ํ] ์๋ฐ์คํฌ๋ฆฝํธ ์ซ์ ์๋ฃ๊ตฌ์กฐ์
fnfentermagazine.com