๐ŸŽญ ํƒ€์ž… ๋ณ„์นญ(Type Alias)์˜ ๋งˆ๋ฒ•: TypeScript์˜ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ ๐Ÿง™โ€โ™‚๏ธ

์ฝ˜ํ…์ธ  ๋Œ€ํ‘œ ์ด๋ฏธ์ง€ - ๐ŸŽญ ํƒ€์ž… ๋ณ„์นญ(Type Alias)์˜ ๋งˆ๋ฒ•: TypeScript์˜ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ ๐Ÿง™โ€โ™‚๏ธ

 

 

์•ˆ๋…•ํ•˜์„ธ์š”, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๋งˆ๋ฒ•์‚ฌ ์—ฌ๋Ÿฌ๋ถ„! ์˜ค๋Š˜์€ TypeScript์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ธ 'ํƒ€์ž… ๋ณ„์นญ(Type Alias)'์— ๋Œ€ํ•ด ๊นŠ์ด ์žˆ๊ฒŒ ํƒ๊ตฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด ์—ฌ์ •์„ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์€ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๊ณ , ์žฌ์‚ฌ์šฉ์„ฑ์„ ๊ทน๋Œ€ํ™”ํ•˜๋ฉฐ, ๋” ์•ˆ์ „ํ•˜๊ณ  ํšจ์œจ์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋  ๊ฑฐ์˜ˆ์š”. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ์žฌ๋Šฅ์„ ๊ฑฐ๋ž˜ํ•˜๋“ฏ์ด, ์šฐ๋ฆฌ๋„ ํƒ€์ž… ๋ณ„์นญ์ด๋ผ๋Š” ์žฌ๋Šฅ์„ ์Šต๋“ํ•ด TypeScript ์„ธ๊ณ„์—์„œ ๋” ํฐ ๊ฐ€์น˜๋ฅผ ์ฐฝ์ถœํ•ด๋ด…์‹œ๋‹ค! ๐Ÿš€

๐Ÿ’ก ์•Œ๊ณ  ๊ณ„์…จ๋‚˜์š”? ํƒ€์ž… ๋ณ„์นญ์€ ๋‹จ์ˆœํžˆ ํƒ€์ž…์— ์ƒˆ๋กœ์šด ์ด๋ฆ„์„ ๋ถ™์ด๋Š” ๊ฒƒ ์ด์ƒ์˜ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์ด๋Š” ์ฝ”๋“œ์˜ ๊ตฌ์กฐ๋ฅผ ๊ฐœ์„ ํ•˜๊ณ , ๋ณต์žกํ•œ ํƒ€์ž…์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” TypeScript์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

์ž, ์ด์ œ ํƒ€์ž… ๋ณ„์นญ์˜ ์„ธ๊ณ„๋กœ ๋น ์ ธ๋“ค์–ด ๋ด…์‹œ๋‹ค. ์šฐ๋ฆฌ์˜ ์—ฌ์ •์€ ๊ธฐ๋ณธ ๊ฐœ๋…๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด ๊ณ ๊ธ‰ ๊ธฐ์ˆ ๊นŒ์ง€ ์ด์–ด์งˆ ๊ฑฐ์˜ˆ์š”. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ์ดˆ๋ณด์ž๋ถ€ํ„ฐ ์ „๋ฌธ๊ฐ€๊นŒ์ง€ ๋‹ค์–‘ํ•œ ์ˆ˜์ค€์˜ ์žฌ๋Šฅ์„ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋“ฏ์ด, ์šฐ๋ฆฌ๋„ ํƒ€์ž… ๋ณ„์นญ์˜ ๋ชจ๋“  ์ธก๋ฉด์„ ํƒํ—˜ํ•ด๋ณผ ๊ฑฐ์˜ˆ์š”. ์ค€๋น„๋˜์…จ๋‚˜์š”? ๊ทธ๋Ÿผ ์‹œ์ž‘ํ•ด๋ณผ๊นŒ์š”! ๐ŸŽฌ

๐ŸŒŸ ํƒ€์ž… ๋ณ„์นญ์˜ ๊ธฐ๋ณธ: ์ฒซ ๊ฑธ์Œ ๋–ผ๊ธฐ

ํƒ€์ž… ๋ณ„์นญ(Type Alias)์€ TypeScript์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋กœ, ํŠน์ • ํƒ€์ž…์— ์ƒˆ๋กœ์šด ์ด๋ฆ„์„ ๋ถ€์—ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ์ด๋Š” ๋งˆ์น˜ ์šฐ๋ฆฌ๊ฐ€ ์นœ๊ตฌ์—๊ฒŒ ๋ณ„๋ช…์„ ์ง€์–ด์ฃผ๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•˜์ฃ . ํ•˜์ง€๋งŒ ๋‹จ์ˆœํžˆ ์ด๋ฆ„์„ ๋ฐ”๊พธ๋Š” ๊ฒƒ ์ด์ƒ์˜ ์˜๋ฏธ๊ฐ€ ์žˆ๋‹ต๋‹ˆ๋‹ค!

๐Ÿ” ํƒ€์ž… ๋ณ„์นญ์˜ ์ •์˜: ํƒ€์ž… ๋ณ„์นญ์€ 'type' ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •์˜ํ•˜๋ฉฐ, ๊ธฐ์กด์˜ ํƒ€์ž…์— ์ƒˆ๋กœ์šด ์ด๋ฆ„์„ ๋ถ€์—ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ณต์žกํ•œ ํƒ€์ž…์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ‘œํ˜„ํ•˜๊ณ , ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํƒ€์ž… ๋ณ„์นญ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:


type UserID = string;
type UserName = string;
type UserAge = number;

type User = {
  id: UserID;
  name: UserName;
  age: UserAge;
};
  

์ด๋ ‡๊ฒŒ ์ •์˜๋œ ํƒ€์ž… ๋ณ„์นญ์€ ์ฝ”๋“œ ์ „์ฒด์—์„œ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ํ•œ ๋ฒˆ ๋“ฑ๋กํ•œ ์žฌ๋Šฅ์„ ์—ฌ๋Ÿฌ ๋ฒˆ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ง์ด์ฃ ! ๐Ÿ˜‰

๐ŸŽจ ํƒ€์ž… ๋ณ„์นญ์˜ ์žฅ์ :

  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ ํ–ฅ์ƒ
  • ํƒ€์ž… ์ •์˜์˜ ์ค‘๋ณต ์ œ๊ฑฐ
  • ๋ณต์žกํ•œ ํƒ€์ž…์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ‘œํ˜„
  • ํƒ€์ž… ๋ณ€๊ฒฝ ์‹œ ํ•œ ๊ณณ๋งŒ ์ˆ˜์ •ํ•˜๋ฉด ๋˜๋Š” ํŽธ๋ฆฌํ•จ

