์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

@์‹œ์ฝ” - TypeScript ์ œ๋Œ€๋กœ ๋ฐฐ์šฐ๊ธฐ(์ดˆ์ค‘๊ธ‰)

๊นŠ์ด์žˆ๋Š” ์ˆ˜์—…์œผ๋กœ ์ตœ๊ณ ์˜ ์›น ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ์™„๊ฐ• ํ–ˆ์„ ๋•Œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ๋ณธ์งˆ์„ ๊ฟฐ๋šซ์„ ์ˆ˜ ์žˆ์–ด, ๋‹ค์Œ์œผ๋กœ ๋ฐฐ์šฐ๊ฒŒ ๋  ๋ฆฌ์•กํŠธ์™€ ๋„ฅ์ŠคํŠธ, ๋„ค์ŠคํŠธ ๋“ฑ์˜ ๊ณ ์ˆ˜๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ๊นŠ์ด์žˆ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ ์›๋ฆฌ์™€ ์‹ค๋ฌด

  • ๋ฆฌ์•กํŠธ์™€ ๋„ฅ์ŠคํŠธ, ๋„ค์ŠคํŠธ์˜ ๊ณ ์ˆ˜๊ฐ€ ๋˜๊ธฐ ์œ„ํ•œ ์ตœ๊ณ ๊ธ‰ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋”ฉ ๊ธฐ์ˆ 

  • ๋ฆฌ์•กํŠธ ๋“ฑ TS ํ”„๋ ˆ์ž„์›Œํฌ ๊ฐœ๋ฐœ ์‚ฌ์ „ ํ•™์Šต

๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹ฌํ™”๊นŒ์ง€

๋ณธ์งˆ์„ ๊ฟฐ๋šซ๋Š” TypeScript ๊ณผ์ •

๐Ÿง๋ฌด์—‡์ด ๋‹ค๋ฅธ๊ฐ€์š”?

๋ณธ ๊ฐ•์˜๋Š” TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋ฐ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์‹ค๋ฌด์—์„œ ๋ฐ˜๋“œ์‹œ ์ˆ™์ง€ํ•ด์•ผ ํ•  ํ•ต์‹ฌ ์ฃผ์ œ๋“ค์„ ์ฒด๊ณ„์ ์œผ๋กœ ๊ตฌ์„ฑํ•˜์—ฌ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค!

JavaScript๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ TypeScript์˜ ํƒ€์ž… ์‹œ์Šคํ…œ๊ณผ ๊ณ ๊ธ‰ ๋ฌธ๋ฒ•์„ ๋ช…ํ™•ํ•œ ์ด๋ก  ์„ค๋ช…๊ณผ ํ•จ๊ป˜,

์‹ค์ œ ์ฝ”๋“œ์— ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„๋˜์–ด ์žˆ์œผ๋ฉฐ ์ •์  ํƒ€์ž…์˜ ์žฅ์ ์„ ์ดํ•ดํ•˜๊ณ  ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.


๐Ÿง๊ฐ•์˜ ํŠน์„ฑ

์‹ค์ œ ์˜คํ”„๋ผ์ธ ์ˆ˜์—… ๊ฐ•์˜๋ฅผ ์˜จ๋ผ์ธ์œผ๋กœ ๋งŒ๋‚˜๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐ์ฒด์ง€ํ–ฅ ๊ฐœ๋…๊ณผ ์ปดํŒŒ์ผ๋Ÿฌ ๊ฐœ๋…๊นŒ์ง€ ๋ฐฐ์›๋‹ˆ๋‹ค.

ํŠนํžˆ CoVariance(๊ณต๋ณ€์„ฑ)๊ณผ Freshness์˜ ๊ฐœ๋…์„ ์ตํ˜€ ๋…ผ๋ฆฌ์ ์œผ๋กœ ๋ชจ๋“  ๊ฒƒ์ด ์„ค๋ช…๋˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

TypeScript๋ฅผ ์ตํ˜€ React ์ฝ”๋”ฉ์— ๋ฌด๊ธฐ๊ฐ€ ๋˜๊ณ  Java, Rust์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ์–ธ์–ด๋ฅผ ๋ฐฐ์šฐ๋Š” ๋ฐ ๋งŽ์€ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

โœ์–ด๋–ค ๊ฑธ ๋ฐฐ์šฐ๋‚˜์š”?

TypeScript ํ•ต์‹ฌ ์žฌ์ •๋น„

