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

[2021] ์š”์ฆ˜ ๋ˆ„๊ฐ€ ์œ ๋ฃŒ๋กœ ์›น์„œ๋น„์Šค ๊ตฌ์ถ•ํ•˜๋‚˜, ํŒŒ์ด์–ด๋ฒ ์ด์Šค์˜ ๋ชจ๋“  ๊ฒƒ - Vue.js

"์š”์ฆ˜ ๋ˆ„๊ฐ€ ์œ ๋ฃŒ๋กœ ์›น์„œ๋น„์Šค ๊ตฌ์ถ•ํ•˜๋‚˜, Firebase์˜ ๋ชจ๋“  ๊ฒƒ" ๊ฐ•์˜๊ฐ€ Vue.js๋กœ ์ƒˆ๋กœ ๋Œ์•„์™”์Šต๋‹ˆ๋‹ค. 1์ธ ์ฐฝ์—…์„ ๊ฟˆ๊พธ๋Š” ์ดˆ๊ธ‰ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ๋ฐ”์ด๋ธ”์ด ๋˜์–ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ’€์Šคํƒ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

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

  • Vue.js

  • Service Worker

  • Firebase

  • PWA

Firebase๋กœ ์‰ฝ๊ฒŒ, ๋ฌด๋ฃŒ๋กœ ์›น ์„œ๋น„์Šค ๊ตฌ์ถ•ํ•˜๊ธฐ! 

Firebase๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•˜๊ฒŒ ์„œ๋น„์Šค ๊ตฌ์ถ•ํ•˜๊ธฐ

์›น ์„œ๋น„์Šค/์›น ์•ฑ์„ ๊ตฌ์ถ•ํ•˜๊ณ  ์‹ถ์€๋ฐ, ์–ด๋””์„œ๋ถ€ํ„ฐ ๊ตฌ์ถ•ํ•ด์•ผ ํ• ์ง€ ๋ง‰๋ง‰ํ•œ ์ž…๋ฌธ์ž๋ถ„๋“ค์„ ์œ„ํ•œ ๊ฐ•์˜!

์–ด๋ ต๊ฒŒ aws๋‚˜ ๋ณ„๋„ IDC ํ˜น์€ cafe24 ๋“ฑ์„ ํ†ตํ•ด ์›น์„œ๋น„์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค
๋” ์‰ฝ๊ฒŒ ๊ทธ๋ฆฌ๊ณ  ๋ฌด๋ฃŒ๋กœ ์›น ์„œ๋น„์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊ฐ•์ขŒ๋ฅผ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ณธ ๊ฐ•์˜๋Š” Google Firebase๋ฅผ ํ™œ์šฉํ•œ ์ดˆ๊ฐ„๋‹จ ๋ฌด๋ฃŒ ์›น ์„œ๋น„์Šค(ํ˜น์€ ์›น์•ฑ) ๊ตฌ์ถ• ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•œ ๊ฐ•์ขŒ ์ž…๋‹ˆ๋‹ค.

๋„์›€์ด ๋˜๋Š” ๋ถ„๋“ค

  • ๋ฆฐ์Šคํƒ€์—… ๊ฐœ๋ฐœ์ž ๋ถ„
  • 1์ธ ์ฐฝ์—…์„ ํ•˜๋ ค๋Š” ๊ฐœ๋ฐœ์ž ๋ถ„
  • ๋ฌด๋ฃŒ๋กœ ์›น์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•ด์•ผ ํ•˜๋Š” ์Šคํƒ€ํŠธ์—…
  • Vue.js / React.js / Angular ์ค‘ ๊ณ ๋ฏผ์„ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž
  • ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ์‹œ๋Š” ๋ถ„
  • ์ž˜ ์ž‘์„ฑ๋œ ํƒฌํ”Œ๋ฆฟ์„ ํ™œ์šฉํ•ด์„œ ๊ฐœ๋ฐœ์„ ํ•˜๊ณ  ์‹ถ์€ ์ดˆ๊ธ‰ ๊ฐœ๋ฐœ์ž

๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค

[Git ๋ฝ€๊ฐœ๊ธฐ] (feat. ๊ฐ€์žฅ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๋Š” Git์˜ ๋ชจ๋“  ๊ฒƒ)

  • Github desktop ์„ค์น˜
  • Github ๊ณ„์ • ์ƒ์„ฑ
  • Repository ์ƒ์„ฑ
  • Clone Repository 
  • Branch ์ƒ์„ฑ
  • ํ˜‘์—…์‹œ ํ•„์š”ํ•œ Pull Request ๋ฐฉ๋ฒ•
  • Github desktop ํ™œ์šฉํ•œ Commit/Revoke ๋ฐฉ๋ฒ•
  • ๋””์Šค์ฝ”๋“œ ๋ฉ”์‹ ์ €์— ์›นํ›… ์—ฐ๋™