์ด์ œ ์šฐ๋ฆฌ๋Š” ํƒ€์ž… ๋ณ„์นญ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ดํ•ดํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๊ฒƒ์€ ์‹œ์ž‘์— ๋ถˆ๊ณผํ•ด์š”. ํƒ€์ž… ๋ณ„์นญ์€ ๋‹จ์ˆœํ•œ ํƒ€์ž…๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ณต์žกํ•œ ๊ฐ์ฒด ํƒ€์ž…, ์œ ๋‹ˆ์˜จ ํƒ€์ž…, ์ธํ„ฐ์„น์…˜ ํƒ€์ž… ๋“ฑ ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์—์„œ ํ™œ์šฉ๋  ์ˆ˜ ์žˆ๋‹ต๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์˜ ์žฌ๋Šฅ์„ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋“ฏ์ด, ํƒ€์ž… ๋ณ„์นญ๋„ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๋กœ ์šฐ๋ฆฌ๋ฅผ ๋„์™€์ค„ ๊ฑฐ์˜ˆ์š”.

๋‹ค์Œ ์„น์…˜์—์„œ๋Š” ํƒ€์ž… ๋ณ„์นญ์„ ์ข€ ๋” ์‹ฌ๋„ ์žˆ๊ฒŒ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ TypeScript ์—ฌ์ •์ด ์ ์  ๋” ํฅ๋ฏธ์ง„์ง„ํ•ด์งˆ ๊ฑฐ์˜ˆ์š”! ๐Ÿš€

๐ŸŽญ ํƒ€์ž… ๋ณ„์นญ์˜ ๋‹ค์–‘ํ•œ ์–ผ๊ตด: ๋ณต์žกํ•œ ํƒ€์ž… ๋‹ค๋ฃจ๊ธฐ

ํƒ€์ž… ๋ณ„์นญ์˜ ์ง„์ •ํ•œ ํž˜์€ ๋ณต์žกํ•œ ํƒ€์ž…์„ ๋‹ค๋ฃฐ ๋•Œ ๋ฐœํœ˜๋ฉ๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ์žฌ๋Šฅ์„ ์กฐํ•ฉํ•ด ์ƒˆ๋กœ์šด ๊ฐ€์น˜๋ฅผ ์ฐฝ์ถœํ•˜๋“ฏ, ํƒ€์ž… ๋ณ„์นญ์„ ํ†ตํ•ด ๋ณต์žกํ•œ ํƒ€์ž… ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด๋‚ผ ์ˆ˜ ์žˆ์ฃ . ์ด์ œ ๊ทธ ๋‹ค์–‘ํ•œ ์–ผ๊ตด๋“ค์„ ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณผ๊นŒ์š”? ๐ŸŽญ

1. ๊ฐ์ฒด ํƒ€์ž… ๋ณ„์นญ ๐Ÿ 

๊ฐ์ฒด ํƒ€์ž…์— ๋ณ„์นญ์„ ์ง€์ •ํ•˜๋ฉด, ๋ณต์žกํ•œ ๊ฐ์ฒด ๊ตฌ์กฐ๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


type Address = {
  street: string;
  city: string;
  country: string;
  postalCode: string;
};

type Person = {
  name: string;
  age: number;
  address: Address;
};
  

์ด๋ ‡๊ฒŒ ์ •์˜ํ•˜๋ฉด 'Person' ํƒ€์ž…์„ ์‚ฌ์šฉํ•  ๋•Œ๋งˆ๋‹ค ์ฃผ์†Œ ์ •๋ณด๋ฅผ ํฌํ•จํ•œ ์™„์ „ํ•œ ๊ตฌ์กฐ๋ฅผ ์‰ฝ๊ฒŒ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ํ”„๋กœํ•„์„ ์ž‘์„ฑํ•  ๋•Œ ์ฃผ์†Œ ์ •๋ณด๋ฅผ ํ•œ ๋ฒˆ๋งŒ ์ž…๋ ฅํ•˜๊ณ  ์—ฌ๋Ÿฌ ๊ณณ์—์„œ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•˜์ฃ !

2. ์œ ๋‹ˆ์˜จ ํƒ€์ž… ๋ณ„์นญ ๐Ÿ”€

์—ฌ๋Ÿฌ ํƒ€์ž… ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ์œ ๋‹ˆ์˜จ ํƒ€์ž…์—๋„ ๋ณ„์นญ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


type StringOrNumber = string | number;
type PaymentMethod = "cash" | "credit" | "debit";

function processPayment(amount: StringOrNumber, method: PaymentMethod) {
  // ๊ฒฐ์ œ ์ฒ˜๋ฆฌ ๋กœ์ง
}
  

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ฝ”๋“œ์˜ ์˜๋„๋ฅผ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ณ , ์žฌ์‚ฌ์šฉ์„ฑ๋„ ๋†’์•„์ง‘๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ๊ฒฐ์ œ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋„ ์œ ์—ฐํ•ด์ง€๋Š” ๊ฑฐ์ฃ !

3. ์ธํ„ฐ์„น์…˜ ํƒ€์ž… ๋ณ„์นญ ๐Ÿค

์—ฌ๋Ÿฌ ํƒ€์ž…์„ ๊ฒฐํ•ฉํ•˜๋Š” ์ธํ„ฐ์„น์…˜ ํƒ€์ž…์—๋„ ๋ณ„์นญ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


type Name = {
  firstName: string;
  lastName: string;
};

type Age = {
  age: number;
};

type Person = Name & Age;

const john: Person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};
  

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์—ฌ๋Ÿฌ ํƒ€์ž…์˜ ํŠน์„ฑ์„ ๊ฒฐํ•ฉํ•œ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ์—ฌ๋Ÿฌ ์žฌ๋Šฅ์„ ์กฐํ•ฉํ•ด ์ƒˆ๋กœ์šด ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•˜์ฃ !

4. ์ œ๋„ค๋ฆญ ํƒ€์ž… ๋ณ„์นญ ๐Ÿงฌ

ํƒ€์ž… ๋ณ„์นญ์€ ์ œ๋„ค๋ฆญ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉ๋  ๋•Œ ๋”์šฑ ๊ฐ•๋ ฅํ•ด์ง‘๋‹ˆ๋‹ค.


type Container<t> = { value: T };

const numberContainer: Container<number> = { value: 42 };
const stringContainer: Container<string> = { value: "Hello, TypeScript!" };
  </string></number></t>

์ œ๋„ค๋ฆญ์„ ์‚ฌ์šฉํ•˜๋ฉด ํƒ€์ž… ๋ณ„์นญ์„ ๋”์šฑ ์œ ์—ฐํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ํ•˜๋‚˜์˜ ์„œ๋น„์Šค ํ…œํ”Œ๋ฆฟ์„ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์— ์ ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ฃ !

๐ŸŒŸ Pro Tip: ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ์˜๋ฏธ ์žˆ๋Š” ์ด๋ฆ„์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ข‹์€ ์ด๋ฆ„์€ ์ฝ”๋“œ์˜ ์ž์ฒด ๋ฌธ์„œํ™”๋ฅผ ๋•๊ณ , ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ํฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ํƒ€์ž… ๋ณ„์นญ์˜ ๋‹ค์–‘ํ•œ ์–ผ๊ตด๋“ค์„ ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๊ฐ๊ฐ์˜ ๋ฐฉ์‹์€ ์„œ๋กœ ๋‹ค๋ฅธ ์ƒํ™ฉ์—์„œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์–ด์š”. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ์žฌ๋Šฅ๋“ค์ด ๊ฐ์ž์˜ ์ž๋ฆฌ์—์„œ ๋น›์„ ๋ฐœํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ง์ด์ฃ . ๋‹ค์Œ ์„น์…˜์—์„œ๋Š” ์ด๋Ÿฌํ•œ ํƒ€์ž… ๋ณ„์นญ๋“ค์„ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ์–ด๋–ป๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ TypeScript ์Šคํ‚ฌ์ด ํ•œ์ธต ๋” ์—…๊ทธ๋ ˆ์ด๋“œ๋  ์ค€๋น„๊ฐ€ ๋˜์—ˆ๋‚˜์š”? Let's go! ๐Ÿš€