ํƒ€์ž… ์‹œ์Šคํ…œ์˜ ์›๋ฆฌ, ํƒ€์ž… ์ถ”๋ก , ์œ ๋‹ˆ์–ธ/์ธํ„ฐ์„น์…˜ ํƒ€์ž…, ํƒ€์ž… ๊ฐ€๋“œ, ์ธํ„ฐํŽ˜์ด์Šค์™€ ํƒ€์ž… ๋ณ„์นญ ๋“ฑ์˜ TypeScript์˜ ํ•ต์‹ฌ ๋ฌธ๋ฒ•๊ณผ ๊ฐœ๋…์„ ๊นŠ์ด ์žˆ๊ฒŒ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

ํ™•์žฅ์„ฑ ์žˆ๋Š” ์ฝ”๋“œ ์ž‘์„ฑ

Generic, Utility types๋ฅผ ์ด์šฉํ•ด ์œ ์—ฐํ•˜๋ฉด์„œ๋„ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํ•จ์ˆ˜์™€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ , ํƒ€์ž… ์ถ”๋ก ๊ณผ ์ œํ•œ์„ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

๊ณ ๊ธ‰ ํƒ€์ž… ์‹œ์Šคํ…œ ํ™œ์šฉ

Mapped types, Conditional types, Utility types, Template literal types ๋“ฑ

๊ณ ๊ธ‰ ํƒ€์ž… ๋ฌธ๋ฒ•์„ ํ†ตํ•ด ์‹ค์ œ ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ๋ชจ๋ธ๋งํ•˜๋Š” ๋Šฅ๋ ฅ์„ ๊ธฐ๋ฆ…๋‹ˆ๋‹ค.

์‹ค์ „ ์ค‘์‹ฌ์˜ ํƒ€์ž… ์•ˆ์ „ ์ฝ”๋”ฉ

์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ๋ฌธ์ œ๋ฅผ ํƒ€์ž… ๊ธฐ๋ฐ˜์œผ๋กœ ์–ด๋–ป๊ฒŒ ๋ฏธ๋ฆฌ ์˜ˆ๋ฐฉํ•˜๊ณ , ์œ ์ง€๋ณด์ˆ˜ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

Typescript ์ปดํŒŒ์ผ๋Ÿฌ ๋Œ€ํ•ด์„œ...

๐Ÿค”์–ด๋–ป๊ฒŒ ์ง„ํ–‰๋˜๋‚˜์š”?

์Šฌ๋ผ์ด๋“œ๋กœ ๋งŒ๋“ค์–ด์ง„ ๋ณธ์งˆ์„ ๊ฟฐ๋šซ๋Š” Typescript๊ต์ œ ๋งํฌ ์ œ๊ณต.
์‹ค์ œ ์ˆ˜์—…์— ์‚ฌ์šฉ๋˜์–ด์ง„ ์ฝ”๋“œ git ๋งํฌ ์ œ๊ณต

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

Playground๋ฅผ ํ†ตํ•œ ์‹ค์Šต...

ํƒ€์ž… ์‹œ์Šคํ…œ...

๐Ÿ“–๊ฐ•์˜ ๊ตฌ์„ฑ

TypeScript ๊ฐ€ ์™œ ๋“ฑ์žฅํ•˜์˜€๋Š”์ง€?

์™œ ํ•„์š”ํ•œ์ง€? ์–ด๋–ป๊ฒŒ ๋ฐœ์ „ํ•˜์˜€๋Š”์ง€? ๋“ฑ์˜

์›๋ก ์ ์ธ ๋ถ€๋ถ„๋„ ๊ณต๋ถ€ํ•ฉ๋‹ˆ๋‹ค


TypeScript์˜ ์‚ฌ์šฉ์„ ๋„˜์–ด

๋‚ด๋ถ€์  ๋™์ž‘๊นŒ์ง€

ํŒŒํ—ค์ณ ๋ด…๋‹ˆ๋‹ค


์‚ฌ์šฉ๋ฒ• ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ

์„ค์ •๊ณผ ์˜ต์…˜ ๋“ฑ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ• 

์˜ต์…˜๋“ค ๋˜ํ•œ ๊ณต๋ถ€ํ•ฉ๋‹ˆ๋‹ค

๊ฐœ๋…์ ์ธ ์„ค๋ช…์„ ๋„˜์–ด

์ง์ ‘์ ์ธ ์‹ค์Šต๊ณผ ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ํ†ตํ•ด

์‹ค๋ฌด์ ์ธ ๋ถ€๋ถ„์„ ๊ณต๋ถ€ํ•ฉ๋‹ˆ๋‹ค

๐Ÿ“š์ปค๋ฆฌํ˜๋Ÿผ

01. TS - ์‹œ์ž‘ํ•˜๊ธฐ

02. TS ์ปดํŒŒ์ผ๋Ÿฌ ์ดํ•ดํ•˜๊ธฐ

