Vue.js X Firebase

kyj2471ยท2021๋…„ 1์›” 21์ผ
0

Vue.js

๋ชฉ๋ก ๋ณด๊ธฐ
4/8

Vue.js X firebase

Vue.js ์žฅ์ 

๐Ÿ‘์žฅ์ 

  • ๊ฐ€๋…์„ฑ์ด ๋†’๊ณ  ์ง๊ด€์ ์ด๋‹ค.
  • ReactJS์™€ ์œ ์‚ฌํ•œ ์„ฑ๋Šฅ์„ ๋ณด์—ฌ์ค€๋‹ค
  • ๋นŒ๋“œ ์‹œ์Šคํ…œ, ๋ผ์šฐํŒ…, ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ๊ณต์‹์ ์œผ๋กœ ์ง€์›ํ•ด์„œ ์•ˆ์ •์  ํ™˜๊ฒฝ๊ตฌ์ถ• ๊ฐ€๋Šฅ
  • Vuex๋Š” Vue.js๋งŒํผ์ด๋‚˜ ๋งค์šฐ ์‰ฝ๊ณ  ์ฝ”๋“œ๋„ ๊ฐ„๊ฒฐํ•ด์„œ vue.js์˜ ์žฅ์ ์ด๋‹ค.
    ๊ฒฐ๋ก  ๐Ÿ‘‰ ๋” ๋น ๋ฅด๋‹ค, ๋” ์œ ์—ฐํ•˜๋‹ค, ๋” ๊ฐ€๋ณ๋‹ค ์•„์ง๊นŒ์ง€ ๋‹จ์ ์„ ๋ชป๋А๋ผ๊ฒ ๋‹ค.

Firebase ์žฅ์ 

๐Ÿ‘์žฅ์ 

  • ์ธ์ฆ์‹œ์Šคํ…œ

    firebase์—์„œ ๋กœ๊ทธ์ธ์„ ๋‹ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„์ด๋‹ค.
    ์‹ค์ œ ์„œ๋ฒ„์—์„œ ๋กœ๊ทธ์ธ์„ ๋‹ด๋‹นํ•˜๋Š” ๊ณณ์€ ์—„์ฒญ ๋ณต์žกํ•ด์ง„๋‹ค.
    ๋ณด์•ˆ์ฒ˜๋ฆฌ, ๋น„๋ฐ€๋ฒˆํ˜ธ ์ฐพ๊ธฐ, ์•„์ด๋”” ์ฐพ๊ธฐ, ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฐ”๊พธ๊ธฐ, ์ด๋ฉ”์ผ ์ธ์ฆ ์ด๋Ÿฐ๊ฒƒ๋“ค์„ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค.
    ํ•˜์ง€๋งŒ firebase๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด ๋ชจ๋“ ๊ฒƒ์„ ์ง€์›ํ•ด์ค๋‹ˆ๋‹ค.

  • 3์„ธ๋Œ€ Database

    ์ฃผ๋กœ ์šฐ๋ฆฌ๊ฐ€ ์•Œ๊ณ ์žˆ๋Š” ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค๋ผํ•˜๋ฉด MySql, ์˜ค๋ผํด๊ณผ ๊ฐ™์€ ๊ด€๊ณ„ํ˜• ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค๋ฅผ ๋– ์˜ฌ๋ฆฐ๋‹ค.
    firebase๋Š” NoSql๊ธฐ๋ฐ˜์ด๋‹ค. ๋˜ํ•œ firebase๋Š” RTSP(real time stream protocol) ๋ฐฉ์‹์œผ๋กœ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•ด ์ฃผ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.
    ์ด๋ฐฉ์‹์œผ๋กœ ์ธํ•ด ์†Œ์ผ“ ๊ธฐ๋ฐ˜ ์„œ๋ฒ„๋ฅผ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋น„ํ•ด ์ฝ”๋“œ์˜ ์–‘์ด ์—„์ฒญ๋‚˜๊ฒŒ ์ค„์—ˆ์œผ๋ฉฐ ์ฝ”๋“œ ๋ช‡์ค„๋กœ๋„ ์›ํ•˜๋Š” ๊ตฌ์„ฑ์„ ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

  • Analytics๋ฅผ ์ œ๊ณต

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

Firebase ๋‹จ์ 

๐Ÿ‘Œ๋‹จ์ 

  • ์‘๋‹ต์†๋„

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

๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ

๊ธฐ์—…ํ˜‘์—…์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ด๋ฒˆ์— firebase์™€ Vue.js๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์•˜๋‹ค.
๋ฌผ๋ก  10์ผ์ด๋ž€ ๊ธฐ๊ฐ„์ •๋„ ์‚ฌ์šฉํ•ด ๋ณธ๊ฒŒ ์ „๋ถ€์ด์ง€๋งŒ ํ™•์‹คํžˆ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋А๋‚€์ ์ด ์žˆ๋‹ค.

Vue.js

