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

Javascript ๋กœ ๋ฐ์Šคํฌํƒ‘ ์•ฑ์„ - ์ผ๋ ‰ํŠธ๋ก  ๊ธฐ์ดˆ ๊ฐ•์ขŒ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ฐ์Šคํฌํ†ฑ ์•ฑ์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• ์ค‘ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ๋ฐฉ๋ฒ•์ธ ์ผ๋ ‰ํŠธ๋ก ์„ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์Šฌ๋ž™, VSCODE ์™€ ๊ฐ™์€ ์•Œ๋ ค์ง„ ํ”„๋กœ๊ทธ๋žจ๋“ค์ด ์ผ๋ ‰ํŠธ๋ก ์œผ๋กœ ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ์ผ๋ ‰ํŠธ๋ก  ๊ธฐ์ดˆ ๊ฐ•์ขŒ๋ฅผ ํ†ตํ•ด์„œ ๋ฐ์Šคํฌํƒ‘ ์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ธฐ์ดˆ์ ์ธ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์„ ์ตํžˆ๊ณ , ๊ฐ„๋‹จํ•œ ์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณผ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

(4.2) ์ˆ˜๊ฐ•ํ‰ 13๊ฐœ

์ˆ˜๊ฐ•์ƒ 219๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

๋จผ์ € ๊ฒฝํ—˜ํ•œ ์ˆ˜๊ฐ•์ƒ๋“ค์˜ ํ›„๊ธฐ

4.2

5.0

๊น€์šฉํ˜„

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

electron์˜ ์ „๋ฐ˜์ ์ธ ๊ธฐ๋Šฅ์„ ๊ฐ„๋‹จํžˆ ์—ฟ๋ณผ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

5.0

์–‘๊ธฐํ›ˆ

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

์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

5.0

๋ฐ˜๋ฏผ์กฑ์ ์ธ๋นต

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

ํ•ต์‹ฌ์„ ์ž˜ ์ „๋‹ฌํ•ด์ฃผ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผํ•˜๋‹ค๋ณด๋ฉด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ตํ˜€์ง€๋„ค์š”. ํ™˜๊ฒฝ ์„ธํŒ…๋ถ€ํ„ฐ ๋ถ๋งˆํฌ ์•ฑ๊นŒ์ง€ ๋ชจ๋‘ ์œ ์ตํ•ฉ๋‹ˆ๋‹ค~!!

๐Ÿ“ฃ ๊ฐ•์˜ ์งˆ๋ฌธ/๋‹ต๋ณ€ ์•ˆ๋‚ด
โ€ข ํ•ด๋‹น ๊ฐ•์˜๋Š” ์ง€์‹๊ณต์œ ์ž์˜ ์‚ฌ์ •์œผ๋กœ [์งˆ๋ฌธ/๋‹ต๋ณ€] ์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ˆ˜๊ฐ• ๋ฐ ํ•™์Šต์— ์ฐธ๊ณ ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

1. ์ผ๋ ‰ํŠธ๋ก  ๊ฐ•์ขŒ ์†Œ๊ฐœ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์˜์—ญ์€ ์ ์  ํ™•๋Œ€๋˜์–ด ์ด์ œ๋Š” ๋ฐ์Šคํฌํ†ฑ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋งŒ๋“ค์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ฐ์Šคํฌํ†ฑ ์•ฑ์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• ์ค‘ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ๋ฐฉ๋ฒ•์ธ ์ผ๋ ‰ํŠธ๋ก ์„ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์Šฌ๋ž™, VSCODE ์™€ ๊ฐ™์€ ์•Œ๋ ค์ง„ ํ”„๋กœ๊ทธ๋žจ๋“ค์ด ์ผ๋ ‰ํŠธ๋ก ์œผ๋กœ ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค.
์ด๋ฒˆ ์ผ๋ ‰ํŠธ๋ก  ๊ธฐ์ดˆ ๊ฐ•์ขŒ๋ฅผ ํ†ตํ•ด์„œ ๋ฐ์Šคํฌํƒ‘ ์•ฑ์„ ๋งŒ๋“œ๋Š” ๊ธฐ์ดˆ์ ์ธ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์„ ์ตํžˆ๊ณ ,
๊ฐ„๋‹จํ•œ ์•ฑ์„ ๋งŒ๋“ค์–ด ๋ณผ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์†Œ์Šค๋Š” ๊ณผ์ •๋ณ„๋กœ Github ์ €์žฅ์†Œ์—์„œ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค
์ผ๋ ‰ํŠธ๋ก  ๊ธฐ์ˆ  ๊ฐœ์š”
๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ•
Quick Start ๋ฅผ ํ†ตํ•ด ๋น ๋ฅด๊ฒŒ ์‹คํ–‰ํ•ด๋ณด๊ธฐ
main / renderer ํ”„๋กœ์„ธ์Šค ์ดํ•ดํ•˜๊ธฐ
์ผ๋ ‰ํŠธ๋ก  ์•ฑ์˜ ์‹คํ–‰ ๋ฐ ๋ฐฐํฌ ๊ฐœ๋…
์ผ๋ ‰ํŠธ๋ก  ๋ชจ๋“ˆ ์ดํ•ดํ•˜๊ธฐ
๋ฉ”์ธ ํ”„๋กœ์„ธ์Šค ํ•„์ˆ˜ ๋ชจ๋“ˆ ์ตํžˆ๊ธฐ
๋žœ๋”๋Ÿฌ ํ”„๋กœ์„ธ์Šค ํ•„์ˆ˜ ๋ชจ๋“ˆ ์ตํžˆ๊ธฐ
์–‘์ชฝ์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ํ•„์ˆ˜ ๋ชจ๋“ˆ ์ตํžˆ๊ธฐ
์‹ค์ „ ์•ฑ ๋งŒ๋“ค๊ธฐ - ๋ถ๋งˆํฌ ์•ฑ