๐Ÿ› ๏ธ ์‹ค์ „์—์„œ์˜ ํƒ€์ž… ๋ณ„์นญ ํ™œ์šฉ: ์ฝ”๋“œ์˜ ํ’ˆ๊ฒฉ์„ ๋†’์ด๋‹ค

์ด์ œ ์šฐ๋ฆฌ๋Š” ํƒ€์ž… ๋ณ„์นญ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ง„์ •ํ•œ ๋งˆ๋ฒ•์€ ์ด๋ฅผ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ๋•Œ ์ผ์–ด๋‚˜์ฃ ! ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๋ฐฐ์šด ๊ธฐ์ˆ ์„ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์šฐ๋ฆฌ๋„ ํƒ€์ž… ๋ณ„์นญ์„ ์‹ค์ „์—์„œ ํ™œ์šฉํ•ด๋ด…์‹œ๋‹ค. ๐ŸŽฉโœจ

1. API ์‘๋‹ต ํƒ€์ž… ์ •์˜ํ•˜๊ธฐ ๐Ÿ“ก

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ๋•Œ, API ์‘๋‹ต์˜ ํƒ€์ž…์„ ์ •์˜ํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

type ApiResponse<t> = {
  data: T;
  status: number;
  message: string;
};

type UserResponse = ApiResponse<user>;

async function fetchUser(id: number): Promise<userresponse> {
  // API ํ˜ธ์ถœ ๋กœ์ง
}
  </userresponse></user></t>

์ด๋ ‡๊ฒŒ ์ •์˜ํ•˜๋ฉด API ์‘๋‹ต์˜ ๊ตฌ์กฐ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ณ , ํƒ€์ž… ์•ˆ์ •์„ฑ๋„ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ์‚ฌ์šฉ์ž ํ”„๋กœํ•„์„ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ๋„ ์ •ํ™•ํ•˜๊ณ  ์•ˆ์ „ํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋Š” ๊ฑฐ์ฃ !

2. ์ƒํƒœ ๊ด€๋ฆฌ์—์„œ์˜ ํ™œ์šฉ ๐Ÿ”„

์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(์˜ˆ: Redux)๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํƒ€์ž… ๋ณ„์นญ์€ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.


type UserState = {
  currentUser: User | null;
  isLoading: boolean;
  error: string | null;
};

type AppState = {
  user: UserState;
  // ๋‹ค๋ฅธ ์ƒํƒœ๋“ค...
};

type Action = 
  | { type: 'FETCH_USER_REQUEST' }
  | { type: 'FETCH_USER_SUCCESS', payload: User }
  | { type: 'FETCH_USER_FAILURE', error: string };

function userReducer(state: UserState, action: Action): UserState {
  // ๋ฆฌ๋“€์„œ ๋กœ์ง
}
  

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ƒํƒœ์˜ ๊ตฌ์กฐ์™€ ์•ก์…˜์˜ ํƒ€์ž…์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜ํ•  ์ˆ˜ ์žˆ์–ด, ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ํ›จ์”ฌ ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ํ”„๋กœ์ ํŠธ์˜ ์ง„ํ–‰ ์ƒํƒœ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ฃ !

3. ์„ค์ • ๊ฐ์ฒด ํƒ€์ž…ํ™”ํ•˜๊ธฐ โš™๏ธ

๋ณต์žกํ•œ ์„ค์ • ๊ฐ์ฒด๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ์˜ ์•ˆ์ •์„ฑ๊ณผ ๊ฐ€๋…์„ฑ์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


type DatabaseConfig = {
  host: string;
  port: number;
  username: string;
  password: string;
  database: string;
};

type ServerConfig = {
  port: number;
  cors: {
    origin: string | string[];
    methods: string[];
  };
};

type AppConfig = {
  env: 'development' | 'production' | 'test';
  database: DatabaseConfig;
  server: ServerConfig;
};

const config: AppConfig = {
  env: 'development',
  database: {
    host: 'localhost',
    port: 5432,
    username: 'admin',
    password: 'secret',
    database: 'myapp'
  },
  server: {
    port: 3000,
    cors: {
      origin: '*',
      methods: ['GET', 'POST', 'PUT', 'DELETE']
    }
  }
};
  

์ด๋ ‡๊ฒŒ ์„ค์ • ๊ฐ์ฒด์˜ ๊ตฌ์กฐ๋ฅผ ํƒ€์ž…์œผ๋กœ ์ •์˜ํ•˜๋ฉด, ์„ค์ • ๊ฐ’์„ ์ž˜๋ชป ์ž…๋ ฅํ•˜๋Š” ์‹ค์ˆ˜๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๊ณ , ์ž๋™ ์™„์„ฑ ๊ธฐ๋Šฅ์˜ ๋„์›€๋„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ํ”„๋กœ์ ํŠธ ์„ค์ •์„ ๊ผผ๊ผผํžˆ ์ฒดํฌํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ์ฝ”๋“œ์—์„œ๋„ ์–ป์„ ์ˆ˜ ์žˆ๋Š” ๊ฑฐ์ฃ !

4. ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜์˜ ํƒ€์ž… ์ •์˜ ๐Ÿ› ๏ธ

์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜์˜ ํƒ€์ž…์„ ์ •์˜ํ•  ๋•Œ๋„ ํƒ€์ž… ๋ณ„์นญ์ด ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.


type Mapper<t u> = (item: T) => U;

type Filter<t> = (item: T) => boolean;

function map<t u>(array: T[], mapper: Mapper<t u>): U[] {
  return array.map(mapper);
}

function filter<t>(array: T[], predicate: Filter<t>): T[] {
  return array.filter(predicate);
}

// ์‚ฌ์šฉ ์˜ˆ
const numbers = [1, 2, 3, 4, 5];
const doubled = map(numbers, (n) => n * 2);
const evens = filter(numbers, (n) => n % 2 === 0);
  </t></t></t></t></t></t>

์ด๋ ‡๊ฒŒ ํ•จ์ˆ˜์˜ ํƒ€์ž…์„ ๋ณ„์นญ์œผ๋กœ ์ •์˜ํ•˜๋ฉด, ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ๊ฐ€๋…์„ฑ์ด ๋†’์•„์ง‘๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์„ ํ…œํ”Œ๋ฆฟํ™”ํ•˜์—ฌ ํšจ์œจ์„ ๋†’์ด๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ์›๋ฆฌ์ฃ !

