๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ‘ฉโ€๐Ÿ’ป ๊ฐœ๋ฐœ ๊ณต๋ถ€/2025 ํ•œ๊ฒฝxํ† ์Šค ๋ถ€์บ (Fullstack)

[ํ•œ๊ฒฝxToss] 8์ฃผ์ฐจ ์š”์•ฝ : Typescript + ์ค‘๊ฐ„ ํŒ€ํ”Œ๐Ÿฅท

728x90
๋ฐ˜์‘ํ˜•

 

* ๊ฐœ์ธ์˜ ํ•™์Šต ๋‚ด์šฉ ๊ธฐ๋ก ์ค‘, ๊ทนํžˆ ์ผ๋ถ€์˜ ๋‚ด์šฉ๋งŒ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

 

 

typescript

 

ํŒ€ํ”Œ ์‹œ์ž‘ ๋‹น์‹œ ํŒ€์›๋“ค์—๊ฒŒ react ts๋กœ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜์ž๊ณ  ํ–ˆ์—ˆ๋Š”๋ฐ,

๋งˆ์นจ ๊ฐ•์‚ฌ๋‹˜์ด ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•ด์ฃผ์…จ๋‹ค.

ts๋ฅผ ๊ฒฝํ—˜ํ•ด๋ณด์ง€ ์•Š์€ ํŒ€์›๋“ค์ด ์žˆ์—ˆ๊ธฐ์— ๋‹คํ–‰์ด์—ˆ์Œ!!

 

//ํƒ€์ž… ๋‹จ์–ธ(Assertion) : ํ˜•๋ณ€ํ™˜๊ณผ ์œ ์‚ฌ

type Person = {
  name: string
  age: number
}

 

//ํƒ€์ž…์ขํžˆ๊ธฐ

function func1(value: number | string) {
  //value.toFixed() //์‹ค์ˆ˜ํ˜•์œผ๋กœ ๋ฐ”๊พธ๊ธฐ
  //value.toUpperCase() //๋Œ€๋ฌธ์ž๋กœ ๋ฐ”๊พธ๊ธฐ
  if (typeof value === 'number') {
    value.toFixed()
  } else if (typeof value === 'string') {
    value.toUpperCase()
  }
}

 

//์ธํ„ฐํŽ˜์ด์Šค

//ํƒ€์ž… ๋ณ„์นญ              vs  ์ธํ„ฐํŽ˜์ด์Šค
//๋ณ€์ˆ˜,ํ•จ์ˆ˜๋“ฑ์˜ ํƒ€์ž…์ •์˜     ๊ฐ์ฒด์˜ ๊ตฌ์กฐ๋ฅผ ์ •์˜
//์œ ๋‹ˆ์˜จ/๊ต์ฐจํƒ€์ž… ๊ฐ€๋Šฅ       ๋ถˆ๊ฐ€๋Šฅ
//ํ™•์žฅ(extends ์ƒ์†) ๋ถˆ๊ฐ€    ์ƒ์† ๊ฐ€๋Šฅ

interface Person {
  readonly name: string
  age?: number
  sayHi(): void
}
const person: Person = {
  name: 'ํ™๊ธธ๋™',
  age: 30,
  sayHi: function () {
    console.log('Hi')
  },
}

//์ƒ์†(ํ™•์žฅ) extends : ๊ตฌ์กฐ์  ์„ค๊ณ„๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
type Animal = {
  name: string
  color: string
}
interface Dog extends Animal {
  isBark: boolean
}
interface Parent {
  name: string
  age: number
}
interface Cat extends Parent {
  ifScratch: boolean
}

 

-

์ด๋•Œ๋ถ€ํ„ฐ ๋ณธ๊ฒฉ์ ์œผ๋กœ ํŒ€ํ”Œ ์‹œ์ž‘!

๋‚ด๊ฐ€ ํŒ€์žฅ์ด์—ˆ๋‹ค ใ…Ž.ใ…Ž

ํŒ€์›๋“ค์ด๋ž‘ ์ธ์‚ฌํ•˜๊ณ , ์—ญํ•  ๋ฐฐ๋ถ„ ์ง„ํ–‰ํ•˜๊ณ , ํ”Œ์  ์ฃผ์ œ ์ •ํ•˜๊ณ  ์„ธ๋ถ€๋‚ด์šฉ ๋นŒ๋“œํ•œ ๋“ฏ

 

slack ๋‹จํ†ก ๋งŒ๋“ค ์ค„ ๋ชฐ๋ผ์„œ ํ—ค๋ฉจ๋˜๊ฑด ์•ˆ๋น„๋ฐ€ ใ…‹ใ…‹

 

์šฐ๋ฆฌ ํŒ€์€ ์ฃผ์ œ๊ฐ€ ์ƒ๋‹นํžˆ ๋นจ๋ฆฌ ์ •ํ•ด์ง„ ํŽธ์ด์—ˆ๋‹ค.

์ข‹์€ ์•„์ด๋””์–ด๊ฐ€ ๋น ๋ฅด๊ฒŒ ๋‚˜์˜ค๊ธฐ๋„ ํ–ˆ๊ณ ,

๋‹ค๋“ค ์ดํ•ด์‹ฌ ๋„˜์น˜๊ณ  ์ž๊ธฐ์ฃผ์žฅ์ด ๊ฐ•ํ•˜์ง€ ์•Š์€ ํŽธ์ด์–ด์„œ..!

๋‹น์‹œ์— ๊ธฐํš + UI ์„ค๊ณ„๊ฐ€ ์•„์ฃผ ์›ํ™œํ•˜๊ฒŒ ์ง„ํ–‰๋˜์—ˆ๋‹ค ๐Ÿ˜‡๐Ÿ˜‡

 

๋„ˆ๋ฌด ์ข‹์€ ํŒ€์„ ๋งŒ๋‚˜์„œ ๋‹คํ–‰์ด๋‹ค.

 

9์ฃผ์ฐจ - 11์ฃผ์ฐจ์—๋Š” ํŒ€ ํ”„๋กœ์ ํŠธ ๋•Œ๋ฌธ์— ์ˆ˜์—…๋‚ด์šฉ์ด ์—†์—ˆ๋‹ค.

์ค‘๊ฐ„ ํ”Œ์  ์ˆ˜์ƒ๊ฒฐ๊ณผ๋Š” ์•„์ง ์•ˆ ๋‚˜์™”์ง€๋งŒ ํšŒ๊ณ ๋ก๋„ ์ž‘์„ฑํ•˜๊ณ , (์ƒ ์ฃผ์„ธ์š”)

12์ฃผ์ฐจ๋ถ€ํ„ฐ ๋ฐฑ์—”๋“œ ๋ณธ๊ฒฉ์ ์œผ๋กœ ๋ฐฐ์šฐ๋ฉด์„œ ๋‹ค์‹œ ์ž˜ ๊ธฐ๋กํ•ด๋ด์•ผ์ง€

728x90
๋ฐ˜์‘ํ˜•