Node.js & TypeScript

[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] typescript keyof ํŠน์ • ๊ฐ์ฒด ์œ ๋‹ˆ์˜จ ํƒ€์ž… ๊ธฐ๋ฒ•

martinooo 2024. 7. 22. 17:55

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ

 

 

 

๐Ÿคท‍โ™‚๏ธ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ 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

 

 

https://fnfentermagazine.com/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%88%ab%ec%9e%90-%ec%9e%90%eb%a3%8c%ea%b5%ac%ec%a1%b0%ec%9d%98-%ea%b0%9c%eb%85%90%ea%b3%bc-%eb%82%b4%ec%9e%a5%ed%95%a8%ec%88%98/

 

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 2ํƒ„] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ˆซ์ž ์ž๋ฃŒ๊ตฌ์กฐ์˜ ๊ฐœ๋…๊ณผ ๋‚ด์žฅํ•จ์ˆ˜

์„ธ์ƒ์„ ํ–ฅํ•ด ๋‹ฌ๋ ค - ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(javascript) ์ˆซ์žํ˜• ๋ฐ์ดํ„ฐ ์ž๋ฃŒ๊ตฌ์กฐ๋Š” ๋ชจ๋“  ์ข…๋ฅ˜์˜ ์ˆ˜ํ•™์  ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ์ค‘์š”ํ•œ ๋ฐ์ดํ„ฐ ํƒ€์ž…์ž…๋‹ˆ๋‹ค. [์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 2ํƒ„] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ˆซ์ž ์ž๋ฃŒ๊ตฌ์กฐ์˜

fnfentermagazine.com