๋ˆ„๊ตฌ๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ํ•ด๋ณด๋Š” Electron Todo List With TypeScript

๋ˆ„๊ตฌ๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ํ•ด๋ณด๋Š” Electron Todo List With TypeScript ๋ฆฌ์•กํŠธ ๊ธฐ๋ฐ˜์˜ ๋ฐ์Šคํฌํƒ‘ ๋™์ž‘ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” Electron์„ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๊ฐœ๋ฐœํ•ด๋ณด์„ธ์š”!

(4.9) ์ˆ˜๊ฐ•ํ‰ 8๊ฐœ

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

๋‚œ์ด๋„ ์ž…๋ฌธ

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

์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํ† ์ดํ”„๋กœ์ ํŠธ
ํ† ์ดํ”„๋กœ์ ํŠธ
๋ฆฌ์•กํŠธ๊ฐ์žก๊ธฐ
๋ฆฌ์•กํŠธ๊ฐ์žก๊ธฐ
electron
electron
์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํ† ์ดํ”„๋กœ์ ํŠธ
ํ† ์ดํ”„๋กœ์ ํŠธ
๋ฆฌ์•กํŠธ๊ฐ์žก๊ธฐ
๋ฆฌ์•กํŠธ๊ฐ์žก๊ธฐ
electron
electron

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

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

4.9

5.0

HelloWorld

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

๋”ฐ๋ผํ•ด๋ณด๊ธฐ ์ข‹์Šต๋‹ˆ๋‹ค ์ž…๋ฌธ์šฉ์œผ๋กœ ์ƒ๊ฐํ•˜๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค

5.0

DKN

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

๋”ฅํ•œ ๋‚ด์šฉ์€ ๊ธฐ๋Œ€์•ˆํ–ˆ์Šต๋‹ˆ๋‹ค๋งŒ ๋”ฐ๋ผํ•ด๋ณด๊ณ  ์ž…๋ฌธ์šฉ์œผ๋ก  ์ œ๊ฒฉ์ธ ๋“ฏ ํ•˜๋„ค์š” ์ข‹์Šต๋‹ˆ๋‹ค.

5.0

wonder

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

์ข‹์•„์š”

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • TodoList ๋งŒ๋“ค๋ฉฐ Electron ์ฐ๋จนํ•˜๊ธฐ

  • React ๊ธฐ๋ฐ˜์˜ ๋ฐ์Šคํฌํƒ‘ ์•ฑ์ด ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค์–ด์ง€๋Š”์ง€ ์•Œ์•„๋ณด๊ธฐ

๋ˆ„๊ตฌ๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ํ•ด๋ณด๋Š” Electron Todo List With TypeScript

React, TypeScript, Electron, ํฌํŠธํด๋ฆฌ์˜ค

์›น ๊ธฐ์ˆ ๋กœ ๋งŒ๋“œ๋Š” ๋ฐ์Šคํฌํƒ‘ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜!
React + TypeScript + Electron์œผ๋กœ Todo ์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”.

๐ŸŽฏ ๊ฐ•์˜ ์†Œ๊ฐœ

์ด ๊ฐ•์˜๋Š” ์›น ๊ฐœ๋ฐœ์ž๋„ ์‰ฝ๊ฒŒ ๋ฐ์Šคํฌํƒ‘ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก
Electron๊ณผ TypeScript๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์‹ค์Šต ์ค‘์‹ฌ์œผ๋กœ ๋ฐฐ์›Œ๋ณด๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

ํ•œ ๋ฒˆ์˜ ์ฝ”๋“œ๋กœ Windows, macOS, Linux์—์„œ ์‹คํ–‰๋˜๋Š” ์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด๊ณ ,
React์™€ TypeScript(Electron ํฌํŒ…)๋กœ ๊ตฌ์„ฑ๋œ Todo ๋ฆฌ์ŠคํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ง์ ‘ ์™„์„ฑํ•ฉ๋‹ˆ๋‹ค.

๐Ÿงฉ ์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

์„น์…˜์ฃผ์š” ํ•™์Šต ๋‚ด์šฉ

