114. Storing the User Form Data

npm create vue@latest


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

Firebase์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ฃผ์š” ์šฉ์–ด ์„ธ ๊ฐ€์ง€๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  1. ๋ฒ„ํ‚ท(Bucket)

    • ๋ฐ์ดํ„ฐ๊ฐ€ ์ €์žฅ๋˜๋Š” ๋ฌผ๋ฆฌ์  ์œ„์น˜๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
      Firebase์—์„œ๋Š” ํ”„๋ฆฌ๋ฏธ์—„ ํ”Œ๋žœ์—์„œ ์—ฌ๋Ÿฌ ๋ฒ„ํ‚ท์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. ์ปฌ๋ ‰์…˜(Collection)

    • ๋ฐ์ดํ„ฐ๋ฅผ ์กฐ์งํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜๋Š” Firestar์˜ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.
  3. ๋ฌธ์„œ(Document)

    • ์ปฌ๋ ‰์…˜ ๋‚ด ๊ฐœ๋ณ„ ๋ ˆ์ฝ”๋“œ๋ฅผ ๋งํ•˜๋ฉฐ, ์‹ค์ œ๋กœ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค.

์ด์ œ Firebase ํŒŒ์ผ์—์„œ ์‚ฌ์šฉ์ž ์ปฌ๋ ‰์…˜์„ ์„ ํƒํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž ์ปฌ๋ ‰์…˜์€ db.collection ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์„ ํƒ๋˜๋ฉฐ, ์ด ์ปฌ๋ ‰์…˜์˜ ์ด๋ฆ„์€ users๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.
์ด ํ•จ์ˆ˜๋Š” ์‚ฌ์šฉ์ž ์ปฌ๋ ‰์…˜๊ณผ ์ž‘์—…ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๋ฉ”์†Œ๋“œ์™€ ์†์„ฑ์„ ๊ฐ–๋Š” ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
์ด ์ปฌ๋ ‰์…˜์„ ๋‚ด๋ณด๋‚ด์–ด ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

๋“ฑ๋ก ์–‘์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋Œ์•„๊ฐ€์„œ, ์ธ์ฆ ๊ฐ์ฒด์˜ ๊ฐ€์ ธ์˜ค๊ธฐ ๋ฌธ์„ ์‚ฌ์šฉ์ž ์ปฌ๋ ‰์…˜ ๊ฐ์ฒด๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
๋“ฑ๋ก ํ•จ์ˆ˜์—์„œ๋Š” ์‚ฌ์šฉ์ž ์ปฌ๋ ‰์…˜์˜ add ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ๋ฌธ์„œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
์ด add ํ•จ์ˆ˜๋Š” ์‚ฝ์ž…ํ•  ๊ฐ์ฒด๋ฅผ ์ธ์ˆ˜๋กœ ๋ฐ›์Šต๋‹ˆ๋‹ค.
์—ฌ๊ธฐ์—๋Š” ๋น„๋ฐ€๋ฒˆํ˜ธ์™€ ์ด์šฉ ์•ฝ๊ด€ ๋™์˜ ์—ฌ๋ถ€์™€ ๊ฐ™์€ ์ผ๋ถ€ ์†์„ฑ์€ ์ œ์™ธํ•œ ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.
์ด ํ•จ์ˆ˜๋Š” ํ”„๋กœ๋ฏธ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฏ€๋กœ async/await ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ๋ฅผ ๋ณด๋‹ค ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด try/catch ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ถ”๊ฐ€ ์ •๋ณด๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งˆ์ณค์Šต๋‹ˆ๋‹ค.
์ด ์ •๋ณด๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์ธ์ฆ ์„œ๋น„์Šค์—์„œ ์ €์žฅํ•  ์ˆ˜ ์—†๋Š” ์ •๋ณด์ž…๋‹ˆ๋‹ค.
์ด๋ฉ”์ผ์€ ์ด๋ฏธ ์ธ์ฆ ์„œ๋น„์Šค์— ์ €์žฅ๋˜์–ด ์žˆ์ง€๋งŒ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—๋„ ์ €์žฅํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ด๋ฉ”์ผ์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ํ•„ํ„ฐ๋งํ•˜๊ณ  ์ •๋ ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

src/includes/firebase.ts
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore, collection } from 'firebase/firestore'

const firebaseConfig = {
  apiKey: 'AIzaSyA4X8qu0cS5CeKS9sExbwWgTP4mW9crP84',
  authDomain: 'vue-guide-2.firebaseapp.com',
  projectId: 'vue-guide-2',
  storageBucket: 'vue-guide-2.appspot.com',
  // messagingSenderId: '475228612189',
  appId: '1:475228612189:web:ff548967df307e9a110fb4'
}

initializeApp(firebaseConfig)
const auth = getAuth()
const db = getFirestore()

const usersCollection = collection(db, 'users')

export { auth, db, usersCollection }


ย 














ย 

ย