๐Ÿ’ก ์‹ค์ „ ํŒ: ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ํ”„๋กœ์ ํŠธ์˜ ๊ตฌ์กฐ์™€ ๋ชฉ์ ์— ๋งž๊ฒŒ ์ ์ ˆํžˆ ๋ชจ๋“ˆํ™”ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ด€๋ จ๋œ ํƒ€์ž…๋“ค์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ๋ชจ์•„๋‘๊ณ , ํ•„์š”ํ•œ ๊ณณ์—์„œ ์ž„ํฌํŠธํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ์˜ ๊ตฌ์กฐ๋ฅผ ๋”์šฑ ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์‹ค์ „์—์„œ ํƒ€์ž… ๋ณ„์นญ์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋“ค์„ ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ๋ฒ•๋“ค์„ ์ ์ ˆํžˆ ํ™œ์šฉํ•˜๋ฉด, ์—ฌ๋Ÿฌ๋ถ„์˜ ์ฝ”๋“œ๋Š” ๋”์šฑ ์•ˆ์ •์ ์ด๊ณ , ์ฝ๊ธฐ ์‰ฌ์šฐ๋ฉฐ, ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•ด์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ์žฌ๋Šฅ๋“ค์ด ์กฐํ™”๋กญ๊ฒŒ ์–ด์šฐ๋Ÿฌ์ ธ ๋ฉ‹์ง„ ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์—ฌ๋Ÿฌ๋ถ„์˜ ์ฝ”๋“œ๋„ ํƒ€์ž… ๋ณ„์นญ๊ณผ ํ•จ๊ป˜ ๋”์šฑ ๋น›๋‚˜๊ฒŒ ๋  ๊ฑฐ์˜ˆ์š”! ๐ŸŒŸ

๋‹ค์Œ ์„น์…˜์—์„œ๋Š” ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•  ๋•Œ ์ฃผ์˜ํ•ด์•ผ ํ•  ์ ๋“ค๊ณผ ๊ณ ๊ธ‰ ํ…Œํฌ๋‹‰์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ TypeScript ์—ฌ์ •์ด ์ ์  ๋” ํฅ๋ฏธ์ง„์ง„ํ•ด์ง€๊ณ  ์žˆ์ง€ ์•Š๋‚˜์š”? ๊ณ„์†ํ•ด์„œ ํƒํ—˜ํ•ด๋ด…์‹œ๋‹ค! ๐Ÿš€

๐ŸŽ“ ํƒ€์ž… ๋ณ„์นญ์˜ ๊ณ ๊ธ‰ ํ…Œํฌ๋‹‰: ๋งˆ์Šคํ„ฐ์˜ ๊ธธ

์—ฌ๋Ÿฌ๋ถ„์€ ์ด์ œ ํƒ€์ž… ๋ณ„์นญ์˜ ๊ธฐ๋ณธ์„ ๋„˜์–ด ๊ณ ๊ธ‰ ์˜์—ญ์œผ๋กœ ๋ฐœ์„ ๋“ค์ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ์ดˆ๋ณด์ž์—์„œ ์ „๋ฌธ๊ฐ€๋กœ ์„ฑ์žฅํ•˜๋Š” ๊ณผ์ •์ฒ˜๋Ÿผ, ์šฐ๋ฆฌ๋„ ํƒ€์ž… ๋ณ„์นญ์˜ ๋” ๊นŠ์€ ์„ธ๊ณ„๋กœ ๋“ค์–ด๊ฐ€ ๋ด…์‹œ๋‹ค. ์ด ์„น์…˜์—์„œ๋Š” ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•  ๋•Œ์˜ ์ฃผ์˜์ ๊ณผ ํ•จ๊ป˜ ๊ณ ๊ธ‰ ํ…Œํฌ๋‹‰๋“ค์„ ์‚ดํŽด๋ณผ ๊ฑฐ์˜ˆ์š”. ์ค€๋น„๋˜์…จ๋‚˜์š”? ๐Ÿš€

1. ์กฐ๊ฑด๋ถ€ ํƒ€์ž…๊ณผ ํƒ€์ž… ๋ณ„์นญ ๐Ÿ”€

์กฐ๊ฑด๋ถ€ ํƒ€์ž…์€ TypeScript์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ํƒ€์ž… ๋ณ„์นญ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด ๋”์šฑ ์œ ์—ฐํ•œ ํƒ€์ž… ์ •์˜๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.


type IsArray<t> = T extends any[] ? true : false;

type NumberArray = number[];
type StringOrNumber = string | number;

type CheckArray1 = IsArray<numberarray>;    // true
type CheckArray2 = IsArray<stringornumber>; // false

type ElementType<t> = T extends (infer U)[] ? U : never;

type NumberArrayElement = ElementType<number>;  // number
type StringArrayElement = ElementType<string>;  // string
type NotArrayElement = ElementType<number>;       // never
  </number></string></number></t></stringornumber></numberarray></t>

์ด๋ ‡๊ฒŒ ์กฐ๊ฑด๋ถ€ ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋ฉด, ์ž…๋ ฅ๋œ ํƒ€์ž…์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํƒ€์ž…์„ ๋ฐ˜ํ™˜ํ•˜๋Š” "ํƒ€์ž… ์ˆ˜์ค€์˜ ํ•จ์ˆ˜"๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ์‚ฌ์šฉ์ž์˜ ์Šคํ‚ฌ ๋ ˆ๋ฒจ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ถ”์ฒœํ•ด์ฃผ๋Š” ์‹œ์Šคํ…œ๊ณผ ๋น„์Šทํ•˜์ฃ !

2. ๋งคํ•‘๋œ ํƒ€์ž…๊ณผ ํƒ€์ž… ๋ณ„์นญ ๐Ÿ—บ๏ธ

๋งคํ•‘๋œ ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ธฐ์กด ํƒ€์ž…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


type Readonly<t> = {
  readonly [P in keyof T]: T[P];
};

type Partial<t> = {
  [P in keyof T]?: T[P];
};

type User = {
  id: number;
  name: string;
  email: string;
};

type ReadonlyUser = Readonly<user>;
type PartialUser = Partial<user>;

// ReadonlyUser์˜ ์†์„ฑ์€ ๋ชจ๋‘ ์ฝ๊ธฐ ์ „์šฉ
// PartialUser์˜ ๋ชจ๋“  ์†์„ฑ์€ ์„ ํƒ์ 
  </user></user></t></t>

๋งคํ•‘๋œ ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ธฐ์กด ํƒ€์ž…์˜ ์†์„ฑ์„ ๋ณ€ํ˜•ํ•˜์—ฌ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์žฌ๋Šฅ๋„ท์—์„œ ๊ธฐ์กด ์„œ๋น„์Šค๋ฅผ ์•ฝ๊ฐ„ ์ˆ˜์ •ํ•˜์—ฌ ์ƒˆ๋กœ์šด ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๊ณผ ์œ ์‚ฌํ•˜์ฃ !

3. ์žฌ๊ท€์  ํƒ€์ž… ๋ณ„์นญ ๐Ÿ”„

ํƒ€์ž… ๋ณ„์นญ์€ ์ž๊ธฐ ์ž์‹ ์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์–ด, ๋ณต์žกํ•œ ์ค‘์ฒฉ ๊ตฌ์กฐ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.


type TreeNode<t> = {
  value: T;
  left?: TreeNode<t>;
  right?: TreeNode<t>;
};