[Vue ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์…‹์—…]

  • yarn ์„ค์น˜
  • ํ…œํ”Œ๋ฆฟ์„ ํ™œ์šฉํ•œ ๋นŒ๋“œ
  • Firebase Hosting ์— ๋ฐฐํฌํ•ด ๋ณด๊ธฐ

[Vue์— ๋Œ€ํ•œ ์ดํ•ด] (feat. ์˜ˆ์ œ๋กœ ๋”ฐ๋ผํ•˜๋Š”)

  • Vue ์— ๋Œ€ํ•œ ์ดˆ๊ฐ„๋‹จ ์ดํ•ด
  • Vue Router ์— ๋Œ€ํ•œ ์ดˆ๊ฐ„๋‹จ ์ดํ•ด

 

[์„œ๋น„์Šค ๋งŒ๋“ค์–ด ๋ณด๊ธฐ]

  • ํšŒ์›๊ฐ€์ž… ํ™”๋ฉด ๊ตฌ์ถ•
  • DB Insert/Update/Delete/Query ์‹ค์Šต
  • ๋ฌผ๋ฆฌ์  ํŒŒ์ผ ์—…๋กœ๋“œ/๋‹ค์šด๋กœ๋“œ ๊ด€๋ฆฌ ์‹ค์Šต
  • Service Workter/PWA ์—ฐ๋™ ๋ฐฉ๋ฒ•

[๋๋งบ์Œ]

  • Vue ์‚ฌ์šฉ์‹œ ์œ ์šฉํ•œ npm Library ์„ค๋ช… ( Excel upload,download / Cookie / Lazy Image load )
  • Vue ์‚ฌ์šฉ์‹œ ์ฃผ์˜ํ• ์ 
  • Vue vs Angular vs React ๋น„๊ต ์„ค๋ช…

์ฐธ๊ณ ์‚ฌํ•ญ

  • ํ•™์Šต ํ™˜๊ฒฝ : Mac / Chrome / npm
  • ํ”„๋กœ๊ทธ๋žจ : Visual Studio Code
  • ์‚ฌ์ „ ์ง€์‹ : Javascript ๊ธฐ์ดˆ ์ง€์‹ / npm ๊ธฐ์ดˆ ์ง€์‹ / Vue.js ๊ธฐ์ดˆ์ง€์‹
  • ์„ ์ˆ˜ ๊ณผ์ • : "2021, ์š”์ฆ˜ ๋ˆ„๊ฐ€ ์œ ๋ฃŒ๋กœ ์›น์„œ๋น„์Šค ๊ตฌ์ถ•ํ•˜๋‚˜, ํŒŒ์ด์–ด ๋ฒ ์ด์Šค์˜ ๋ชจ๋“ ๊ฒƒ - Javascript"
  • 3๋งŒ์› ์ƒ๋‹น์˜ ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ ๋ฌด์ƒ ์ œ๊ณต(๊ฐ•์ขŒ๋ฅผ ํ†ตํ•ด ์ถ”๊ฐ€๋œ ๋ชจ๋“ˆ ๋ฐ ๊ธฐ๋ณธ ํƒ‘์žฌ ๋ชจ๋“ˆ ํฌํ•จ)
  • ๊ถŒ๊ณ ์‚ฌํ•ญ : ์ „๋ฌธ ๊ฐ•์‚ฌ๊ฐ€ ์•„๋‹Œ ์‹ค์ œ ํ˜„์—ญ ๊ฐœ๋ฐœ์ž๋กœ์„œ ๊ฐ•์˜๊ฐ€ ๋งค๋„๋Ÿฝ์ง€ ๋ชปํ•˜๊ณ  ๋ชฉ์†Œ๋ฆฌ๋„ ๋งค๋„๋Ÿฝ์ง€ ๋ชปํ• ์ˆ˜ ์žˆ์œผ๋‹ˆ ํ•„ํžˆ ๋ฌด๋ฃŒ ์˜์ƒ์„ ์‹œ์ฒญํ•ด๋ณด์‹œ๊ณ  ๊ฐ•์˜ ๊ตฌ๋งค ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ

David

  • ํ˜„ ) ์Šคํ† ์–ด๋งํฌ CTO (2017.11 ~ )
  • ์ „ ) Applied Material / ์›น ๊ฐœ๋ฐœ์ž / ๋ถ€์žฅ (2017.05 ~ 2018.10)
  • ์ „ ) ์‚ผ์„ฑ ๋””์Šคํ”Œ๋ ˆ์ด / ์ž๋™๋ฌผ๋ฅ˜ ์‹œ์Šคํ…œ(RTD) ๊ฐœ๋ฐœ์ž / OLED ์„น์…˜์žฅ (2006.05 ~ 2016.05 )

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

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

  • Vue ์ดˆ์‹ฌ์ž

  • ํ˜ผ์ž์„œ ๋ชจ๋“ ๊ฑธ ํ•˜๊ณ  ์‹ถ์€ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž

  • ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ๊ณ ์ž ํ•˜์‹œ๋Š” ๋ถ„

  • Native ์ฝ”๋”ฉ ์—†์ด ์›น์œผ๋กœ ์•ฑ ํšจ๊ณผ๋ฅผ ๋ณด๊ณ  ์‹ถ์œผ์‹ ๋ถ„

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

  • Javascript

  • jQuery

  • HTML

  • CSS

  • Vue.js ๊ธฐ์ดˆ

  • npm ๊ธฐ์ดˆ

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

538

๋ช…

์ˆ˜๊ฐ•์ƒ

34

๊ฐœ

์ˆ˜๊ฐ•ํ‰

55

๊ฐœ

๋‹ต๋ณ€

4.4

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

๐Ÿš€ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž, ๋ฐ์ด๋น„๋“œ ์ž…๋‹ˆ๋‹ค.
๐ŸŒฟ ์ •๋ถ€์ง€์› ์‚ฌ์—… MVP / ์Šคํƒ€ํŠธ์—… ์ดˆ๊ธฐ ๊ฐœ๋ฐœ 24์‹œ๊ฐ„ ์ƒ์‹œ ๋ฌธ์˜ โญ•
๐Ÿซก MES/AI/๊ด€์ œ ๋ฐ ๊ธฐํƒ€ ์‹œ์Šคํ…œ ๊ตฌ์ถ• ์ปจ์„คํŒ…
๐ŸŒฟ ํฌํŠธํด๋ฆฌ์˜ค๋Š” ์•„๋ž˜ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š” ๐Ÿฅฐ

ํฌํŠธํด๋ฆฌ์˜ค๋งํฌ

๋”๋ณด๊ธฐ

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

์ „์ฒด

