2024.12.10.화

kinkin_a·2024년 12월 10일

TIL

내일배움캠프 TIL

목록 보기

16/100

웹개발 종합반 4,5주차

웹페이지에서 새로 받은 데이터를 저장하는 곳->서버

백엔드: 서버 db api
이번 수업에선 직접 백엔드를 만드는게 아니라 구글에서 제공하는 백엔드 사용.

Firebase: 구글이 개발한 백엔드 플랫폼. 가입만 하면 일정공간 누구나 쓸 수 있다. 클라우드 기반 NoSQL 데이터베이스다.

데이터베이스: 데이터를 저장하고 여러 사람들이 관리하는 프로그램.(책을 보관하는 책장같은 것)
보관보다는 잘 찾는 것이 주 목적.
회사들이 데이터베이스를 팔 때 이것을 세일즈 포인트로 쓴다고 함.

SQL: 관계형 데이터베이스. 정리된 정보를 다룰 때 사용. 엑셀 같이 정형화된 공간에 데이터 넣어야 하므로, 공간 형식이나 크기에 맞지 않으면 데이터 저장이 안됨. 틀이 짜여져 있어 실수가 나면 안됨. 은행이나 대기업에서 많이 사용.
NoSQL: 비관계형 데이터베이스, 복잡하거나 유연한 정보를 다룰 때 사용. 틀이 없고, 앞으로 바뀔 여지가 많다. 주로 스타트업에서 많이 사용.
엑셀처럼 보이지만 차이는 대신 찾는 게 굉장히 빠르다.
인덱스로 정렬이 되어 있어 수십만, 수백만건의 데이터도 바로 찾아올 수 있음.

  <script type="module">

script가 코드 제일 마지막에 불려오고, onclick 함수 실행이 안되므로 동적으로 코드를 작성하 click함수를 작성.

      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 = {
          apiKey: "AIzaSyDSuGHigUgp3gjt9oLer2J2GrGwQGQmKLw",
          authDomain: "sparta-ce2e4.firebaseapp.com",
          projectId: "sparta-ce2e4",
          storageBucket: "sparta-ce2e4.firebasestorage.app",
          messagingSenderId: "531082306855",
          appId: "1:531082306855:web:550042be36194d99e3f502",
          measurementId: "G-R8CQ3V7Y6M"
      };
      // Firebase 인스턴스 초기화
      const app = initializeApp(firebaseConfig);
      const db = getFirestore(app);

데이터베이스 불러오는 코드

      $("#postingbtn").click(async function () {
          await addDoc(collection(db, "이름"), doc);
          alert('저장 완료!');
          window.locaton.reload();
      })

버튼 클릭시 데이터베이스에 저장

      let docs = await getDocs(collection(db, "albums"));//데베에서 저장 데이터 가져오기
       docs.forEach((doc) => {
           let row = doc.data();
           ...