백엔드_파이어베이스(Firebase) 데이터베이스 업데이트

<스벨트 사용 중>

 

이전에 데이터베이스 세팅을 끝냈으니 

이번에는 사용을 해보자

VScode에서 내가 사용할 페이지로 가서

<script>

  import { getDatabase, ref, set } from "firebase/database";

  function writeUserData(userId, name, email) {

    const db = getDatabase();

    set(ref(db, "users/" + userId), {

      username: name,

      email: email,

    });

  }

</script>

자바스크립트 부분인 상단에 이렇게 작성해 준다.

공식문서에 나온  데이터를 데이터베이스에 올리는 방법이다.

여기서 몇 가지만 수정해서 진행을 할 건데 

그전에 내가 뭘 한 건지를 알아야겠다.

이렇게 대충 만든 글쓰기 폼이 있다.

여기에 무언가 데이터를 입력하면 

데이터베이스에 저장되도록 하는 게 목적이다.

위의 코드를 수정하겠다

<script>

  import { getDatabase, ref, push } from "firebase/database";

  let title;

  let price;

  let description;

  let place;

  function writeUserData() {

    const db = getDatabase();

    push(ref(db, "items/"), {

      title,

      price,

      description,

      place,

    });

  }

</script>

여기서 get 대신에 push를 사용한 이유는 get을 사용하면 중복된 데이터(제목이 똑같은 경우)를 올리게 되면

데이터베이스에서 새로 만들지 않고 기존에 있던

같은 제목 안에 있는 내용을 바꿔버리기 때문이다.

let을 통해서 내가 작성하는 내용들을 지정하고 

그 내용 그대로 함수 안에 넣어준다

여기서 let으로 지정한 각 각의 내용들을 

html에도 반영을 해줘야 한다

  <div>

    <label for="title">제목</label>

    <input type="text" id="title" bind:value={title} />

  </div>

하나만 예로 보자면 

input태그에 bind:value={}를 이용해서

let으로 지정한 것들을 해당하는 input에 입력해 주면 된다.

그리고 스벨트의 좋은 점

<form id="write-form" on:submit|preventDefault={writeUserData}>

form태그 자체에 자바스크립트 내용을 넣어버릴 수 있다.

태그에 직접적으로 넣음으로써 직관성을 높일 수 있다.

이런 식으로 글을 작성해서 글쓰기 완료! 버튼을 눌러보겠다

그리고 다시 파이어베이스 홈페이지에서

내 프로젝트에 데이터베이스로 들어가 보면

이렇게 업데이트되어 있는 게 보인다.