웹개발 기초

👀 Today I Learn

• JQeury
• Firebase
• Git

---

오늘은 내배캠 1일차이다.
이전에 프론트엔드를 조금 접해본 적이 있지만, 잊은 것이 많았기 때문에 웹개발 기초를 다지기 위해 기본으로 제공된 강의를 수강했다.

1️⃣ 데이터베이스와 Firebase

🤔 데이터베이스란?

데이터베이스는 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
→ 잘 정리해두고, 나중에 필요할 때 적재적소에 꺼내 쓰기 위해서!

이 데이터를 클라우드에 저장하고 쓸 수 있는데, 대표적인 사례가 바로 Firestore Database!

:구글의 클라우드 기반 NoSQL 데이터베이스

2️⃣ firebase를 활용하자

Firebase를 활용하면 웹페이지를 만들때 데이터를 생성(create), 읽기(read), 추가(update), 삭제(delete)가 용이해진다

0. 기본 설정

먼저 firebase를 불러오기 위해서 기본적 설정을 마쳐야한다.]
firebase 웹에서 프로젝트 설정 -> 일반 -> 내 앱 -> SDK 설정 및 구성 -> 구성
으로 선택하면 api key를 복사할 수 있게 뜬다. 이걸 복사해서 이 기본 틀의 firebaseConfig에 붙여넣자

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

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            //이 부분은 자신의 firebase에서 가져온다.
        };

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

자 그러면 기본 세팅은 끝났다.

1. [addDoc] 데이터를 추가하기

데이터를 넣고 싶으면 아래의 코드를 이용한다.
#id에는 컴포넌트의 id를 넣어주고, 콜렉션 이름에 데이터 묶음으로 쓰고 싶은 이름을 지정해서 만들어준다.

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

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

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

같은 콜렉션 이름을 사용해야 아까 추가한 데이터를 불러올 수 있다.
이 getDocs를 사용하면 firebase에 저장한 데이터를 동적으로 불러올 수 있기 때문에 화면을 새로고침해도 아까 넣은 데이터를 동일하게 불러올 수 있다!

---

+@, Visual Studio Code 코드 단축키

1. 전체 코드 선택
   cmd + a
2. 코드 정렬법
   cmd + k + f