[📗 왕초보 웹개발 종합반] 4주차: firebase project 1

📗 4주차에 배울 내용

1. Firebase 시작하기
2. 데이터베이스 개념 이해하기
3. Firestore Database 시작하기
4. [addDoc] Firestore Database에 데이터 넣기
5. [addDoc] 데이터 넣고, 화면 새로고침 하기(location, alert)
6. [getDocs] Firestore Database에서 데이터 가져오기

 

4주차는 백엔드에 대해 배운다.

---

1. Firebase 시작하기

파이어베이스(Firebase)란?

파이어베이스(Firebase)는 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼이다.
백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심기능에 집중할 수 있도록 도와준다.

• 웹서버를 대신 만들어주는 서비스
• 서버 개발 없이 제작 가능

 

파이어베이스(Firebase) 로그인 후 프로젝트 생성

앱추가(Web) -> SDK 코드 저장해두기 (CDN 사용)

https://firebase.google.com/?hl=ko

Firebase | Google's Mobile and Web App Development Platform

---

2. 데이터베이스 개념 이해하기

데이터베이스란?

데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음

데이터베이스를 사용하면 정보를 쉽게 찾고 업데이트할 수 있고, 많은 양의 정보를 효율적으로 관리할 수 있다.

 

데이터베이스의 종류

---

3. Firestore Database 시작하기

파이어스토러(Firestore)란?

구글의 클라우드 기반 NoSQL 데이터베이스 서비스로 데이터를 저장하고 관리할 수 있는 기능을 제공합니다.

• 컬렉션(Collection): 서랍장 그룹, 여러 개의 문서들이 특정한 주제 또는 유형으로 그룹화되어 있다.
• 문서(Document): 서랍장 안에 들어있는 작은 종이, 하나의 종이는 여러 개의 필드(Field)로 구성되어 있습니다.
• 필드(Field): 종이에 저장된 데이터, 각 필드는 값으로 구성됩니다. 예를 들어, 사용자 문서의 필드로는 "내용", "날짜", "이미지주소", “제목” 등이 있을 수 있다.

 

 

파이어스토어 시작하기

• 홈 > Cloud Firestore > 데이터베이스 만들기
• Cloud Firestore위치는 asia-northeast(Seoul) 선택
• 프로덕션 모드에서 시작하기

 

파이어스토어 규칙 수정하기

• 상단바 > 규칙
• false -> true 변경 후 게시

 

 

파이어스토어 세팅 코드 넣기

1번 단계에서 저장해둔 SDK 코드 추가하기

(프로젝트 설정에 가면 다시 확인할 수 있다.)

// 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";

// Firebase 구성 정보 설정
const firebaseConfig = {
	본인 설정 내용 채우기 
};

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

 

album/index.html 파일에 해당 코드를 추가했다.

---

4. [addDoc] Firestore Database에 데이터 넣기

데이터 추가 해보기 (TEST)

$("#postingbtn").click(async function () {
    let doc = {'name': 'bob', 'age': 30}
    await addDoc(collection(db, "albums"), doc);
})

 

입력값 넣어보기

$("#postingbtn").click(async function () {
    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);
})

input 값 넣고, 기록하기 버튼 누르기

잘 추가되었다.

---

5. [addDoc] 데이터 넣고, 화면 새로고침 하기(location, alert)

저장 완료 액션 추가하기

alert('저장완료!');
window.location.reload();

---

6. [getDocs] Firestore Database에서 데이터 가져오기

데이터 가져오는 법

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
});

 

 

저장된 데이터 가져오기

let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
    let row = doc.data();

    let image = row['image'];
    let title = row['title'];
    let content = row['content'];
    let date = row['date'];

    let temp_html = `
    <div class="col">
        <div class="card h-100">
            <img src="${image}"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${content}</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">${date}</small>
            </div>
        </div>
    </div>`;
    $('#card').append(temp_html);
});

 

 

 

---

 

* 오늘 학습에서 주의할 점

<script type="module"></script>

• type="module"을 사용하면 기본적으로 엄격 모드(strict mode)가 적용된다.
• 이 모드에서는 this가 undefined로 설정될 수 있고, 그로 인해 onclick 이벤트 핸들러가 예상대로 동작하지 않을 수 있다. (onclick, onchange, onload 대신 이벤트 리스너를 사용하자)
• onclick대신 addEventListener()로 이벤트 연결하는 것이 좋다.

---

 

 

 

 

---

https://github.com/gajicoding/web_basic

GitHub - gajicoding/web_basic

 

---