2023.12.27 TIL(1) #Firebase에 데이터 저장하기

Server
- 데이터를 저장하는 곳

데이터 베이스
- 나중에 데이터를 잘 "찾으려고" 잘 적제해 두는 곳
(1) 관계형 데이터베이스 (SQL)
- 틀이 정해져 있음
- 자유도가 낮음
=> 이미 틀이 정해져 있고 실수가 나면 안되는 데이터 
(2) 비 관계형 데이터베이스(NoSQL - Not only SQL)
- 정해진 틀이 없음
- 자유도 높음
=> 앞으로 바뀔 여지가 많은 데이터

 

Firebase란?

- 구글에서 만든 클라우드 기반의 NoSQL

- <script type=”module”> 
( script type=”module” 하는 순간부터 기존 onclick 등의 함수 잘 작동 안됨)

- Firestore 기본 세팅코드

// Firebase SDK 라이브러리 가져오기

        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";

        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional

        const firebaseConfig = {

          본인 설정 내용 채우기

        };;

        // Firebase 인스턴스 초기화

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

 

---

 

Firebase에 데이터 저장하기

- 기본 뼈대
$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

> 나만의 추억앨범 페이지의 기록하기 버튼을 누르면 카드의 내용이 Firebase에 저장되고, 저장완료! 메세지와 새로고침이 되도록 하시오.

0. Firebase에 데이터 추가하는 기본 뼈대 가져오기
1. "기록하기" 버튼을 누르면 카드의 내용이 Firebase에 저장되고
2. 저장이 되면 "저장완료!" 메세지
3. 새로고침
이 순서로 해결해볼 것임!

0. Firebase에 데이터 추가하는 기본 뼈대 가져오기 + 콜렉션이름 짓기
$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

1. "기록하기" 버튼을 누르면 카드의 내용이 Firebase에 저장되고

(1) 기록하기 버튼에 id 부여( id="postingbtn") 후 뼈대에 반영
  $("#postingbtn").click(async function () {
  let doc = {          }
  await addDoc(collection(db, "albums"), doc);
  })  

(2) 카드의 내용이 Firebase에 저장
- 카드의 내용이 뭔데? 카드를 만드는 html에 들어갈 값. 카드를 만드는 html을 보자. 어디가 새로 들어갈 곳이야?

 <div class="col">

                <div class="card h-100">

                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

                        class="card-img-top" alt="...">

                    <div class="card-body">

                        <h5 class="card-title">앨범 제목</h5>

                        <p class="card-text">앨범 내용</p>

                    </div>

                    <div class="card-footer">

                        <small class="text-body-secondary">앨범 날짜</small>

                    </div>

                </div>

            </div>

빨간색 부분이 새로 들어가야 할 값. 
- ok. 일단 알겠어. 저기 들어가야하는 값이 Firebase에 저장되어야 한다는 거잖아.
- Firebase라는 애는 어떻게 자료를 저장하는데? => 딕셔너리 형식으로
그럼 저 뼈대를 봐바. 딕셔너리면 doc이라는 애 안에 a : b 즉, 'name' : 'bob'  즉, '값이 저장되는 곳' : '실제 저장되는 값' 형으로 저장이 되겠네?
- 그럼 '값이 저장되는 곳'이 내 코드 중에서는 어디일까? 없네!
  저장될 곳에 id 부여해주자. => id = "image"
- 그럼 '실제 저장되는 값'은 뭔데?
   < id = 'image'>로 부여된 곳의 value 값 => ${'#image'}.val()
- 오케. '값이 저장되는 곳' : '실제 저장되는 값"  다 해결됐어. 이제 doc에 넣어보자! 
  let doc = {  
  'image' =  ${'#image'}.val()    }
-> 아 근데 ${'#image'}.val()  이게 너무 길다. 새로운 변수로 선언해줄래.

            let image = $('#image').val();

            let title = $('#title').val();

            let content = $('#content').val();

            let date = $('#date').val();

 

-> 그런 다음에 doc이라는 애 한테 넣어줄거야.

 

            let image = $('#image').val();

            let title = $('#title').val();

            let content = $('#content').val();

            let date = $('#date').val();

            let doc = {

                'image': image,

                'title': title,

                'content': content,

                'date': date

            };

            await addDoc(collection(db, "albums"), doc);

2. 저장이 되면 "저장완료!" 메세지

(1) Firebase로 들어가서 내가 지정한 콜렉션이름에 데이터가 잘 저장되었는지부터 확인해봐야겠지?
(2) "저장완료!" 함수 추가

await addDoc(collection(db, "albums"), doc);

            alert('저장 완료!');

 

3. 새로고침

(1) 새로고침하는 함수 추가

  await addDoc(collection(db, "albums"), doc);

            alert('저장 완료!');

            window.location.reload();

        })

 

 

+) 나만의 추억앨범에서 기존의 “추억 저장하기” 버튼에 openclose로 toggle 했던 걸 -> firebase에서 하는
방법

- <script type=”module”> 이 붙는 순간, 기존의 makeCard, openclose 등의 함수가 작동을 안해
=> 그럼 Firebase의 뼈대로 함수를 작성 해야겠구만? 
- 그 뼈대 이거야
$("#id").click(async function () {
})

1. 먼저 뼈대에 있는 저 id, 버튼할 곳에 부여 해줘야겠지?
  버튼 쪽에 기존 함수 지우고 id = "savebtn"

2. 함수 붙이기
  $("#savebtn").click(async function () {
   $(‘#postingbox’).toggle()
})  

 

---

느낀 점

 Firebase에서 데이터 가져오는 법 이해하는 데에 엄청 오래걸렸다ㅠㅠ

쉽게 쉽게 알려주시지만 코드를 작성하는 중간중간 자꾸 왜? 라는 생각에 사로잡혀 분석하는 데에 오래 걸렸기 때문..

그래도 이해해서 다행이다.

(내가 이해한 대로 썼는데 이렇게 이해하는 게 맞는지 모르겠으나..^^)

아무튼 빨리 내 힘으로 내 url을 만들어보고 싶다!!