Zoeeey
Stack flows in you
Zoeeey
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (155)
    • ๐Ÿ’ก UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • ๐ŸŸจ JavaScript (66)
      • ๊ฐœ๋… (42)
      • ์ •๋ฆฌ (2)
      • ๋ฌธ์ œํ’€๊ธฐ (ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค, ์ฝ”๋”ฉ์• ํ”Œ) (15)
      • ์‘์šฉํ•˜์—ฌ ์ž๋™ํ™”or๋ฌธ์ œํ•ด๊ฒฐํ•˜๊ธฐ (2)
      • ๊ธฐํƒ€ (5)
    • โš›๏ธ React (49)
      • ๊ฐœ๋… (27)
      • ๊ฐœ๋…(Redux) (3)
      • ์ •๋ฆฌ (4)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ: React) (15)
    • ๐Ÿ“˜ TypeScript (10)
      • ๊ฐœ๋… (8)
      • ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ) (2)
    • ๐ŸŒ HTML,CSS (18)
      • ์‹ค๋ฌด์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜๋“ค (10)
      • ๋’ค๋Šฆ๊ฒŒ ์•Œ์•„์„œ ๋ผˆ์•„ํ”ˆ ์œ ์šฉํ•œ CSS (6)
      • ๊ธฐํƒ€ ์ž์ฃผ ์“ฐ๋Š” CSS (2)
    • ๐Ÿ’ป CS (8)
      • CS (5)
      • ์ •๊ทœํ‘œํ˜„์‹ (2)
      • Git,Github (1)

ํƒœ๊ทธ

  • class
  • json
  • object
  • ์˜ค๋ฅ˜
  • Props
  • ์‚ผํ•ญ์—ฐ์‚ฐ์ž
  • Ajax
  • CS
  • JavaScript
  • UXUI
  • CSS
  • array
  • react
  • redux
  • TypeScript
  • state
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • axios
  • useEffect
  • ์ฝ”๋”ฉ์• ํ”Œ
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
hELLO ยท Designed By ์ •์ƒ์šฐ.
Zoeeey

Stack flows in you

๐Ÿ“˜ TypeScript/๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ)

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ˆ™์ œ Part 2 (5~9) : ํด๋ž˜์Šค, ์˜ค๋ธŒ์ ํŠธ ํƒ€์ž…์ง€์ •

2023. 12. 20. 20:12

Car ํด๋ž˜์Šค ๋งŒ๋“ค๊ธฐ

  1. { model : '์†Œ๋‚˜ํƒ€', price : 3000 } ์ด๋ ‡๊ฒŒ ์ƒ๊ธด object๋ฅผ ๋ณต์‚ฌํ•ด์ฃผ๋Š” class๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.
  2. ๊ทธ๋ฆฌ๊ณ  ๋ณต์‚ฌ๋œ object ์ž๋ฃŒ๋“ค์€ .tax() ๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ๋ฐ ํ˜„์žฌ object์— ์ €์žฅ๋œ price์˜ 10๋ถ„์˜1์„ ์ถœ๋ ฅํ•ด์ฃผ์–ด์•ผํ•œ๋‹ค.
  3. model๊ณผ price ์†์„ฑ๊ณผ tax() ํ•จ์ˆ˜์˜ return ํƒ€์ž…์ง€์ • ํ•˜์ž. 
class Car {
  model: string;
  price: number;

  constructor(model: string, price: number) {
    this.model = model;
    this.price = price;
  }

  tax() :number{
    return this.price / 10;
  }
}
const morning = new Car('morning', 3000);

console.log(morning.tax());

ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ์ž”๋œฉ ๋“ค์–ด๊ฐ€๋Š” class Word ๋งŒ๋“ค๊ธฐ

  1. object ๋งŒ๋“ค ๋•Œ new Word() ์†Œ๊ด„ํ˜ธ ์•ˆ์— ์ˆซ์ž ํ˜น์€ ๋ฌธ์ž๋ฅผ ์ž…๋ ฅํ•˜๋ฉด
  2. ์ˆซ์ž๋Š” ์ „๋ถ€ object ์•ˆ์˜  num ์†์„ฑ ์•ˆ์— array ํ˜•ํƒœ๋กœ ์ €์žฅ๋˜๊ณ  
  3. ๋ฌธ์ž๋Š” ์ „๋ถ€ object ์•ˆ์˜ str ์†์„ฑ ์•ˆ์— array ํ˜•ํƒœ๋กœ ์ €์žฅ๋˜๋Š” class๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž.
  4. class ๋งŒ๋“ค ๋•Œ ๋„ฃ์„ ์ˆ˜ ์žˆ๋Š” ์ˆซ์ž์™€ ๋ฌธ์ž ๊ฐœ์ˆ˜๋Š” ์ œํ•œ ์—†๋‹ค.
class Word {
  num;
  str;

  constructor(...param : (number | string)[]) {
    let numParams :number[] = [];
    let strParams :string[] = [];

    param.forEach((i) => {
      if(typeof i === 'number'){
        numParams.push(i)
      } else {
        strParams.push(i)
      }
    })

    this.num = numParams;
    this.str = strParams;
  }
}
let obj = new Word('kim', 3, 5, 'park');

console.log(obj.num); //[3,5]
console.log(obj.str); //['kim', 'park']

* ์œ„์˜ ์ฝ”๋“œ์—์„œ obj๋ฅผ const๋กœ ์„ ์–ธํ•˜๋ฉด obj.num ๋ฐ obj.str์„ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. obj๋Š” Word ํด๋ž˜์Šค์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ๋‹ค. ์ธ์Šคํ„ด์Šค๋Š” ๊ฐ์ฒด์ด๋ฏ€๋กœ, ๊ฐ์ฒด์˜ ์†์„ฑ์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— const๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜์— ์žฌํ• ๋‹น์„ ์‹œ๋„ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ“˜ TypeScript > ๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ)' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ˆ™์ œ Part 1 (1~4) : ํ•จ์ˆ˜ ํƒ€์ž…์ง€์ •  (0) 2023.12.10
    '๐Ÿ“˜ TypeScript/๋ฌธ์ œํ’€๊ธฐ (์ฝ”๋”ฉ์• ํ”Œ)' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ˆ™์ œ Part 1 (1~4) : ํ•จ์ˆ˜ ํƒ€์ž…์ง€์ •
    Zoeeey
    Zoeeey
    ๊ธธ๊ฒŒ ์ƒ๊ฐํ•˜๊ณ  ์งง๊ฒŒ ๊ทธ๋ฆฌ๊ธฐ

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”