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

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ : React with TypeScript ์„ธ๋ฏธ๋‚˜

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

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

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

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ

  • ๋ฆฌ์•กํŠธ

  • ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง

  • ๋ฆฌ๋•์Šค

  • next.js

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

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” MS ๊ฐ€ ๋งŒ๋“  ์˜คํ”ˆ์†Œ์Šค ํ”„๋กœ์ ํŠธ๋กœ, ๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์‚ฌ๋ž‘์„ ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Angular ์˜ ๊ธฐ๋ณธ ์–ธ์–ด๋กœ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ตฌ๊ธ€์—์„œ๋„ ๊ณต์‹ ๊ฐœ๋ฐœ ์–ธ์–ด๋กœ ์ง€์ •ํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์‰ฝ๊ฒŒ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ณ , ์‚ฌ์šฉ์ด ์–ด๋ ต์ง€ ์•Š์œผ๋ฉด์„œ, ๊ฐ•๋ ฅํ•œ ํƒ€์ž… ์ฒดํฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ๊ฐ€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ์˜ฎ๊ฒจ์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋ณธ ๊ฐ•์ขŒ๋Š” 2017๋…„ 7์›”์— ์ง„ํ–‰๋œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ ์œ ์ €๊ทธ๋ฃน 'React with TypeScript' ์„ธ๋ฏธ๋‚˜๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•์— ๋Œ€ํ•ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
 
 
๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค
React Component with TypeScript - ์ด์›…์žฌ
React-Router - ์ดํ˜„์„ญ
Server-Side-Rendering - ์ด์›…์žฌ
Redux - ์ด์›…์žฌ
Strictly Typed Usage of Redux - ์ตœ์ค€์˜
MobX - ์ด์›…์žฌ
MobX Best Practices - ๊น€์ง€ํƒœ
Writing Tests with Jest - ์ •๋Œ€์„ 
Next.js - ์ด์›…์žฌ

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

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

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

http://slides.com/woongjae/react-with-typescript-1
http://slides.com/woongjae/react-router
http://slides.com/woongjae/react-with-typescript-2
http://slides.com/woongjae/react-with-typescript-3
https://s3.ap-northeast-2.amazonaws.com/2woongjae/TypeScript/React-with-TypeScript+2017-06/3rd/strictly-typed-usage-of-redux.pdf
http://slides.com/woongjae/react-with-typescript-4
http://slides.com/woongjae/mobx-best-practices
http://slides.com/woongjae/writing-tests-with-jest
http://slides.com/woongjae/react-with-typescript-5

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

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

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

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

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค

  • 'ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ - ๊ธฐ์ดˆ ์„ธ๋ฏธ๋‚˜' ๋ฅผ ๋“ฃ๊ณ  ์ˆ˜๊ฐ•ํ•˜์‹œ๊ธธ ๊ถŒ์žฅ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

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

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

11,666

๋ช…

์ˆ˜๊ฐ•์ƒ

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 ๋กœ ๋ฐฑ์—”๋“œ ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
์ธํ”„๋ผ ์ž๋™ํ™”์— ๋Œ€ํ•œ ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

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

์ „์ฒด

30๊ฐœ โˆ™ (8์‹œ๊ฐ„ 54๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

42๊ฐœ

4.7

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

  • jhhyung

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ด์šฉ์— ๋งŽ์€ ๋„์›€์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

    • ์ •์œ ๋ผ

      โˆ™

      ์ˆ˜๊ฐ•ํ‰ 1

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      • ์žฅ๊ด‘ํ‘œ

        โˆ™

        ์ˆ˜๊ฐ•ํ‰ 6

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

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

        • ์•ˆ์ˆ˜์˜

          โˆ™

          ์ˆ˜๊ฐ•ํ‰ 5

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

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

          • ํ™ฉ์ง„์ˆ˜

            โˆ™

            ์ˆ˜๊ฐ•ํ‰ 5

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

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

            ๋„ˆ๋ฌด ์ข‹์Šต๋‹ˆ๋‹ค !

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

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

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

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

            ๋ฌด๋ฃŒ