๐คทโ๏ธ ํ์ ์คํฌ๋ฆฝํธ keyof๋?
์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์กด์ฌํ์ง ์๋ keyof ์ฐ์ฐ์์ ๋๋ค.
ํ์ ์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ํผ์ ์ด๋ฉฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ปดํ์ผํด์ ์คํํฉ๋๋ค.
ํ์ ์คํฌ๋ฆฝํธ์์ keyof ํ์ ์ฐ์ฐ์๋ ์ฃผ์ด์ง ๊ฐ์ฒด์ ๋ชจ๋ ์์ฑ์ key๊ฐ์ ์ ๋์จ ํ์ ์ผ๋ก ๋ฐํํฉ๋๋ค.
์ด keyof ์ฐ์ฐ์๋ฅผ ํ์ฉํ๋ฉด ๋ ์์ ํ๊ณ ๊ฐ๋ ฅํ ์ฝ๋๋ก ์ ์ง๋ณด์ํ ์ ์์ต๋๋ค.
[ํ์ ์คํฌ๋ฆฝํธ] ํ์ ์คํฌ๋ฆฝํธ ๊ฐ๋ ๊ณผ ์ค๋ฌด์ ์ ์ฉํ Type Narrowing ๊ธฐ๋ฒ
https://cometruedream.tistory.com/265
[ํ์ ์คํฌ๋ฆฝํธ] ํ์ ์คํฌ๋ฆฝํธ ๊ฐ๋ ๊ณผ ์ค๋ฌด์ ์ ์ฉํ Type Narrowing ๊ธฐ๋ฒ
๐คทโ๏ธ ํ์ ์คํฌ๋ฆฝํธ๋?์์ฆ ํ์ ์คํฌ๋ฆฝํธ(typescript)๋ ๊ตญ๋ฃฐ์ฒ๋ผ ํ๋ฐํธ์๋, ๋ฐฑ์๋์์ ๋ง์ด ์ฌ์ฉ๋๋ ์คํ์์ค ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋๋ค.์ ๋ํ ํ์ ์คํฌ๋ฆฝํธ ํ์ฉํ๋ฉฐ ๋์ฑ ์์ ํ๊ณ ์ข
cometruedream.tistory.com
๐คทโ๏ธ keyof ๊ธฐ๋ณธ ๊ฐ๋ ?
1. keyof ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
interface Person {
name: string;
age: number;
address: string;
}
type PersonKeys = keyof Person; // "name" | "age" | "address"
Person ๊ฐ์ฒด ํ์ ์ ์์ฑ name, age, address๋ฅผ ์ ๋์จ ํ์ ์ผ๋ก ๋ง๋ค์ด์ PersonKeys ํ์ ์ ์ ์ฅํฉ๋๋ค.
PersonKeys์ Person ๊ฐ์ฒด ํ์ ์ ์์ฑ์ ์ ๋์จ ํ์ "name" | "age" | "address" ์ ์๋ฉ๋๋ค.
2. ๊ฐ์ฒด์ ์์ฑ์ ์ ๋์จ ํ์ ์ผ๋ก ๋ณํ
interface Car {
make: string;
model: string;
year: number;
}
type CarKeys = keyof Car; // "make" | "model" | "year"
const key: CarKeys = "model"; // ์ ํจํจ
const invalidKey: CarKeys = "color";
// ์ค๋ฅ: "color"๋ "make" | "model" | "year" ์ค ํ๋๊ฐ ์๋๋๋ค.
์ ์์ ์ฒ๋ผ Carkeys๋ keyof ์ฐ์ฐ์๋ฅผ ํ์ฉํด์ Car ๊ฐ์ฒด ์์ฑ์ “make”, “model”, “year” ์ ๋์จ ํ์ ์ผ๋ก ๋ณํํด์ key ํ์ ์ผ๋ก ์ ์ํฉ๋๋ค.
“model” ์ ๋์จํ์ ์์ฑ์ด๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๊ฐ ๋ฐ์๋์ง ์์ต๋๋ค.
ํ์ง๋ง “color” ์ ๋์จํ์ ์์ฑ์ด ์๋๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
3. ๊ฐ์ฒด ์์ฑ key์ ํ์ฉํ ํจ์
interface User {
username: string;
email: string;
password: string;
}
function getProperty<T>(obj: T, key: keyof T): T[keyof T] {
return obj[key];
}
const user: User = {
username: 'john_doe',
email: 'john@example.com',
password: 'secret',
};
const username = getProperty(user, 'username'); // "john_doe"
const email = getProperty(user, 'email'); // "john@example.com"
const invalid = getProperty(user, 'nonexistent');
// ์ค๋ฅ: 'nonexistent'๋ 'username' | 'email' | 'password' ์ค ํ๋๊ฐ ์๋๋๋ค.
์ด ํจ์๋ ๊ฐ์ฒด์ ์์ฑ key์ ๋ฐ์ ํด๋น ๊ฐ์ฒด์ ์์ฑ ๊ฐ์ ๋ฐํํฉ๋๋ค.
๐คทโ๏ธ keyof ์ฐ์ฌ์๋ฅผ ์ฌ์ฉํ๋ ์ด์
- keyof๋ ๊ฐ์ฒด ํ์ ์ ๋ชจ๋ ์์ฑ ์ด๋ฆ์ ์ ๋์จ ํ์ ์ผ๋ก ์ถ์ถํ๋ ์ฐ์ฐ์์ ๋๋ค.
- keyof๋ฅผ ํตํด ํ์ ์์ ์ฑ์ ๋์ด๊ณ ๋ ๊ฐ๋ ฅํ๊ฒ ์ฝ๋๋ฅผ ๊ด๋ฆฌํ๊ณ , ์ฝ๋์์ ์์ฑ ์ด๋ฆ์ ๋์ ์ผ๋ก ์ฌ์ฉํ ์ ์๊ฒ ๋ฉ๋๋ค.
- keyof๋ฅผ ํ์ฉํ๋ฉด ๊ฐ์ฒด์ ์์ฑ ์ด๋ฆ์ ๊ธฐ๋ฐ์ผ๋ก ๋ ์์ ํ ํจ์๋ ํ์ ์ ์ ์ํ ์ ์์ต๋๋ค.
๐คทโ๏ธ ๋ง์ง๋ง์ผ๋ก
ํ์ ์คํฌ๋ฆฝํธ ์ฌ์ฉํ๋ค๋ณด๋ฉด ๋ค์ํ ๊ฐ์ฒด ์์ฑ์ ํ์ ์ ์ธํ ํด์ผ ๋ ๋๊ฐ ์์ต๋๋ค.
keyof ์ฐ์ฐ์๋ฅผ ํ์ฉํด์ ๊ฐ์ฒด ์์ฑ์ ์ ๋์จ ํ์ ์ผ๋ก ๋ณํํด์ ํ์ ์์ ์ฑ๊ณผ ๋ ๊ฐ๋ ฅํ ์ฝ๋๋ก ์ ์ง๋ณด์ ํ ์ ์์ต๋๋ค.
keyof ์ฐ์ฐ์๋ ํ์ ์คํฌ๋ฆฝํธ์์ ํ ๋ฒ์ฏค์ ๋ณผ ์ ์๋ ํ์ ์ฐ์ฐ์์ด๋ฉฐ keyof๊ฐ ์ด๋ค ์ฉ๋๋ก ์ฌ์ฉํ๊ณ ์ ์ํ๋์ง ๊ถ๊ธํ๊ฑฐ๋ ์ ๋ชจ๋ฅผ ์ ์์ต๋๋ค.
์ด ๊ธ์ ํตํด์ ํ์ ์คํฌ๋ฆฝํธ์ keyof ์ฐ์ฐ์๋ฅผ ์ดํดํ๊ณ ์ ํ์ฉํ ์ ์์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.
์ฌ๋ฐ๋ ์ค๋์ ๋ ๋ณ ์ด์ธ ๋ณด๊ณ ๊ฐ์ธ์!
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