17๊ฐœ โˆ™ (2์‹œ๊ฐ„ 55๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

13๊ฐœ

4.5

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

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

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ํŒŒ์ด์–ด๋ฒ ์ด์Šค๋•œ์— ๋ณด๊ธดํ–ˆ๋Š”๋ฐ, ์ด์ „ ๊ฐ•์˜์—์„œ ์„ค๋ช…ํ–ˆ๋‹ค๊ณ  ์Šคํ‚ตํ•˜์‹œ๋Š” ๋ถ€๋ถ„์ด ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค. (firebase realtime database, cloud firestore)์ด๋‘˜์— ๋น„๊ต๋Š” ๋งˆ์ง€๋ง‰๊ฐ•์˜์— ๋‹ค๋ฃจ์‹ ๋‹ค๊ณ  ํ•˜์…จ๋Š”๋ฐ ์—†๋„ค์š”.. ๋งˆ์ง€๋ง‰์—๋Š” ์˜์ƒ ๋‘๊ฐœ๊ฐ€ ์ œ๋ชฉ๋งŒ๋‹ค๋ฅด๊ณ  ๊ฐ™์€๋‚ด์šฉ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋Œ€์ฒด์ ์œผ๋กœ ์•„์‰ฌ์šด์ ์ด ์žˆ๊ธดํ–ˆ์ง€๋งŒ, ์งง๊ฒŒ ์ž˜๋‹ค๋ค„์ฃผ์‹ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

      ์ˆ˜๊ฐ•ํ‰ 1

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      ๋ฌด์ „๊ณต์ž์ธ๋ฐ ์ทจ๋ฏธ๋กœ ๋ทฐ+ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํ˜ผ์ž์„œ ํ•ด๋ณด๋‹ค ๋ง‰ํ˜€์„œ ์ฐพ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ˜ผ์ž์„œ ํ• ๋•Œ๋Š” npm์ด๋ผ๋˜๊ฐ€ ๋“ฑ๋“ฑ์˜ ๋ฒ„์ „์ด ๋งž์ง€ ์•Š์•„ ํ™˜๊ฒฝ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ํ•˜๋ฃจ ์ฃ™์ผ ๊ฑธ๋ฆฌ๊ณ  ๋นŒ๋“œํ• ๋•Œ ์žกํžˆ์ง€๋„ ์•Š๋Š” ์˜ค๋ฅ˜ ์žก๋А๋ผ ํ•˜๋ฃจ ์ฃ™์ผ ๊ฑธ๋ฆฌ๊ณ  ๊ทธ๋žฌ๋Š”๋ฐ. ์ด๋ฒˆ ๊ฐ•์˜๋Š” ์˜ˆ์ œ ํŒŒ์ผ๋กœ ๋”ฐ๋ผ๊ฐ€๋‹ˆ ํฐ ์–ด๋ ค์›€์€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œ๊ตฐ๋ฐ node-css ๋ฒ„์ „ ์—๋Ÿฌ ๋‚˜์„œ ์ง€์šฐ๊ณ  ๊น”๊ณ  ํ–ˆ๋˜ ๊ฒƒ์€ ํ˜ผ์žํ–ˆ์„๋•Œ๋ณด๋‹ค ๋น„๊ต์  ์‹œ๊ฐ„์€ ์ ˆ์•ฝํ•œ ๊ฒƒ ๊ฐ™์•„์š”. ๊ฐ•์‚ฌ๋‹˜ ์ˆ˜์—…์ž๋ฃŒ pdf๋กœ ์ฃผ์‹  ๊ฒƒ ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค๋งŒ, ๊ฐ•์˜ ํ•˜๋‹จ์—๋„ ์žˆ๋‹ค๋ฉด ๋ฐ”๋กœ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ์„๊ฑฐ ๊ฐ™์•„ ์ง„๋„ ๋”ฐ๋ผ๊ฐ€๊ธฐ ํŽธํ•  ๊ฒƒ ๊ฐ™์•„์š”. ๋” ์ข‹์€ ๊ฐ•์˜ ๋งŒ๋“ค์–ด์ฃผ์‹ค๊ฑฐ๋ผ ๋ฏฟ๊ณ  ํ•˜๋‚˜๋” ๋ง์”€๋“œ๋ฆฌ๋ฉด ์ž‘์—…ํด๋”๋ž‘ ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํด๋” ๋ช…์ด ๋น„์Šทํ•ด์„œ ์–ด๋””์„œ ์–ด๋””๋กœ ๋ณต์‚ฌํ•˜๋Š”๊ฑด์ง€ ๋ช‡๋ฒˆ ๋Œ๋ ค๋ดค์Šต๋‹ˆ๋‹ค. ์ €๋„ ๋งฅ์“ฐ์ง€๋งŒ ๋ฏธ์…˜์ปจํŠธ๋กค ํ™”๋ฉด์œผ๋กœ ํœ™ํœ™ ์ „ํ™˜ํ•˜๋‹ˆ ์ดˆ๋ณด์ž๋Š” ๋”ฐ๋ผ๊ฐ€๊ธฐ ํž˜๋“ค๋”๋ผ๊ณ ์š”. ์›๋ž˜๋„ ํ•ฉ๋ฆฌ์ ์ธ ๊ฐ€๊ฒฉ์ธ๋ฐ ํ• ์ธ๊นŒ์ง€ ๋”ํ•ด์„œ ์ด์ •๋„ ๊ธˆ์•ก์— ๊ฒฐ๊ณผ๋ฌผ๊นŒ์ง€ ๋‚˜์˜จ๊ฒƒ์— ๋„ˆ๋ฌด ๋งŒ์กฑํ•ฉ๋‹ˆ๋‹ค.

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

        ์ˆ˜๊ฐ•ํ‰ 64

        โˆ™

        ํ‰๊ท  ํ‰์  4.9

        5

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

        ํŒŒ์ด์–ด๋ฒ ์ด์Šค ๋ฐฐ์šฐ๊ธฐ ์ข‹์•„์š”

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

          ๋‹คํ–‰์ž…๋‹ˆ๋‹ค. ๋„์›€์ด ๋˜์–ด์„œ์š”.. ^^

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

        ์ˆ˜๊ฐ•ํ‰ 4

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

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

        firebase์™€ ์—ฐ๋™ํ•˜๋Š” vue ๊ฐ•์ขŒ๋กœ ์งง์ง€๋งŒ ๊ฐ•๋ ฅํ•˜๊ฒŒ ๋ฐฐ์›Œ๊ฐ‘๋‹ˆ๋‹ค.

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

          ์ˆ˜๊ฐ•ํ‰ 4

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

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

          ๊ฐ€๋ณ๊ฒŒ ์‚ฌ์šฉ๋ฒ• ํ›‘๊ณ  ๊ฐ€๊ธฐ ์ข‹์Šต๋‹ˆ๋‹ค

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

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

          โ‚ฉ17,600