03. Type System

04. union & literal type (1)

05. union & literal type (2)

06. Union๊ณผ Object Literal ์ •๋ฆฌ

07. Object Type

08. Function Type (1)

09. Function Type (2)

10. Array & Tuple

11. interface (1)

12. interface (2)

13. class (1)

14. class (2)

15. ํด๋ž˜์Šค ํ™•์žฅ(extends)

16. ํƒ€์ž…์ œํ•œ์ž

17. Generic (1)

18. Generic (2)

19. Utility types

20. Generic (3)

21. Generic (4)

22. ํƒ€์ž… ์„ ์–ธ ํŒŒ์ผ

23. ํƒ€์ž…์šด์˜ (1)

24. ํƒ€์ž…์šด์˜ (2)

๐Ÿ˜Š ์˜คํ”„๋ผ์ธ ์ˆ˜์—… ์‹ค์ œ ์ˆ˜๊ฐ•ํ›„๊ธฐ

๊ทธ์ € ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•ด๋ณด๋Š”

๊ฒƒ์ด ์•„๋‹Œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€

๋ฌด์—‡์ธ์ง€ ๋А๋‚„ ์ˆ˜

์žˆ๋Š” ์‹œ๊ฐ„

๋•๋ถ„์— ํ˜„์žฌ ์ทจ์—…์„ ํ•ด

ํšŒ์‚ฌ์—์„œ๋„ ์„ ์ƒ๋‹˜๊ป˜์„œ

์•Œ๋ ค์ฃผ์‹  ์ง€์‹๋“ค์„

์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ 

์žˆ์Šต๋‹ˆ๋‹ค

์ง„์‹ฌ์œผ๋กœ ์ž‘์„ฑ๋˜๋Š” ์ œ์ž ํ›„๊ธฐ

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์—ฌ๋Ÿฌ ๋ถ€ํŠธ์บ ํ”„์—์„œ ์—ฌ๋Ÿฌ๋ฒˆ ๋ฐฐ์› ์ง€๋งŒ ์ œ๋Œ€๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์—†๋Š” ์ค‘๊ธ‰์ž

  • TS๋ฅผ ํ”„๋กœ๋‹ต๊ฒŒ ์ฝ”๋”ฉํ•˜์ง€ ๋ชปํ•˜๋Š” ์‹ค๋ฌด์ž

  • ๊นŠ์ด์žˆ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋ฐฐ์šฐ๊ธฐ ์œ„ํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์›ํ•˜๋Š” ๋ถ„

  • ๋ฆฌ์•กํŠธ์™€ ๋„ฅ์ŠคํŠธ ๋“ฑ ํ”„๋ ˆ์ž„์›Œํฌ์ด ๊ณ ์ˆ˜๊ฐ€ ๋˜๋ ค๋Š” ๋ถ„

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ๋ณธ์งˆ์„ ๊ฟฐ๋šซ์–ด ์›น ๊ฐœ๋ฐœ์˜ ์ƒ์œ„ 1% ๋˜๋ ค๋Š” ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ค‘๊ธ‰

์•ˆ๋…•ํ•˜์„ธ์š”
์‹œ๋‹ˆ์–ด์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

3,400

๋ช…

์ˆ˜๊ฐ•์ƒ

95

๊ฐœ

์ˆ˜๊ฐ•ํ‰

18

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

 - ๋‹ค์Œ์นด์นด์˜ค ๊ฐœ๋ฐœํŒ€์žฅ(8๋…„)

  - IT ๊ธฐ์—… ๊ฐœ๋ฐœ์—…๋ฌด ๋ฐ ์Šคํƒ€ํŠธ์—…(14๋…„)

  - Youtube โ€˜์‹œ๋‹ˆ์–ด์ฝ”๋”ฉโ€™ ์ฑ„๋„์„ ์šด์˜ํ•˜์—ฌ ๊ฐœ๋ฐœ ๊ด€๋ จ ๊ธฐ์ˆ  ๊ฐ•์ขŒ๋ฅผ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ํ˜„์žฌ ์•ฝ 1 ๋งŒ 7์ฒœ๋ช…์˜ ๊ตฌ๋…์ž๋ฅผ ๋‘๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

https://www.youtube.com/c/SeniorCoding 

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

2๊ฐœ

5.0

2๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ๊น€์Šน์ง„

    ์ˆ˜๊ฐ•ํ‰ 3

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    • 11hertz

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์‹œ๋‹ˆ์–ด์ฝ”๋”ฉ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

      ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

      ๋น„์Šทํ•œ ๊ฐ•์˜

      ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

      ์›” โ‚ฉ19,800

      5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

      โ‚ฉ99,000