๐คทโ๏ธ ๋ณธ๋ก ์ ์์ ์ค์ํ ๋ฐฐ์ด ์ฌ์ ์ง์ ๊ณต๋ถํ๊ธฐ
๋ฐฐ์ด join() ํจ์ ์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด๊ธฐ
https://cometruedream.tistory.com/254
[์๋ฐ์คํฌ๋ฆฝํธ] ๋ฐฐ์ด(array)์ ์ ์ฉํ๊ฒ ํ์ฉํ ์ ์๋ join ํจ์ ๊ฐ๋ ๋ฐ ์ฌ์ฉ๋ฒ
๐คทโ๏ธ ๋ณธ๋ก ์ ์์๋ฐฐ์ด์ javascript์์ ๊ฐ์ฅ ์ค์ํ ๋ฐ์ดํฐ ์๋ฃ๊ตฌ์กฐ ์ค ํ๋์ ๋๋ค.๋ฐฐ์ด์ ๋ด์ฅํจ์๋ฅผ ํ์ฉํ๋ ๊ฒ์ javascript์์ ์ค์ํ ๋ถ๋ถ ์ค ํ๋์ด๋ฉฐ join() ๋ฐฐ์ด ๋ฉ์๋๋ ๋ฐฐ์ด์ ํฉ
cometruedream.tistory.com
๋ฐฐ์ด map(), forEach() ์ธ๊ธฐ์๋ ๋ฉ์๋ ์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด๊ธฐ
https://cometruedream.tistory.com/253
[์๋ฐ์คํฌ๋ฆฝํธ] ๋ฐฐ์ด(array)์ ์ฒ๋ฆฌํ๋ ์ธ๊ธฐ์๋ ๋ฉ์๋ map(), forEach() ๊ฐ๋ ๊ณผ ์ฐจ์ด์
๐คทโ๏ธ ๋ณธ๋ก ์ ์์์๋ฐ์คํฌ๋ฆฝํธ๋ ํ์ฌ ์น/์ฑ ๊ฐ๋ฐ ํธ๋ ๋์์ ํ์์ ์ผ๋ก ์ฌ์ฉ๋๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋๋ค. ์ฌ๋ฌ ์์ดํ ์ ์ ์ฅํ๋๋ฐ ์ฌ์ฉ๋๋ ๋ฐฐ์ด๊ณผ ์ด๋ฅผ ํ์ฑํ๋ฉฐ ์๋ก์ด ๋ฐ์ดํฐ๋ฅผ
cometruedream.tistory.com
ํ์ฉ๊ฐ์น๊ฐ ์ข์ every(), some() ํจ์ ์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด๊ธฐ
https://cometruedream.tistory.com/250
[์๋ฐ์คํฌ๋ฆฝํธ] ํ์ฉ๊ฐ์น๊ฐ ์ข์ ๋ด์ฅํจ์์ every(), some() ํจ์์ ๊ฐ๋ ๋ฐ ํ์ฉ๋ฒ
๐คทโ๏ธ ์๋ฐ์คํฌ๋ฆฝํธ ๋ด์ฅ ํจ์๋?์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํจ์จ์ ์ผ๋ก ํ์ฉํ๋ ค๋ฉด ๋ด์ฅ ํจ์๋ฅผ ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.๋ด์ฅ ํจ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฏธ๋ฆฌ ์ ์ธ๋ ํจ์๋ก, ํธ์ถ๋ง์ผ๋ก ์ฌ์ฉํ ์ ์์ต
cometruedream.tistory.com
๐คทโ๏ธ reduce ํจ์๋?
javascript์ reduce() ๋ด์ฅํจ์๋ ๋ฐฐ์ด์ ์์๋ค์ ์์ฐจ์ ์ผ๋ก ์ฒ๋ฆฌํ์ฌ ํ๋์ ๊ฐ์ ์ป์ ์ ์๋ ํจ์์ ๋๋ค.
์ด ํจ์๋ ๋ฐฐ์ด์ ์ํํ๋ฉด์ ๊ฐ๊ฐ์ ์์์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์คํํ์ฌ ์ฝ๋ฐฑ ํจ์์ ๋ฐํ๊ฐ์ ๋ค์ ์์์ ๋ํ ์ฝ๋ฐฑ ํจ์ ์คํ ์ ์ ๋ฌ๋๋ “๋์ ๊ฐ”์ด ๋ฉ๋๋ค.
reduce() ๋ฉ์๋์ ๋ํด ์์ธํ ์ดํดํ๋ฉด
๐ก reduce ๋ด์ฅํจ์๋ ๋ฐฐ์ด์ ์์๋ฅผ ์์ฐจ์ ์ผ๋ก ์ํํ๋ฉฐ ์ซ์, ๋ฐฐ์ด, ๊ฐ์ฒด๋ฅผ ํ๋์ ๊ฐ์ผ๋ก ์ค์ฌ ๋ฐํํ๋ ํจ์์ ๋๋ค.
์ฆ ๋ฐฐ์ด์ ๊ธฐ๋ฐ์ผ๋ก ํ๋์ ๊ฐ์ ๋์ถํ ๋ ๋ง์ด ์ฌ์ฉ๋ฉ๋๋ค.
๐คทโ๏ธ reduce ํจ์์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ
reduce() ํจ์๋ ๋ค์๊ณผ ๊ฐ์ ํํ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
arr.reduce(callback(accumulator, currentValue, index, array), initialValue);
// ๋ฐฐ์ด.reduce(callback(๋์ ๊ฐ, ํ์ฌ๊ฐ, ์ธ๋ฑ์ค, ์์), ์ด๊ธฐ๊ฐ);
- accumulator: ์ด์ ์ ์ฝ๋ฐฑ ํจ์์์ ๋ฐํ๋ ๋์ ๊ฐ (์ต์ด ์คํ ์ initialValue ์ ๋ฌ๋ฉ๋๋ค ์์ผ๋ฉด array[0] ์ ๋ฌ๋ฉ๋๋ค.)
- currentValue: ํ์ฌ ์ธ๋ฐ์ค ๋ฐฐ์ด์ ์์
- currentIndex: ํ๋ ๋ฐฐ์ด์ ์ธ๋ฑ์ค (์ ํ์ฌํญ)
- array: ์๋ ๋ฐฐ์ด (์ ํ์ฌํญ)
reduce() ํจ์์ ์ค์ํ 4๊ฐ์ง ์ฝ๋ฐฑ ์ธ์ ๊ฐ๋ค์ ๋ํด์ ์์๋ณด์์ต๋๋ค.
currentIndex์ array ์ธ์ ๊ฐ์ ์ ํ์ ์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ ๋ ์ฃผ๋ก accumulator๊ณผ currentValue ์ธ์ ๊ฐ์ผ๋ก ๋ค์ํ ๊ฒฐ๊ณผ๋ฌผ์ ๋์ถํ๋ ๋ฐ ์ฌ์ฉํฉ๋๋ค.
1. reduce() ๋ง์ด ์ฌ์ฉ๋๋ ํ์ฉ ์์?
์ซ์ ๋ฐฐ์ด์ ํฉ ๊ตฌํ๊ธฐ
const arr = [1, 2, 3, 4, 5]
// accumulator, currentValue, currentIndex ์ธ์๊ฐ์ acc, cur, idx ์ค์ฌ์ ๋ง์ด ์ฌ์ฉํฉ๋๋ค.
arr.reduce(function (acc, cur, idx) {
console.log(acc, cur, idx);
return acc + cur;
}, 0); //์ด๊ธฐ๊ฐ 0 ์
ํ
// ๊ฒฐ๊ณผ๊ฐ 15
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋ชจ๋์์ ์์ ์ฝ๋๋ฅผ ์คํ์ ์์ธํ๊ฒ ์ฝ๋์ ๋ก์ง์ ์๋ ค์ค๋๋ค.
- accumulator: ๋ฐฐ์ด์ ์์๋ฅผ ์ํํ๋ฉด์ ์ถ์ ๋ ๊ฐ
- currentValue: ํ์ฌ ๋ฐฐ์ด์ ์์์ ๊ฐ
- currentIndex: ํ์ฌ ๋ฐฐ์ด์ index ๊ฐ
๋ฐฐ์ด ์์ ๊ฐ์ฒด์ ๋์ด์ ์ดํฉ ๊ตฌํ๊ธฐ
const users = [
{ name: "์ฒ ์", age: 26 },
{ name: "๋ฏผ์ง", age: 35 },
{ name: "ํ์", age: 10 },
{ name: "ํฌ์", age: 64 },
{ name: "์์", age: 29 },
];
const totalAge = users.reduce((accumulator, currentValue) => {
return accumulator + currentValue.age;
}, 0);
// ๊ฒฐ๊ณผ๊ฐ 164
๋ฐฐ์ด ์์ ๊ฐ์ฒด์ ์ดํฉ์ reduce() ๋ด์ฅํจ์๋ฅผ ์ฌ์ฉํด์ ์ฝ๊ฒ ๊ตฌํ ์ ์์ต๋๋ค.
๊ฐ๋ฐ์๋ค์ for ๋ฌธ์ ์ฌ์ฉํ๋ ๊ฒ์ ์ง์ํ๋ ค๊ณ ๋ ธ๋ ฅํฉ๋๋ค.
๊ทธ๋์ reduce() ์ฌ์ฉํด์ ์ฑ๋ฅ๊ณผ ๊ฐ๋ ์ฑ๊ณผ ์ฝ๋ ์๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
2. reduce() ๋ง์ด ์ฌ์ฉ๋๋ ํ์ฉ ์์2?
์ซ์ ๋ฐฐ์ด์ ์ต๋๊ฐ ๊ตฌํ๊ธฐ
const numbers = [10, 3, 20, 15, 7, 100];
numbers.reduce((accumulator, currentValue) => {
return Math.max(accumulator, currentValue);
}, numbers[0]); //numbers ๋ฐฐ์ด์ ์ฒซ๋ฒ์งธ ๊ฐ์ ์ด๊ธฐ๊ฐ์ผ๋ก ์
ํ
// ๊ฒฐ๊ณผ๊ฐ 100
๋ฐฐ์ด์ ์ํํ๋ฉด์ ์ต๋๊ฐ์ ์ฐพ์์ ์์ต๋๋ค.
๋ฐฐ์ด์์ ๋ฌธ์์ด์ ๋ฑ์ฅ ํ์ ๊ตฌํ๊ธฐ
const words = ["apple", "banana", "apple", "orange", "banana", "orange", "apple"];
words.reduce((accumulator, currentValue) => {
accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
return accumulator;
}, {}); //์ด๊ธฐ๊ฐ์ ๋น๊ฐ์ฒด๋ก ์
ํ
//๊ฒฐ๊ณผ๊ฐ {apple: 3, banana: 2, orange: 2}
๋ฐฐ์ด์ ์ํํ๋ฉด์ ๋ฐฐ์ด์์ ๋ฌธ์์ด์ ๋ฑ์ฅ ํ์๋ฅผ ๊ตฌํ ์ ์์ต๋๋ค.
๐คทโ๏ธ ๋ง์ง๋ง์ผ๋ก
๋ค์ํ ์์ ๋ฅผ ํตํด์ reduce() ํจ์์ ์ฌ์ฉ๋ฒ์ ๊ณต๋ถํ์ต๋๋ค.
์ง๊ธ ์ ๋ ํจ์ ํํ๋ก ์์๋ฅผ ๋ค์์ง๋ง ์ต์ ๋ฌธ๋ฒ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํด์ ๋ ๊ฐ๊ฒฐํ ์ฝ๋๋ก ๊ตฌ์ฑํ ์๋ ์์ต๋๋ค.
reduce() ๋ด์ฅํจ์์ 4๊ฐ์ง ์ธ์ ๊ฐ์ ํ์ฉํด์ ๋ค์ํ ์์ ์ ํจ์จ์ ์ด๊ณ ์ฝ๋๋ฅผ ๊ฐ์ํํด์ ์์ ์ ํ ์ ์์ต๋๋ค.
๋ํ, ์ด ํจ์๋ ๋ฐฐ์ด์ ์์๋ค์ ์ํํ๋ฉด์ ์ํ๋ ํํ์ ๊ฒฐ๊ณผ๊ฐ์ ๋์ถํ๋๋ฐ ์์ฃผ ์ ์ฉํ๋ฉฐ ๊ฐ๋ฐ์๋ค์๊ฒ ํธ๋ฆฌํจ์ ์ ๊ณตํฉ๋๋ค.
์ฌ๋ฐ๋ ์ค๋์ ๋ ๋ณ ์ด์ธ ๋ณด๊ณ ๊ฐ์ธ์!
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