[내일배움캠프-사전캠프 10일차] Web 5주차

---

1. FireBase 라이브러리 세팅

<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);
</script>

2. addDocs 데이터를 추가

- 먼저 데이터를 읽어오구

- 그 데이터를 딕셔너리로 만들어 준 후

- 딕셔너리를 addDoc로 넣어주기. await addDoc(collection(db, ""), doc)

$("#id").click(async function () {
  let data = ${"#id"}.val()

  let doc = {

    };

    await addDoc(collection(db, ""), doc)
});

- async와 await는 JavaScript에서 비동기 작업을 처리하기 위한 키워드. 이들은 비동기적인 코드를 보다 간결하고 동기적인 스타일로 작성할 수 있도록 도와줍니다.

3. getDocs 데이터 가져오기

- 가져올려면, getDocs 를 해야함.

- 가져올 시, 딕셔너리 형태로 가져오게 됨.

- await getDocs(collection(db,'컬렉션이름')) 으로 호출하여

- docs.forEach 호출한 딕셔너리를 순회 도는 것임

- 돌때마다, html 태그를 append 해주는 거다 알면 됨.

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

     let data = row['data']

     let temp_html = `
       //html 내용
         ${data}
     `

     ${""}.append(temp_html)

});

4. Github 배포

- 프로토콜(protocol): 웹 브라우저와 웹 서버 간의 통신 방식을 지정합니다. 가장 일반적으로 사용되는 프로토콜은 "http://"와 "https://"입니다.

- 도메인(domain): 인터넷 상에서 고유한 식별자로 사용되는 웹 사이트의 주소입니다. 도메인은 일반적으로 사이트의 이름과 최상위 도메인(Top-Level Domain, 예: .com, .org)으로 구성됩니다.

- 경로(path): 웹 사이트 내에서 특정 페이지나 파일의 위치를 지정합니다. 경로는 슬래시("/")로 구분된 디렉토리 경로와 파일명으로 구성됩니다.

- 아래는 깃 허브 배포 방법을 정리한 것

1) Setting 클릭

2) Pages 클릭

3) Branch를 main으로 바꾼 후 save 를 클릭해준다. 그러고 새로고침을 눌러주면 Visite site가 뜸.

5. Firebase 한계점

- 파이어베이스를 사용하여 웹 애플리케이션을 호스팅하면 편리함과 빠른 개발 속도를 얻을 수 있지만, 일부 제한 사항이 존재합니다. 주요한 한계 중 하나는 백엔드에 대한 컨트롤을 일부 잃게 된다는 점!

- 서버 제어 제한: 파이어베이스는 서버 인프라에 대한 직접적인 컨트롤이 제한됩니다. 파이어베이스에서 제공하는 기능과 방식에 따라 작업을 수행해야 합니다.

- 확장성 제약: 파이어베이스는 규모에 따른 가로 확장성 측면에서 제한이 있을 수 있습니다.

- 종속성: 파이어베이스를 사용하면 Google의 서비스에 의존하게 됩니다. 파이어베이스 외부의 다른 서비스나 기능을 활용하기 어렵거나 제한적일 수 있습니다.

---

오늘의 회고

- 오늘은 오후에 일정이 있어서 오전에 혼자 공부를 시작했다.

- Web 강의를 완강했다. 다소 빠른 수강이다, 그래서 아직 부족한 부분이 많다고 생각한다.

- 추후에 복습을 할것인데, 그때 firebase를 이용해 혼자만의 html을 만들어보아야겠다고 생각했다.

> 전에 하다 말았던 Todoapp 을 지금 만들어 보는 건 어떤가 생각이 든다 'ㅡ'