const tree: TreeNode<number> = {
  value: 1,
  left: {
    value: 2,
    left: { value: 4 },
    right: { value: 5 }
  },
  right: {
    value: 3,
    left: { value: 6 },
    right: { value: 7 }
  }
};
  </number></t></t></t>

์žฌ๊ท€์  ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜๋ฉด ํŠธ๋ฆฌ ๊ตฌ์กฐ๋‚˜ ์ค‘์ฒฉ๋œ ๊ฐ์ฒด ๊ตฌ์กฐ๋ฅผ ์‰ฝ๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์žฌ๋Šฅ๋„ท์—์„œ ๋ณต์žกํ•œ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•œ ๊ฐœ๋…์ด์—์š”!

4. ์œ ๋‹ˆ์˜จ ํƒ€์ž…๊ณผ ์ธํ„ฐ์„น์…˜ ํƒ€์ž…์˜ ๊ณ ๊ธ‰ ํ™œ์šฉ ๐Ÿ”—

์œ ๋‹ˆ์˜จ ํƒ€์ž…๊ณผ ์ธํ„ฐ์„น์…˜ ํƒ€์ž…์„ ์กฐํ•ฉํ•˜์—ฌ ๋ณต์žกํ•œ ํƒ€์ž…์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


type StringOrNumber = string | number;

type WithName = { name: string };
type WithAge = { age: number };

type Person = WithName & WithAge;

type Shape = 
  | { kind: "circle", radius: number }
  | { kind: "rectangle", width: number, height: number }
  | { kind: "triangle", base: number, height: number };

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      return shape.width * shape.height;
    case "triangle":
      return 0.5 * shape.base * shape.height;
  }
}
  

์ด๋Ÿฌํ•œ ๊ณ ๊ธ‰ ํƒ€์ž… ์กฐํ•ฉ์„ ํ†ตํ•ด ๋ณต์žกํ•œ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ํƒ€์ž… ์‹œ์Šคํ…œ์œผ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ์กฐํ•ฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•œ ๊ฐœ๋…์ด์ฃ !

โš ๏ธ ์ฃผ์˜์‚ฌํ•ญ: ํƒ€์ž… ๋ณ„์นญ์„ ๊ณผ๋„ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ์˜ ๋ณต์žก์„ฑ์ด ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ญ์ƒ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ์ ์ ˆํžˆ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, ์ˆœํ™˜ ์ฐธ์กฐ๋ฅผ ์กฐ์‹ฌํ•ด์•ผ ํ•˜๋ฉฐ, ํ•„์š” ์ด์ƒ์œผ๋กœ ๋ณต์žกํ•œ ํƒ€์ž…์€ ํ”ผํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๊ณ ๊ธ‰ ํ…Œํฌ๋‹‰๋“ค์„ ๋งˆ์Šคํ„ฐํ•˜๋ฉด , ์—ฌ๋Ÿฌ๋ถ„์˜ TypeScript ์ฝ”๋“œ๋Š” ํ•œ ์ฐจ์› ๋” ๋†’์€ ์ˆ˜์ค€์œผ๋กœ ์˜ฌ๋ผ๊ฐˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ๊ณ ๊ธ‰ ๊ธฐ์ˆ ์„ ์Šต๋“ํ•œ ์ „๋ฌธ๊ฐ€๊ฐ€ ๋˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์—ฌ๋Ÿฌ๋ถ„๋„ TypeScript์˜ ์ง„์ •ํ•œ ๋งˆ์Šคํ„ฐ๋กœ ๊ฑฐ๋“ญ๋‚˜๊ฒŒ ๋  ๊ฑฐ์˜ˆ์š”! ๐Ÿ†

์ด์ œ ์šฐ๋ฆฌ๋Š” ํƒ€์ž… ๋ณ„์นญ์˜ ๊ณ ๊ธ‰ ํ…Œํฌ๋‹‰๋“ค์„ ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ์ˆ ๋“ค์„ ์ ์žฌ์ ์†Œ์— ํ™œ์šฉํ•˜๋ฉด, ๋”์šฑ ๊ฐ•๋ ฅํ•˜๊ณ  ์œ ์—ฐํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ธฐ์–ตํ•˜์„ธ์š”, ๋ชจ๋“  ๋„๊ตฌ๊ฐ€ ๊ทธ๋ ‡๋“ฏ ํƒ€์ž… ๋ณ„์นญ๋„ ์ ์ ˆํžˆ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ณผ๋„ํ•œ ์‚ฌ์šฉ์€ ์˜คํžˆ๋ ค ์ฝ”๋“œ๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์œผ๋‹ˆ ์ฃผ์˜๊ฐ€ ํ•„์š”ํ•ด์š”.

๋‹ค์Œ ์„น์…˜์—์„œ๋Š” ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ํƒ€์ž… ๋ณ„์นญ์„ ํšจ๊ณผ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฒ ์ŠคํŠธ ํ”„๋ž™ํ‹ฐ์Šค์™€ ํŒ๋“ค์„ ๊ณต์œ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์˜ TypeScript ์—ฌ์ •์ด ์ ์  ๋” ํฅ๋ฏธ์ง„์ง„ํ•ด์ง€๊ณ  ์žˆ์ง€ ์•Š๋‚˜์š”? ๊ณ„์†ํ•ด์„œ ํƒํ—˜ํ•ด๋ด…์‹œ๋‹ค! ๐Ÿš€

๐ŸŒŸ ํƒ€์ž… ๋ณ„์นญ ๋งˆ์Šคํ„ฐํ•˜๊ธฐ: ๋ฒ ์ŠคํŠธ ํ”„๋ž™ํ‹ฐ์Šค์™€ ํŒ

์ถ•ํ•˜ํ•ฉ๋‹ˆ๋‹ค! ์—ฌ๋Ÿฌ๋ถ„์€ ์ด์ œ ํƒ€์ž… ๋ณ„์นญ์˜ ๊ธฐ๋ณธ๋ถ€ํ„ฐ ๊ณ ๊ธ‰ ํ…Œํฌ๋‹‰๊นŒ์ง€ ๋ชจ๋‘ ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ์ดˆ๋ณด์ž์—์„œ ์ „๋ฌธ๊ฐ€๋กœ ์„ฑ์žฅํ•œ ๊ฒƒ์ฒ˜๋Ÿผ, ์—ฌ๋Ÿฌ๋ถ„๋„ TypeScript์˜ ํƒ€์ž… ๋ณ„์นญ ์ „๋ฌธ๊ฐ€๊ฐ€ ๋˜์–ด๊ฐ€๊ณ  ์žˆ์–ด์š”. ์ด์ œ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ์ด ์ง€์‹์„ ์–ด๋–ป๊ฒŒ ๊ฐ€์žฅ ํšจ๊ณผ์ ์œผ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์„์ง€ ์•Œ์•„๋ด…์‹œ๋‹ค. ์—ฌ๊ธฐ ๋ช‡ ๊ฐ€์ง€ ๋ฒ ์ŠคํŠธ ํ”„๋ž™ํ‹ฐ์Šค์™€ ์œ ์šฉํ•œ ํŒ๋“ค์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ๐ŸŽ“

