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

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ : ๊ธฐ์ดˆ ์„ธ๋ฏธ๋‚˜

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ด€๋ จ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค.

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

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

  • TypeScript Overview

  • ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์ถ• ๋ฐ ์ปดํŒŒ์ผ๋Ÿฌ ์‚ฌ์šฉ

  • Compiler Options

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

1. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ : 1705 ๊ธฐ์ดˆ ์„ธ๋ฏธ๋‚˜ ๊ฐ•์ขŒ ์†Œ๊ฐœ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” MS ๊ฐ€ ๋งŒ๋“  ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ๋กœ, ๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์‚ฌ๋ž‘์„ ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Angular ์˜ ๊ธฐ๋ณธ ์–ธ์–ด๋กœ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ตฌ๊ธ€์—์„œ๋„ ๊ณต์‹ ๊ฐœ๋ฐœ ์–ธ์–ด๋กœ ์ง€์ •ํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์‰ฝ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ณ , ์‚ฌ์šฉ์ด ์–ด๋ ต์ง€ ์•Š์œผ๋ฉด์„œ, ๊ฐ•๋ ฅํ•œ ํƒ€์ž… ์ฒดํฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ๊ฐ€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ์˜ฎ๊ฒจ์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋ณธ ๊ฐ•์ขŒ๋Š” 2017๋…„ 5์›”์— ์ง„ํ–‰๋œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ ์œ ์ €๊ทธ๋ฃน ๊ธฐ์ดˆ ์„ธ๋ฏธ๋‚˜๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์— ๋Œ€ํ•ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค
TypeScript Overview
๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์ถ• ๋ฐ ์ปดํŒŒ์ผ๋Ÿฌ ์‚ฌ์šฉ
IDE ํ™œ์šฉ
Compiler Options
TypeScript Basic Types
var, let, const
Type assertions
Type alias
Interface
Class
Generic
iterator
Decorator
Type Inference
React with TypeScript
React Migration

2. ๋„์›€๋˜๋Š” ๋ถ„๋“ค

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

3. ๊ฐ•์˜ ์ž๋ฃŒ

http://slides.com/woongjae/deck-8
http://slides.com/woongjae/deck-8-14
http://slides.com/woongjae/deck-8-15
 

4. ๊ฐ•์‚ฌ ์†Œ๊ฐœ

์ด์›…์žฌ
ํ˜„ ์ŠคํŠœ๋””์˜ค์”จ๋“œ์ฝ”๋ฆฌ์•„ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด
ํ˜„ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ ์œ ์ €๊ทธ๋ฃน ์šด์˜์ž, ์ผ๋ ‰ํŠธ๋ก  ์ฝ”๋ฆฌ์•„ ์œ ์ €๊ทธ๋ฃน ์šด์˜์ž
์ „ ๋ธŒ์ดํ„ฐ์น˜ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด๋ง ๋žฉ ๋žฉ์žฅ
์ „ ํŠธ๋ฆฌํ”Œ๋ฒ ์ด CTO

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

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

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ํ•˜๊ณ  ์‹ถ์œผ์‹ 

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณธ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
์ด์›…์žฌ์ž…๋‹ˆ๋‹ค.

11,679

๋ช…

์ˆ˜๊ฐ•์ƒ

122

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4.7

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

14๋…„์ฐจ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด ์ž…๋‹ˆ๋‹ค.

 

2021๋…„ ๋ถ€ํ„ฐ๋Š” NHN Dooray ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ๊ฐœ๋ฐœํŒ€์„ ๋ฆฌ๋“œํ•˜๋ฉฐ, ์„œ๋น„์Šค ์ „์ฒด์˜ UI ์— ๋Œ€ํ•œ ์ฑ…์ž„์„ ๋งก์•˜์Šต๋‹ˆ๋‹ค. ํŒ€์„ ๋งก์•„ ๊ธฐ์กด์— ์šด์˜ํ•˜๊ณ  ์žˆ๋˜ ๋ ˆ๊ฑฐ์‹œ ์‹œ์Šคํ…œ(AngularJS, Vue)์„ React, TypeScript ๋กœ ๋ฆฌ๋‰ด์–ผ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. 10์ธ ์ด์ƒ์˜ ๋‹ค์ˆ˜ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋“ค์ด ํ•˜๋‚˜์˜ ํ”„๋Ÿฌ๋•ํŠธ๋ฅผ ํ•จ๊ป˜ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์—…๋ฌด๋ฅผ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ์„œ๋น„์Šค ๊ทœ๋ชจ๊ฐ€ ํฌ๊ณ  ๋ณต์žก๋„๊ฐ€ ๋†’์•„ Monorepo ๋กœ ๊ฐœ๋ฐœ ๋ฐ ์šด์˜ํ•˜๊ณ , Micro Frontend ๋ฅผ ๋„์ž…ํ•˜์—ฌ ๋ฐฐํฌ ์ฃผ๊ธฐ ๋‹จ์ถ•์— ๋Œ€ํ•ด ๋…ธ๋ ฅํ•ด์™”์Šต๋‹ˆ๋‹ค. Storybook ์„ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ๊ทน์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ, Design System ์„ ๊ตฌ์ถ•ํ•˜๊ณ  ํ™œ์šฉ์ด ๋  ์ˆ˜ ์žˆ๋„๋ก ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹ค๋“ฌ๋Š” ์—ญํ• ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์ด์ „์—๋Š” Studio XID ์—์„œ TypeScript ์™€ Electron ์„ ์ด์šฉํ•˜์—ฌ, ๋””์ž์ด๋„ˆ๋ฅผ ์œ„ํ•œ ์ธํ„ฐ๋ ‰์…˜ ํ”„๋กœํ† ํƒ€์ดํ•‘ ํˆด์ธ ProtoPie ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œ๊ฐ€์ง€ ์ œํ’ˆ์„ ์•ฝ 4๋…„๋™์•ˆ ๋งŒ๋“ค๋ฉด์„œ ์ข‹์€ ์ฝ”๋“œ, ํ’ˆ์งˆ์ด ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•ด์™”์Šต๋‹ˆ๋‹ค.

 