2. ๋งŒ๋“ค์–ด๋ณผ ์˜ˆ์ œ

์ผ๋ ‰ํŠธ๋ก  ๊ธฐ๋ณธ์„ ์ตํžŒ ํ›„, ์ž‘์—…ํ‘œ์‹œ์ค„์—์„œ ์–ธ์ œ๋‚˜ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๋ถ๋งˆํฌ ์•ฑ์„ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.

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

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

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

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

5. ์—ฐ๊ด€๋œ ๊ฐ•์ขŒ

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

12,239

๋ช…

์ˆ˜๊ฐ•์ƒ

135

๊ฐœ

์ˆ˜๊ฐ•ํ‰

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

๋”๋ณด๊ธฐ

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

์ „์ฒด

24๊ฐœ โˆ™ (3์‹œ๊ฐ„ 18๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

13๊ฐœ

4.2

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

  • ๊น€์šฉํ˜„๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    ๊น€์šฉํ˜„

    ์ˆ˜๊ฐ•ํ‰ 13

    โˆ™

    ํ‰๊ท  ํ‰์  4.9

    5

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

    electron์˜ ์ „๋ฐ˜์ ์ธ ๊ธฐ๋Šฅ์„ ๊ฐ„๋‹จํžˆ ์—ฟ๋ณผ ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

    • ๋ฐ˜๋ฏผ์กฑ์ ์ธ๋นต๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ๋ฐ˜๋ฏผ์กฑ์ ์ธ๋นต

      ์ˆ˜๊ฐ•ํ‰ 7

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      ํ•ต์‹ฌ์„ ์ž˜ ์ „๋‹ฌํ•ด์ฃผ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผํ•˜๋‹ค๋ณด๋ฉด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ตํ˜€์ง€๋„ค์š”. ํ™˜๊ฒฝ ์„ธํŒ…๋ถ€ํ„ฐ ๋ถ๋งˆํฌ ์•ฑ๊นŒ์ง€ ๋ชจ๋‘ ์œ ์ตํ•ฉ๋‹ˆ๋‹ค~!!

      • ์œค๋ฏผ๊ทœ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        ์œค๋ฏผ๊ทœ

        ์ˆ˜๊ฐ•ํ‰ 2

        โˆ™

        ํ‰๊ท  ํ‰์  4.5

        4

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

        ๊ฐ•์˜์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“ˆ๋“ค์ด ์ตœ๊ทผ ๋ฒ„์ „๊ณผ ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ ๋ชจ๋“ˆ์— ๋งž๊ฒŒ ์ฒจ์‚ญ์ด ์žˆ๋‹ค๋ฉด ๋” ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

        • CNTTECH๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          CNTTECH

          ์ˆ˜๊ฐ•ํ‰ 1

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

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

          • ์–‘๊ธฐํ›ˆ๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            ์–‘๊ธฐํ›ˆ

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

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

            ์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

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

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

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

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

            ๋น„๊ณต๊ฐœ ๊ฐ•์˜๋กœ
            ์ˆ˜๊ฐ•์ด ์ œํ•œ๋ฉ๋‹ˆ๋‹ค.