1. ๋ช…ํ™•ํ•˜๊ณ  ์˜๋ฏธ ์žˆ๋Š” ์ด๋ฆ„ ์‚ฌ์šฉํ•˜๊ธฐ ๐Ÿ“

ํƒ€์ž… ๋ณ„์นญ์˜ ์ด๋ฆ„์€ ๊ทธ ํƒ€์ž…์˜ ๋ชฉ์ ๊ณผ ์˜๋ฏธ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.


// ์ข‹์€ ์˜ˆ
type UserID = string;
type ApiResponse<t> = { data: T; status: number; message: string };

// ํ”ผํ•ด์•ผ ํ•  ์˜ˆ
type Str = string;
type Resp<t> = { d: T; s: number; m: string };
  </t></t>

์˜๋ฏธ ์žˆ๋Š” ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์ด ๋†’์•„์ง€๊ณ , ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ํ”„๋กœ์ ํŠธ ์ œ๋ชฉ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ์›๋ฆฌ์ฃ !

2. ๊ด€๋ จ๋œ ํƒ€์ž…๋“ค์„ ๊ทธ๋ฃนํ™”ํ•˜๊ธฐ ๐Ÿ—‚๏ธ

๊ด€๋ จ๋œ ํƒ€์ž…๋“ค์„ ํ•˜๋‚˜์˜ ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋‚˜ ๋ชจ๋“ˆ๋กœ ๊ทธ๋ฃนํ™”ํ•˜๋ฉด ์ฝ”๋“œ ๊ตฌ์กฐ๊ฐ€ ๋” ๊น”๋”ํ•ด์ง‘๋‹ˆ๋‹ค.


// user.types.ts
export namespace UserTypes {
  export type ID = string;
  export type Role = 'admin' | 'user' | 'guest';
  export type User = {
    id: ID;
    name: string;
    role: Role;
  };
}

// ์‚ฌ์šฉ
import { UserTypes } from './user.types';

function getUser(id: UserTypes.ID): UserTypes.User {
  // ...
}
  

์ด๋ ‡๊ฒŒ ๊ทธ๋ฃนํ™”ํ•˜๋ฉด ๊ด€๋ จ ํƒ€์ž…๋“ค์„ ์‰ฝ๊ฒŒ ์ฐพ๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ๊ด€๋ จ๋œ ์„œ๋น„์Šค๋“ค์„ ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ๋ฌถ๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•œ ๊ฐœ๋…์ด์—์š”!

3. ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž… ํ™œ์šฉํ•˜๊ธฐ ๐Ÿ› ๏ธ

TypeScript์—์„œ ์ œ๊ณตํ•˜๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…๋“ค์„ ์ ๊ทน ํ™œ์šฉํ•˜์„ธ์š”. ์ด๋“ค์€ ํƒ€์ž… ์กฐ์ž‘์„ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.


type User = {
  id: string;
  name: string;
  email: string;
};

type PartialUser = Partial<user>;
type ReadonlyUser = Readonly<user>;
type UserKeys = keyof User;

function updateUser(user: User, fieldsToUpdate: Partial<user>) {
  // ...
}
  </user></user></user>

์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ ์ค‘๋ณต์„ ์ค„์ด๊ณ  ํƒ€์ž… ์กฐ์ž‘์„ ๋” ํšจ์œจ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ์ œ๊ณตํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋„๊ตฌ๋“ค์„ ํ™œ์šฉํ•˜์—ฌ ์ž‘์—… ํšจ์œจ์„ ๋†’์ด๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ์›๋ฆฌ์ฃ !

4. ์ธํ„ฐํŽ˜์ด์Šค์™€ ํƒ€์ž… ๋ณ„์นญ์˜ ์ ์ ˆํ•œ ์‚ฌ์šฉ ๐Ÿค

์ธํ„ฐํŽ˜์ด์Šค์™€ ํƒ€์ž… ๋ณ„์นญ์€ ๋น„์Šทํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์ง€๋งŒ, ๊ฐ๊ฐ์˜ ์žฅ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ ์ ˆํžˆ ์„ ํƒํ•˜์„ธ์š”.


// ๊ฐ์ฒด ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•  ๋•Œ๋Š” ์ฃผ๋กœ ์ธํ„ฐํŽ˜์ด์Šค ์‚ฌ์šฉ
interface User {
  id: string;
  name: string;
}

// ์œ ๋‹ˆ์˜จ ํƒ€์ž…์ด๋‚˜ ํŠœํ”Œ ํƒ€์ž…์„ ์ •์˜ํ•  ๋•Œ๋Š” ํƒ€์ž… ๋ณ„์นญ ์‚ฌ์šฉ
type Status = 'pending' | 'approved' | 'rejected';
type Coordinates = [number, number];

// ๋‘˜ ๋‹ค ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ, ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ์„ ํƒ
type Config = {
  apiUrl: string;
  timeout: number;
};
  

์ƒํ™ฉ์— ๋งž๋Š” ์ ์ ˆํ•œ ์„ ํƒ์€ ์ฝ”๋“œ์˜ ์ผ๊ด€์„ฑ๊ณผ ๊ฐ€๋…์„ฑ์„ ๋†’์—ฌ์ค๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ํ”„๋กœ์ ํŠธ์˜ ์„ฑ๊ฒฉ์— ๋”ฐ๋ผ ์ ์ ˆํ•œ ํ˜‘์—… ๋„๊ตฌ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ๊ณผ ๋น„์Šทํ•ด์š”!

5. ๋ฌธ์„œํ™” ์ฃผ์„ ํ™œ์šฉํ•˜๊ธฐ ๐Ÿ“š

๋ณต์žกํ•œ ํƒ€์ž… ๋ณ„์นญ์—๋Š” ๋ฌธ์„œํ™” ์ฃผ์„์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๊ทธ ๋ชฉ์ ๊ณผ ์‚ฌ์šฉ๋ฒ•์„ ์„ค๋ช…ํ•˜์„ธ์š”.


/**
 * API ์‘๋‹ต์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
 * @template T - ์‘๋‹ต ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…
 */
type ApiResponse<t> = {
  /** ์‘๋‹ต ๋ฐ์ดํ„ฐ */
  data: T;
  /** HTTP ์ƒํƒœ ์ฝ”๋“œ */
  status: number;
  /** ์‘๋‹ต ๋ฉ”์‹œ์ง€ */
  message: string;
};
  </t>

๋ฌธ์„œํ™” ์ฃผ์„์€ ์ฝ”๋“œ์˜ ์ž์ฒด ๋ฌธ์„œํ™”๋ฅผ ๋•๊ณ , IDE์˜ ์ž๋™ ์™„์„ฑ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๋” ๋‚˜์€ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ํ”„๋กœ์ ํŠธ ์„ค๋ช…์„ ์ƒ์„ธํžˆ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”!