Vue๋ผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ฒ˜์Œ์œผ๋กœ ์ ‘ํ•˜๋ฉด์„œ ์ฒ˜์Œ์—๋Š” ์ต์ˆ™ํ•˜์ง€ ๋ชปํ•ด์„œ ๋ฒ„๋ฒ…๊ฑฐ๋ ธ์ง€๋งŒ
์ƒ๊ฐ๋ณด๋‹ค ๋งค๋ ฅ์„ ๋А๋ผ๋Š” ์ค‘์ด๋‹ค.
์ด์œ ๋Š” ์ „์ฒด์ ์œผ๋กœ ๋น ๋ฅด๊ฒŒ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฌผ์„ ์–ป์„ ์ˆ˜ ์žˆ๊ณ  ์ง๊ด€์ ์ธ ํ‘œํ˜„์œผ๋กœ ๊ฐ€๋…์„ฑ์ด ์ข‹๋‹ค๋Š” ์ ์—์„œ๋„ ์ „์ ์œผ๋กœ ๋™์˜๋ฅผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
๊ทธ๋Ÿผ์—๋„ ๋‹จ์ ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š”๋ฐ ๋‹จ์ ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ํ™œ์„ฑํ™” ๋ผ๊ณ  ์ƒ๊ฐ์„ ํ•ฉ๋‹ˆ๋‹ค.
์ด์ œ ๊ฐœ๋ฐœ์ด๋ž€๊ฑธ ๋ฐฐ์šฐ๋ฉฐ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ๋Š” ์ €์—๊ฒŒ ๋ง‰ํžˆ๋Š” ๋ถ€๋ถ„์ด ์žˆ์„๋•Œ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ํ™œ์„ฑํ™”๋Š” ์ค‘์š”ํ•œ์ ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
React์˜ ์—„์ฒญ๋‚œ ์ปค๋ฎค๋‹ˆํ‹ฐํ™œ์„ฑํ™” ๋•๋ถ„์— ๋งŽ์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ”์—ˆ๋Š”๋ฐ Vue๋ฅผ ์ ‘ํ•˜๋ฉด์„œ ์ถฉ๋ถ„ํžˆ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ™œ์„ฑํ™”๋Š” ์ด๋ค„์ ธ ์žˆ์ง€๋งŒ React์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋งŒํผ์€ ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์ด๋Ÿฌํ•œ ๋‹จ์ ๋„ ์ €์—๊ฒŒ ํ˜ผ์ž์„œ ๋ฌธ์ œ๋ฅผ ๊ณ ๋ฏผํ•˜๊ฒŒํ•˜๊ณ  ํ•ด๊ฒฐํ•  ์ˆ˜์žˆ๋Š” ํž˜์„ ํ‚ค์›Œ ์ค€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

FireBase

firebase๋Š” ์ฒ˜์Œ ์ ‘ํ•˜๋ฉด์„œ ํŽธ๋ฆฌํ•จ์— ์ •๋ง ๋งŽ์ด ๋†€๋ž์Šต๋‹ˆ๋‹ค.
์‚ฌ์šฉํ•˜๊ธฐ ๋„ˆ๋ฌด ํŽธํ•˜๋ฉฐ ์ƒ๊ฐ๋ณด๋‹ค ์‰ฝ๊ฒŒ ์ด์šฉ๊ฐ€๋Šฅ ํ•˜๋‹ค๋Š” ์  ์ž…๋‹ˆ๋‹ค.
๊ตฌ๊ธ€๋กœ๊ทธ์ธ์„ ํฌํ•จํ•œ ๋งŽ์€ ์†Œ์…œ๋กœ๊ทธ์ธ์— ๋Œ€ํ•œ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์กฐ๊ธˆ๋งŒ ์ฐพ์•„๋ณด๋ฉด ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์žˆ์—ˆ๋‹ค๋Š” ์ ์—์„œ ๋„ˆ๋ฌด ๋†€๋ž์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ๋ณ€ํ•จ์„ ํ”„๋ก ํŠธ์—”๋“œ์ธ ์ œ๊ฐ€ ์ง์ ‘ DB๋ฅผ ๋ณธ์ ์ด ์—†์—ˆ๋Š”๋ฐ Firebase๋ฅผ ํ†ตํ•ด ์ €์˜ DB์˜ ๋ณ€ํ™”๋Š” ๋ฌผ๋ก  ๋ณ€ํ™”์—๋Œ€ํ•œ ํ†ต๊ณ„์ž๋ฃŒ๊นŒ์ง€ ๋‚˜์˜ค๋Š”์ ์—์„œ ๋ฐฐ์šฐ๋Š”๋ฐ ์ฆ๊ฑฐ์›€์„ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

์•ž์œผ๋กœ...

๋„ˆ๋ฌด ์ข‹์œผ์‹  ๋ถ„ ๋ฐ‘์—์„œ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ธฐํšŒ๋งŒ์œผ๋กœ ์ €์—๊ฒ ํ–‰์šด์ธ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๋‚จ์€๊ธฐ๊ฐ„ Firebase, Vue๋ผ๋Š” ๋งค๋ ฅ์ ์ธ ๊ธฐ์ˆ ์„ ๊ผญ ๋‚ด๊ฒƒ์œผ๋กœ ๋งŒ๋“ค์–ด์„œ ๋‚˜๊ฐ€๊ฒ ๋‹ค.

profile
[ frontend-developer ]

0๊ฐœ์˜ ๋Œ“๊ธ€