1. TypeScript ๊ธฐ์ดˆ ํƒ€์ž… ์‹œ์Šคํ…œ, ํ•จ์ˆ˜์™€ ์ธํ„ฐํŽ˜์ด์Šค, ํด๋ž˜์Šค, ์ œ๋„ค๋ฆญ ๋“ฑ ํ•ต์‹ฌ ๋ฌธ๋ฒ• ์ •๋ฆฌ

2. Electron ์ดํ•ดํ•˜๊ธฐ Electron์˜ ๊ตฌ์กฐ, ์žฅ๋‹จ์ , Node.js & Chromium ๊ธฐ๋ฐ˜ ์ดํ•ด

3. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ… VSCode, Node.js, nvm ์„ค์น˜๋ถ€ํ„ฐ React ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ ์„ธํŒ…๊นŒ์ง€

4. Electron ์—ฐ๋™ํ•˜๊ธฐ React + Electron ํ™˜๊ฒฝ ๊ตฌ์„ฑ ๋ฐ npm run dev๋กœ ๋™์‹œ ์‹คํ–‰

5. Todo ์•ฑ ๋งŒ๋“ค๊ธฐ TypeScript์™€ React๋กœ Todo CRUD ๊ธฐ๋Šฅ ๊ตฌํ˜„

6. ๋งˆ๋ฌด๋ฆฌ & ๋นŒ๋“œ์™„์„ฑ๋œ ์•ฑ์„ ์‹คํ–‰ ํŒŒ์ผ๋กœ ํŒจํ‚ค์ง•ํ•˜๋Š” ๋ฐฉ๋ฒ• ์†Œ๊ฐœ

๐Ÿง  ํ•™์Šต ๋ชฉํ‘œ

  • โœ… TypeScript ๋ฌธ๋ฒ•์„ ์ •ํ™•ํžˆ ์ดํ•ดํ•˜๊ณ  ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • โœ… Electron์˜ ๋™์ž‘ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•˜๊ณ  React ์•ฑ๊ณผ ์—ฐ๋™ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • โœ… ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋กœ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ๋ฐ์Šคํฌํƒ‘ ์•ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.

  • โœ… React + TypeScript + Electron ํ†ตํ•ฉ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์ง์ ‘ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“š ๊ฐœ๋ฐœ ๊ณผ์ • ๋ฐ ์ฃผ์˜์‚ฌํ•ญ

React + TypeScript๋กœ ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ ์›น์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์ผ๋ ‰ํŠธ๋ก ์œผ๋กœ ํฌํŒ…ํ•˜์—ฌ ๋ฐ์Šคํฌํƒ‘ ์•ฑ์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
๊ฐ•์˜๋Š” React + TypceScript + Electron ์„ ์‚ฌ์šฉํ•ด๋ณด๋Š”๋ฐ ์ดˆ์ ์„ ์žก์•˜์Šต๋‹ˆ๋‹ค.

์‹ฌํ™”๊ฐ•์˜๋Š” ์ถ”ํ›„ ์ œ๊ณต๋  ์˜ˆ์ •์ด๋‹ˆ ๊ธฐ์ดˆ ๊ฐ•์˜์ž„์„ ํ™•์ธ ํ›„ ์ˆ˜๊ฐ•ํ•ด์ฃผ์„ธ์š”!

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

์›น ๊ธฐ์ˆ ๋กœ ๋ฐ์Šคํฌํƒ‘ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

React + TypeScript
Electron

ํ™˜๊ฒฝ์„ ํ•œ ๋ฒˆ์— ์ตํžˆ๊ณ  ์‹ถ์€ ๋ถ„

TypeScript ๋ฌธ๋ฒ•์„
์‹ค์ „ ํ”„๋กœ์ ํŠธ๋กœ ์—ฐ์Šตํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ๊ฐ•์˜๋Š” MacOS ๊ธฐ์ค€์œผ๋กœ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. ์œˆ๋„์šฐ ๋จธ์‹ ์ด๋ผ๋„ ๋”ฐ๋ผ์˜ค์‹ค์ˆœ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๊ฐ•์˜์—์„œ๋Š” VSCode์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

  • ๊ฐ•์˜๋Š” Electron + TypeScript ์‚ฌ์šฉ์„ ๋ชฉ์ ์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค!

