웹개발

4주차 웹개발

fw3d 2025. 3. 31. 18:43

 

 

4주차 배울내용

눈에보이는 부분                               눈에보이지 않는 부분

HTML CSS JAVASCRIPT << - >>  SERVER DB API

백엔드와 파이어베이스를통해 데이터를 넣고빼는법

 

 

4-2FIREBASE 시작하기

파이어베이스란 구글이 개발한 모바일 및 웹 개발 플랫폼. 

웹서버를 대신 만들어 주는 서비스 

서버개발없이 제작 가능 

백엔드 코드 한 줄 없이도 프론트지식(HTML, CSS, JS)만 알아도 웹 서비스 출시 가능!

 

 

 

 

 

4-3 데이터 베이스 개념익히기

 

1.관계형 데이터 베이스  SQL 정리된 정보를 다룰 때 싸용 은행, 대기업

고객-나이-성별-이메일 관계형 데이터베이스 체계화 되어있다. 틀이 정해져있다.

2.비관계형 데이터 베이스 NoSQL 복잡하거나 유연한 정보를 다룰 때 사용 스타트업

자유도가 높다. 바뀔여지가 많은 데이터들을 저장하기 좋다. 

데이터베이스는 

 

4-4 Firestore Database 시작하기 

파이어 스토어는 구글의 클라우드 기반 NOSQL 데이터 베이스이다. 

FIRESTORE는 데이터를 (컬렉션 문서 필드)로 구조화하여 정의한다. 

 

<script type="module">

 

            // Firebase SDK 라이브러리 가져오기
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
      import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


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


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


 

firestore 구성 설정 script에 복붙 데이터베이스와 연결하기

 

라이브러리 import 연결, config데이터가져오기, 인스턴스 초기화 한세트

 

4-5

 

 

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

 

<button id="postingbtn" type="button" class="btn btn-dark">
          기록하기
        </button>

 

클릭시 엘범컬렉션에 데이터 저장

 

 

 

 

 

 

$("#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);
      })

 

 

4-06 addDoc 데이터 넣고 화면 새로고침하기

await addDoc(collection(db, "albums"), doc);
          alert('저장 완료');
          window.location.reload();

새로고침 window함수 window.location.reload();

 

타입모듈화하면 onclick으로 부를수가 없게된다.

onclick >> id값으로변경

$("#savebtn").click(async function () {
        $("#postingbox").toggle();
      })

 

<button id="savebtn">추억 저장하기</button>

 

4-07 getDoc firestore Database 에서 데이터 가져오기

파이어스토어 import 설정을 위해 모듈화를 하면 스크립트코드가 가장나중에 실행된다.  비동기적으로 실행된다. (async, await로 구성)

 

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

 

db 에서 데이터 가져오는 코드 getDocs

 

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}">
                      <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                      </div>
                      <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                      </div>
                    </div>
                  </div>`;
        $("#card").append(temp_html);
      });

 

get docs 로 데이터 가져오기

 

4-08 돌아보기

파이어베이스 = 남이만들어놓은 데이터베이스 

addDoc함수로 데이터베이스에 저장 

script를 모듈화 하면 script가 비동기실행으로 바뀐다.

onclick이 막힌다. 클릭을 동적으로 만들어줘야한다.