๐Ÿ’ก Pro Tip: ํƒ€์ž… ๋ณ„์นญ์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ํ•ญ์ƒ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ์ตœ์šฐ์„ ์œผ๋กœ ๊ณ ๋ คํ•˜์„ธ์š”. ๋•Œ๋กœ๋Š” ๊ฐ„๋‹จํ•œ ์ธ๋ผ์ธ ํƒ€์ž…์ด ๋ณต์žกํ•œ ํƒ€์ž… ๋ณ„์นญ๋ณด๋‹ค ๋” ๋‚˜์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ ์ ˆํžˆ ํŒ๋‹จํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฌํ•œ ๋ฒ ์ŠคํŠธ ํ”„๋ž™ํ‹ฐ์Šค์™€ ํŒ๋“ค์„ ๋”ฐ๋ฅด๋ฉด, ์—ฌ๋Ÿฌ๋ถ„์˜ TypeScript ์ฝ”๋“œ๋Š” ๋”์šฑ ๊ฒฌ๊ณ ํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›Œ์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งˆ์น˜ ์žฌ๋Šฅ๋„ท์—์„œ ์ „๋ฌธ๊ฐ€๋“ค์ด ํšจ์œจ์ ์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์—ฌ๋Ÿฌ๋ถ„๋„ ํƒ€์ž… ๋ณ„์นญ์„ ๋งˆ์Šคํ„ฐํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ๋”์šฑ ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋  ๊ฑฐ์˜ˆ์š”!

ํƒ€์ž… ๋ณ„์นญ์€ TypeScript์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ด์ง€๋งŒ, ์ด๊ฒƒ์€ ์—ฌ๋Ÿฌ๋ถ„์ด ๋ฐฐ์šธ ๋งŽ์€ ๊ฒƒ๋“ค ์ค‘ ํ•˜๋‚˜์ผ ๋ฟ์ž…๋‹ˆ๋‹ค. ๊ณ„์†ํ•ด์„œ ํ•™์Šตํ•˜๊ณ  ์‹คํ—˜ํ•˜๋ฉฐ, ์—ฌ๋Ÿฌ๋ถ„๋งŒ์˜ ์ฝ”๋”ฉ ์Šคํƒ€์ผ์„ ๋ฐœ์ „์‹œ์ผœ ๋‚˜๊ฐ€์„ธ์š”. TypeScript์˜ ์„ธ๊ณ„๋Š” ๋ฌด๊ถ๋ฌด์ง„ํ•˜๋‹ต๋‹ˆ๋‹ค! ๐ŸŒŸ

๋‹ค์Œ ์„น์…˜์—์„œ๋Š” ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ํƒ€์ž… ๋ณ„์นญ์„ ํ™œ์šฉํ•œ ์‚ฌ๋ก€ ์—ฐ๊ตฌ๋ฅผ ์‚ดํŽด๋ณด๋ฉฐ, ์ด ๋ชจ๋“  ๊ฐœ๋…๋“ค์ด ์–ด๋–ป๊ฒŒ ์‹ค์ œ๋กœ ์ ์šฉ๋˜๋Š”์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ค€๋น„๋˜์…จ๋‚˜์š”? ๋” ๊นŠ์ด ์žˆ๋Š” TypeScript์˜ ์„ธ๊ณ„๋กœ ํ•จ๊ป˜ ๋– ๋‚˜๋ด…์‹œ๋‹ค! ๐Ÿš€

๐Ÿ—๏ธ ์‹ค์ œ ํ”„๋กœ์ ํŠธ ์‚ฌ๋ก€ ์—ฐ๊ตฌ: ํƒ€์ž… ๋ณ„์นญ์˜ ํž˜

์ž, ์ด์ œ ์šฐ๋ฆฌ๊ฐ€ ๋ฐฐ์šด ๋ชจ๋“  ๊ฒƒ์„ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•ด๋ณผ ์‹œ๊ฐ„์ž…๋‹ˆ๋‹ค! ๊ฐ€์ƒ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ํƒ€์ž… ๋ณ„์นญ์ด ์–ด๋–ป๊ฒŒ ์ฝ”๋“œ์˜ ํ’ˆ์งˆ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•˜๋Š”์ง€ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ๋Š” ์žฌ๋Šฅ๋„ท๊ณผ ๋น„์Šทํ•œ ์˜จ๋ผ์ธ ํ”Œ๋žซํผ์„ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ์ƒํ•ด๋ณผ๊นŒ์š”? ๐ŸŒ

ํ”„๋กœ์ ํŠธ: ์˜จ๋ผ์ธ ์Šคํ‚ฌ ๊ณต์œ  ํ”Œ๋žซํผ "SkillShare" ๐Ÿค

์ด ํ”Œ๋žซํผ์€ ์‚ฌ์šฉ์ž๋“ค์ด ์ž์‹ ์˜ ๊ธฐ์ˆ ์„ ๊ณต์œ ํ•˜๊ณ , ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๊ธฐ์ˆ ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. ์ฃผ์š” ๊ธฐ๋Šฅ์œผ๋กœ๋Š” ์‚ฌ์šฉ์ž ํ”„๋กœํ•„, ์Šคํ‚ฌ ๋“ฑ๋ก, ์ˆ˜์—… ์˜ˆ์•ฝ ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

1. ์‚ฌ์šฉ์ž ๊ด€๋ จ ํƒ€์ž… ์ •์˜ ๐Ÿ‘ค


// types/user.ts

export type UserID = string;

export type UserRole = 'student' | 'teacher' | 'admin';

export type User = {
  id: UserID;
  name: string;
  email: string;
  role: UserRole;
  skills: Skill[];
  joinDate: Date;
};

export type Skill = {
  id: string;
  name: string;
  level: 'beginner' | 'intermediate' | 'advanced';
};

export type UserProfile = Omit<user> & {
  bio: string;
  avatarUrl: string;
};
  </user>

์ด๋ ‡๊ฒŒ ํƒ€์ž…์„ ์ •์˜ํ•˜๋ฉด ์‚ฌ์šฉ์ž ๊ด€๋ จ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ์ผ๊ด€์„ฑ๊ณผ ํƒ€์ž… ์•ˆ์ •์„ฑ์„ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ์‚ฌ์šฉ์ž ํ”„๋กœํ•„์„ ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์ฃ !

2. API ์‘๋‹ต ํƒ€์ž… ์ •์˜ ๐ŸŒ


// types/api.ts

export type ApiResponse<t> = {
  data: T;
  status: 'success' | 'error';
  message: string;
};

export type PaginatedResponse<t> = ApiResponse<{
  items: T[];
  total: number;
  page: number;
  pageSize: number;
}>;

export type ErrorResponse = ApiResponse<null>;
  </null></t></t>

์ด๋Ÿฌํ•œ API ์‘๋‹ต ํƒ€์ž…์„ ์ •์˜ํ•˜๋ฉด, ๋ฐฑ์—”๋“œ์™€์˜ ํ†ต์‹ ์—์„œ ์ผ๊ด€๋œ ๊ตฌ์กฐ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ API ์—”๋“œํฌ์ธํŠธ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ ์œ ์‚ฌํ•œ ๊ฐœ๋…์ด์—์š”!

3. ์ˆ˜์—… ๊ด€๋ จ ํƒ€์ž… ์ •์˜ ๐Ÿ“š


// types/lesson.ts

import { UserID } from './user';

export type LessonID = string;

export type LessonStatus = 'scheduled' | 'ongoing' | 'completed' | 'cancelled';