ํ•™์Šต ์ž๋ฃŒ

  • ๋…ธ์…˜ ๋งํฌ๋กœ ์ œ๊ณตํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • ๊ธฐ์ดˆ ์ปดํ“จํ„ฐ ํ™œ์šฉ ๋Šฅ๋ ฅ

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

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

  • React ๋ฅผ ๋ฐฐ์šฐ๊ณ  ๋” ๋”ฅํ•˜๊ฒŒ ๋“ค์–ด๊ฐ€๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ๋ฐ์Šคํฌํƒ‘ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • Electron ์— ๋Œ€ํ•ด ๊ถ๊ธˆํ•ด์‹  ๋ถ„

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

  • TypeScript

  • React

์•ˆ๋…•ํ•˜์„ธ์š”
Neo์ž…๋‹ˆ๋‹ค.

2,652

๋ช…

์ˆ˜๊ฐ•์ƒ

317

๊ฐœ

์ˆ˜๊ฐ•ํ‰

47

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

31

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”! ์ธํ”„๋Ÿฐ์—์„œ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ๋Š” Neo ์ž…๋‹ˆ๋‹ค.

ํ‰์†Œ ์ ‘ํ•˜์ง€ ๋ชปํ–ˆ๋˜ ๊ฐœ๋ฐœ๊ธฐ์ˆ ๋“ค์„ ๋‹ค์–‘ํ•œ ๋ถ„๋“ค์ด ์ ‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š”๊ฒŒ ์ œ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ €๋Š” ๋‹จ์ˆœํ•œ ์ด๋ก  ๋‚˜์—ด๋ณด๋‹ค ์‹ค๋ฌด ์ค‘์‹ฌ์˜ ์ปค๋ฆฌํ˜๋Ÿผ์„ ๊ตฌ์„ฑํ•˜๊ณ , ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ… ์—†์ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ์‹ค์Šต ์œ„์ฃผ์˜ ๊ฐ•์˜๋ฅผ ์ œ๊ณตํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

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

ํ˜‘์—… ๋ฐ ๊ธฐํƒ€ ๋น„์ฆˆ๋‹ˆ์Šค ๋ฌธ์˜๋Š” yeseong0412@gmail.com ์œผ๋กœ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

๋”๋ณด๊ธฐ

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

์ „์ฒด

8๊ฐœ โˆ™ (50๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

8๊ฐœ

4.9

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

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

    ์ˆ˜๊ฐ•ํ‰ 99

    โˆ™

    ํ‰๊ท  ํ‰์  4.8

    4

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

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

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

      ์ˆ˜๊ฐ•ํ‰ 20

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      ๋”ฐ๋ผํ•ด๋ณด๊ธฐ ์ข‹์Šต๋‹ˆ๋‹ค ์ž…๋ฌธ์šฉ์œผ๋กœ ์ƒ๊ฐํ•˜๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค

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

        ์ˆ˜๊ฐ•ํ‰ 22

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

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

        ๋”ฅํ•œ ๋‚ด์šฉ์€ ๊ธฐ๋Œ€์•ˆํ–ˆ์Šต๋‹ˆ๋‹ค๋งŒ ๋”ฐ๋ผํ•ด๋ณด๊ณ  ์ž…๋ฌธ์šฉ์œผ๋ก  ์ œ๊ฒฉ์ธ ๋“ฏ ํ•˜๋„ค์š” ์ข‹์Šต๋‹ˆ๋‹ค.

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

          ์ˆ˜๊ฐ•ํ‰ 18

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

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

          • Neo
            ์ง€์‹๊ณต์œ ์ž

            ๊ฐ•์˜๋ฅผ ๋“ค์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~!

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

          ์ˆ˜๊ฐ•ํ‰ 74

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

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

          • Neo
            ์ง€์‹๊ณต์œ ์ž

            ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~!!

        Neo๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

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

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

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

        โ‚ฉ8,800