Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์ง€๊ธˆ ๋‹น์žฅ VueJS ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ [์‚ฌ์ฃผ ๋งŒ์„ธ๋ ฅ]

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. VueJS, Vuex ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ„ด, Vuetify ์ปดํฌ๋„ŒํŠธ UI, Vue-router ํŽ˜์ด์ง€ ์ด๋™, Axios ๋ฐฑ์—”๋“œ API ์—ฐ๋™, ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

36๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

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

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

  • VueJS

  • ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„

  • Vuetify ์ปดํฌ๋„ŒํŠธ UI

  • vue-router ํŽ˜์ด์ง€ ์ด๋™

  • Vuex ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ„ด

  • Axios ๋ฐฑ์—”๋“œ API ์—ฐ๋™

์‚ฌ์ฃผ ๋งŒ์„ธ๋ ฅ์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š”
VueJS ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๐Ÿ–ฅ

๋น ๋ฅด๊ฒŒ ๋ฐฐ์šฐ๊ณ  ๋น ๋ฅด๊ฒŒ ๋งŒ๋“œ๋Š”
์‚ฌ์ฃผ ๋งŒ์„ธ๋ ฅ ๐Ÿ“…

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

๊ฐœ์ธ ํ”„๋กœ์ ํŠธ ์ดํ›„ ์„ธ ๊ตฐ๋ฐ ์ง์žฅ์„ NodeJS ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ทจ์—…ํ–ˆ์ง€๋งŒ, ์„ธ ๊ตฐ๋ฐ ๋ชจ๋‘ VueJS๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ๋„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. NodeJS ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ’€์Šคํƒ์ด ํ•„์š”ํ•˜๋‹ค๋ฉด VueJS๋Š” ์ข‹์€ ์„ ํƒ์ง€์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜์—์„œ ๋งŒ๋“ค๊ฒŒ ๋  ์‚ฌ์ฃผ ๋งŒ์„ธ๋ ฅ

๐Ÿ“ข ์ˆ˜๊ฐ• ์ „ ํ™•์ธํ•ด์ฃผ์„ธ์š”!

  • ๋ณธ ๊ฐ•์˜๋Š” ํ…์ŠคํŠธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ๋ฐ”๋ž๋‹ˆ๋‹ค.
  • ์ˆ˜๊ฐ• ์ค‘ ์ž˜ ์•ˆ๋˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์œผ๋ฉด ์งˆ๋ฌธ๋‹ต๋ณ€ ํŽ˜์ด์ง€๋ฅผ ์ด์šฉํ•ด ์ฃผ์„ธ์š”! 

๊ฐ•์˜ ํŠน์ง• โœจ

#1.
๋‹จ๊ธฐ๊ฐ„์— ๊ฒฝํ—˜ํ•˜๋Š”
ํ”„๋ก ํŠธ์—”๋“œ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์™ธ์—๋„ ๊ณต๋ถ€ํ•  ๊ฒƒ๋“ค์ด ๋งŽ์Šต๋‹ˆ๋‹ค. AWS ์ธํ”„๋ผ์™€ ๋ฐฑ์—”๋“œ๋„ ๊ฐœ๋ฐœํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๋„ ๋ฐœ์ƒํ•˜๋ฉฐ, ์‹ค์ œ ๋‹ด๋‹น์„ ํ•˜์ง€ ์•Š๋”๋ผ๋„ ์•Œ๊ณ  ์žˆ์œผ๋ฉด ํ˜‘์—…์— ์ข‹์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ ์ „ ๋ถ„์•ผ์— ๋Œ€ํ•ด ์ „๋ฐ˜์ ์œผ๋กœ ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ํ•œ ๋ถ„์•ผ๋ฅผ ๊นŠ์ด ์žˆ๊ฒŒ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด ์ˆ˜์—…์„ ํ†ตํ•ด ๊ฐœ๋ฐœ ํ•™์Šต ๊ธฐ๊ฐ„์€ ์งง๊ฒŒ, ๊ฐœ๋ฐœ ์†๋„๋Š” ๋น ๋ฅด๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

#2.
Vue.js๋ฅผ ํ™œ์šฉํ•œ
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ

์‚ฌ์ฃผ ๋งŒ์„ธ๋ ฅ ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. Vuex ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ„ด, Vuetify ์ปดํฌ๋„ŒํŠธ UI, Vue-router ํŽ˜์ด์ง€ ์ด๋™, Axios ๋ฐฑ์—”๋“œ API ์—ฐ๋™, ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ๋“ฑ VueJS๋ฅผ ํ™œ์šฉํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์–ด์š”.

#3.
NodeJS
๋ฐฑ์—”๋“œ ์ฝ”๋“œ ์ œ๊ณต

NodeJS ๋ฐฑ์—”๋“œ ์ฝ”๋“œ ๋ฐ ์‹คํ–‰ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. NodeJS ๋ฐฑ์—”๋“œ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์€ ๋‹ค๋ฅธ ๊ฐ•์˜๋กœ ์ค€๋น„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์ฃผ ๋งŒ์„ธ๋ ฅ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์€ ์•„๋ž˜ ๊ฐ•์˜์™€ ํ•จ๊ป˜ํ•ด๋ณด์„ธ์š”.


ํ•™์Šต ๋‚ด์šฉ ๐Ÿ“š

  1. ์„œ๋น„์Šค ์†Œ๊ฐœ ํ›„ ๋ฐฑ์—”๋“œ์™€ ํ˜‘์—…์„ ํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๊ฐœ๋…์ธ HTTP ํ†ต์‹ , JWT ์ธ์ฆ, API ์„ค๊ณ„๋ฅผ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.
  2. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ… ํ›„ ์™„์„ฑ๋œ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋กœ์ปฌ์—์„œ ๋ฐฑ์—”๋“œ์™€ ํ”„๋ก ํŠธ์—”๋“œ ์„œ๋น„์Šค๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.
  3.  ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ(์ปดํฌ๋„ŒํŠธ, Vuex, API ์—ฐ๋™)๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ์ž‘์„ฑํ•˜๋Š” ๊ณผ์ •์„ ๋‹จ๊ณ„๋ณ„๋กœ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ โœ’๏ธ

์ด๋ ฅ ์‚ฌํ•ญ

  • ์ปดํ“จํ„ฐ ์ „๊ณต ํ•™์‚ฌ ๋ฐ ์„์‚ฌ ์กธ์—… 
  • 6๊ฐœ ํšŒ์‚ฌ์—์„œ ๊ฐœ๋ฐœ ๊ฒฝํ—˜
  • ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜

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

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

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ๋‹จ๊ธฐ๊ฐ„์— ํ•™์Šตํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
์ง€๊ธˆ ๋‹น์žฅ์ž…๋‹ˆ๋‹ค.

716

๋ช…

์ˆ˜๊ฐ•์ƒ

30

๊ฐœ

์ˆ˜๊ฐ•ํ‰

88

๊ฐœ

๋‹ต๋ณ€

3.8

์ 

๊ฐ•์˜ ํ‰์ 

10

๊ฐœ

๊ฐ•์˜

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

์ „์ฒด

43๊ฐœ

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

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

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!