export type Lesson = {
  id: LessonID;
  title: string;
  description: string;
  teacherId: UserID;
  studentIds: UserID[];
  scheduledAt: Date;
  duration: number; // in minutes
  status: LessonStatus;
  skillId: string;
};

export type LessonCreationData = Omit<lesson> & {
  status?: LessonStatus;
};

export type LessonUpdateData = Partial<omit>>;
  </omit></lesson>

์ด๋ ‡๊ฒŒ ์ˆ˜์—… ๊ด€๋ จ ํƒ€์ž…์„ ์ •์˜ํ•˜๋ฉด, ์ˆ˜์—… ์ƒ์„ฑ, ์กฐํšŒ, ์—…๋ฐ์ดํŠธ ๋“ฑ์˜ ์ž‘์—…์„ ํƒ€์ž… ์•ˆ์ „ํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ์ˆ˜์—… ์ •๋ณด๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”!

4. ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ํƒ€์ž… ์ •์˜ ๐Ÿ”„


// types/store.ts

import { User, Lesson } from './index';

export type AppState = {
  user: {
    currentUser: User | null;
    isLoading: boolean;
    error: string | null;
  };
  lessons: {
    items: Lesson[];
    isLoading: boolean;
    error: string | null;
  };
};

export type AppAction = 
  | { type: 'SET_CURRENT_USER'; payload: User }
  | { type: 'CLEAR_CURRENT_USER' }
  | { type: 'SET_USER_LOADING'; payload: boolean }
  | { type: 'SET_USER_ERROR'; payload: string }
  | { type: 'SET_LESSONS'; payload: Lesson[] }
  | { type: 'SET_LESSONS_LOADING'; payload: boolean }
  | { type: 'SET_LESSONS_ERROR'; payload: string };
  

์ด๋Ÿฌํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ํƒ€์ž…์„ ์ •์˜ํ•˜๋ฉด, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ „์—ญ ์ƒํƒœ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ์ „์ฒด ํ”Œ๋žซํผ์˜ ์ƒํƒœ๋ฅผ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ ์œ ์‚ฌํ•œ ๊ฐœ๋…์ด์—์š”!

5. ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ•จ์ˆ˜๋ฅผ ์œ„ํ•œ ํƒ€์ž… ์ •์˜ ๐Ÿ› ๏ธ


// types/utils.ts

export type Mapper<t u> = (item: T) => U;

export type AsyncOperation<t> = () => Promise<t>;

export type ValidationResult<t> = {
  isValid: boolean;
  errors: Partial<record t string>>;
};

export type Validator<t> = (data: T) => ValidationResult<t>;
  </t></t></record></t></t></t></t>

์ด๋Ÿฌํ•œ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…๋“ค์€ ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์—์„œ ์žฌ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์–ด, ์ฝ”๋“œ์˜ ์ผ๊ด€์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์—ฌ์ค๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ๋“ค์„ ๋ชจ๋“ˆํ™”ํ•˜์—ฌ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”!

๐ŸŒŸ ํ”„๋กœ์ ํŠธ ์ธ์‚ฌ์ดํŠธ: ์ด๋ ‡๊ฒŒ ํƒ€์ž… ๋ณ„์นญ์„ ํ™œ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ์˜ ํƒ€์ž… ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ด์ ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์ž์ฒด ๋ฌธ์„œํ™” ํ–ฅ์ƒ
  • ํƒ€์ž… ์•ˆ์ •์„ฑ ํ™•๋ณด๋กœ ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ ๊ฐ์†Œ
  • IDE์˜ ์ž๋™ ์™„์„ฑ ๊ธฐ๋Šฅ ๊ฐ•ํ™”๋กœ ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ
  • ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง ์‹œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์˜ ์˜ํ–ฅ ๋ฒ”์œ„๋ฅผ ์‰ฝ๊ฒŒ ํŒŒ์•… ๊ฐ€๋Šฅ
  • ํŒ€์› ๊ฐ„์˜ ์ฝ”๋“œ ์ดํ•ด๋„ ํ–ฅ์ƒ ๋ฐ ํ˜‘์—… ํšจ์œจ์„ฑ ์ฆ๋Œ€

์ด๋Ÿฌํ•œ ํƒ€์ž… ์‹œ์Šคํ…œ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์‹ค์ œ ์ปดํฌ๋„ŒํŠธ์™€ ํ•จ์ˆ˜๋“ค์„ ๊ตฌํ˜„ํ•˜๋ฉด, ํ›จ์”ฌ ๋” ์•ˆ์ •์ ์ด๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํƒ€์ž… ๋ณ„์นญ์€ ๋‹จ์ˆœํžˆ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹์„ ๋„˜์–ด, ์ „์ฒด ํ”„๋กœ์ ํŠธ์˜ ๊ตฌ์กฐ์™€ ํ’ˆ์งˆ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๋ถ„๋„ ์ด์ œ ํƒ€์ž… ๋ณ„์นญ์˜ ์ง„์ •ํ•œ ํž˜์„ ๋Š๋ผ์…จ๋‚˜์š”? ์ด๊ฒƒ์€ ๋‹จ์ˆœํ•œ ๊ธฐ๋Šฅ์ด ์•„๋‹ˆ๋ผ, ์—ฌ๋Ÿฌ๋ถ„์˜ ์ฝ”๋“œ์— ์ƒ๋ช…์„ ๋ถˆ์–ด๋„ฃ๋Š” ๋งˆ๋ฒ• ๊ฐ™์€ ์กด์žฌ์ž…๋‹ˆ๋‹ค. ์žฌ๋Šฅ๋„ท์—์„œ ๋‹ค์–‘ํ•œ ์žฌ๋Šฅ๋“ค์ด ๋ชจ์—ฌ ํ•˜๋‚˜์˜ ๋ฉ‹์ง„ ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ํƒ€์ž… ๋ณ„์นญ์„ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์˜ TypeScript ํ”„๋กœ์ ํŠธ๋„ ๋”์šฑ ๋น›๋‚˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค! ๐ŸŒŸ

์ด์ œ ์—ฌ๋Ÿฌ๋ถ„์€ ํƒ€์ž… ๋ณ„์นญ์˜ ๋ชจ๋“  ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ๋ถ„๋งŒ์˜ ๋ฉ‹์ง„ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. TypeScript์˜ ์„ธ๊ณ„๋Š” ๋ฌด๊ถ๋ฌด์ง„ํ•˜๋ฉฐ, ์—ฌ๋Ÿฌ๋ถ„์˜ ์ฝ”๋”ฉ ์—ฌ์ •์€ ์—ฌ๊ธฐ์„œ ๋๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ณ„์†ํ•ด์„œ ํ•™์Šตํ•˜๊ณ , ์‹คํ—˜ํ•˜๊ณ , ์„ฑ์žฅํ•˜์„ธ์š”. ์—ฌ๋Ÿฌ๋ถ„์˜ ๋‹ค์Œ ํ”„๋กœ์ ํŠธ๋Š” ์–ด๋–ค ๋ชจ์Šต์ผ๊นŒ์š”? ๊ทธ ๋ฏธ๋ž˜๊ฐ€ ์ •๋ง ๊ธฐ๋Œ€๋ฉ๋‹ˆ๋‹ค! ๐Ÿš€