웹 개발 A to Z - 4주차

서버=데이터를 보관하는 곳

F.E. = HTML / CSS / JAVASCRIPT
B.E. = SERVER / DB / API

Firebase = 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줍니다. (출처:[스파르타코딩클럽] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 4주차)
ㄴ요즘엔 클라우드 환경에서 개발자들을 도와주는 도구들이 잘 개발되있다.
ㄴ자유도 측면에선 조금 떨어질 수 있다.

DB판매사들은 각각 어떤 상황에서 효율적이고 좋은지가 세일즈 포인트다.

DB
ㄴ프로그램과 같음

=SQL(관계형 DB)
ㄴ은행, 대기업 : 정리된 정보를 다룰 때
ㄴ엑셀로 비유할 수 있다
-ㄴ칸이 정해져있다.
ㄴ틀이 짜여져있고 사람의 실수가 일어나면 안되는 곳

=NoSQL(비관계형 DB)
ㄴ스타트업 : 복잡하거나 유연한 정보를 다룰 때
ㄴ자유도가 높다
ㄴ정형화 되어있지 않다.
ㄴ앞으로 정보들이 바뀔 여지가 많은 곳
-document : 데이터를 모아두는 꾸러미

INDEX : 수많은 데이터들에 바로 접근해 즉시 가져올 수 있는 것?

올?
DB
ㄴtable
ㄴ정보가 많은 데이터베이스가 정렬되지 않는 형태에서 무언가를 불러온다.'full-scan 떳다!'

<script (여기에 type="module"을 넣는 것으로 시작!)>
ㄴonclick / openclose 세팅이 잘 작동하지 않게 된다.

==Firestore 세팅 코드==
Firestore Database : 구글의 클라우드 기반 NoSQL DB

    <script type="module">
        // 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);

↓데이터 추가용 뼈대
$("#id").click(async function () {
    let doc = {};      <------------------------------------이 두 줄이 핵심
    await addDoc(collection(db, "콜렉션이름"), doc); <-┘
})
====================
$("#mypostingbtn").click(async function () {
            let image = $('#image').val();       <---1.얘네를
            let title = $('#title').val();            <-┘
            let content = $('#content').val();   <-┘
            let date = $('#date').val();           <-┘

            let doc = {                             <---2.해라
                'image':image,
                'title':title,
                'content':content,
                'date':date,
            };
await addDoc(collection(db, "albums"), doc);<---3.여기에

tj/window.location.reload(); : 창을 새로불러올 때

**Firebase를 사용하는 순간 script는 가장 나중에 불러와진다. 

↓데이터 읽기용 뼈대
let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
}); 

저장 addDocs
불러오기 getDocs

p.s-3주차 까지는 속성과정으로 팍팍 으랏차 하고 끌어올려진 느낌이었는데, 4주차 때는 뭔가 커다란 문법 덩어리들이 툭 툭 붙여졌지만 나름 수월했던 것 같다. 
그리고 마참내 백엔드, 데이터베이스, SQL 등등에 대해 배우며 내가 들어가려는 던전에 한 발자국 내딛었다는 느낌이 진하게 들어 신났다. 계속계속 해보자.