๋Œ€๊ทœ๋ชจ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ๋” ๋‚˜์€ ๋ฐฉํ–ฅ์„ ๊ณ ๋ฏผํ•˜๊ณ , ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Microsoft MVP (TypeScript) ๋กœ ํ™œ๋™ํ•ด ์™”์œผ๋ฉฐ, ์ตœ์‹  ์›น๊ธฐ์ˆ ์— ๋Œ€ํ•ด ์‚ฌ๋žŒ๋“ค๊ณผ ์ด์•ผ๊ธฐ ํ•˜๋Š” ๊ฒƒ์„ ์ฆ๊น๋‹ˆ๋‹ค.

 

์—ฌ๋Ÿฌ ๊ณณ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์„ ์ด๋Œ๋ฉฐ, ์ฃผ๋กœ ํ•จ์ˆ˜ํ˜• ์–ธ์–ด(ํด๋กœ์ €)๋‚˜ Node.js ๋กœ ๋ฐฑ์—”๋“œ ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
์ธํ”„๋ผ ์ž๋™ํ™”์— ๋Œ€ํ•œ ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

16๊ฐœ โˆ™ (5์‹œ๊ฐ„ 37๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

60๊ฐœ

4.6

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

  • ๋•์งˆ๋จธ์‹ 

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 48

    โˆ™

    ํ‰๊ท  ํ‰์  4.9

    5

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

    • ํƒํ˜•

      โˆ™

      ์ˆ˜๊ฐ•ํ‰ 27

      โˆ™

      ํ‰๊ท  ํ‰์  4.6

      3

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

      ์กฐ๊ธˆ ์•„์‰ฌ์šด ๊ฐ•์ขŒ ์ดˆ๋ฐ˜ ์„ธํŒ… ๋ถ€๋ถ„์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๊ตฌ์ฒด์ ์ด์–ด์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค๋งŒ, ์ •์ž‘ ๋’ค๋กœ ๊ฐˆ์ˆ˜๋ก ์–ธ์–ด ์ž์ฒด์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์ข€ ๋ถ€์‹คํ•ด์„œ ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค.

      • Jinlee Jeong

        โˆ™

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

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

        TS ์ฒ˜์Œ ์‹œ์ž‘ํ•  ๋•Œ, ์ดํ•ดํ•˜๊ธฐ ์ข‹์•„์š”. ํ•˜์ง€๋งŒ ์กฐ๊ธˆ์˜ ๋ฐฐ๊ฒฝ ์ง€์‹์€ ํ•„์š”ํ•ด์š”!

        • EUN

          โˆ™

          ์ˆ˜๊ฐ•ํ‰ 7

          โˆ™

          ํ‰๊ท  ํ‰์  4.3

          3

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

          ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ „๋‹ฌ๋ ฅ์€ ์•„์‰ฝ์Šต๋‹ˆ๋‹ค.

          • ๊ฝƒ๊ฐˆํ”ผ

            โˆ™

            ์ˆ˜๊ฐ•ํ‰ 4

            โˆ™

            ํ‰๊ท  ํ‰์  4.8

            4

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

            ๋ช‡ ์—†๋Š” typescript ๋ฌด๋ฃŒ ๊ฐ•์ขŒ ์ค‘ ํ•˜๋‚˜์ธ๋ฐ ๋ฌด๋ฃŒ ๊ฐ•์ขŒ ์ค‘์—์„œ๋Š” ์ œ์ผ ๊ฐœ๋… ์„ค๋ช…์ด ๋งŽ์•„์„œ ์ข‹์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์ค‘๊ฐ„์ค‘๊ฐ„์˜ ์„ค๋ช…์ด ์ดํ•ด๊ฐ€ ๋˜์ง€์•Š์•„์„œ API๋ฌธ์„œ๋ฅผ ์ฐพ์•„๋ณด๊ณ  ๋ฐ˜๋ณตํ•ด์„œ ๊ณ„์† ๋“ค์—ˆ๋Š”๋ฐ ์ด๋Ÿฌํ•œ ์ „๋‹ฌ๋ ฅ ๋ถ€๋ถ„์ด ์ˆ˜๊ฐ•ํ•˜๋Š” ๋‚ด๋‚ด ๋งŽ์ด ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค.

            ์ด์›…์žฌ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

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

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

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

            ์—ฐ๊ด€ ๋กœ๋“œ๋งต

            ๊ฐ•์˜๊ฐ€ ํฌํ•จ๋œ ๋กœ๋“œ๋งต์œผ๋กœ ํ•™์Šตํ•ด ๋ณด์„ธ์š”!

            ๋ฌด๋ฃŒ