Firebase 라이브러리 설정

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

 

 

 

addDocs 데이터 추가

$("#id").click(async function () {
    let data = $('#id').val();
   
    let doc = {
        data: data,
        ...
    };
    
    await addDoc(collection(db, "컬렉션 명칭"), doc);
    window.location.reload();
});
  • async와 await는 JavaScript에서 비동기 작업을 처리하기 위한 키워드이다.
  • 이들은 비동기적인 코드를 보다 간결하고 동기적인 스타일로 작성할 수 있도록 도와준다.
    • 비유하면, “손님이 오면 음식을 만든다” 라는 규칙을 정했는데, 손님이 안왔는데 음식부터 나오면 안된다. 그래서, 파이어베이스에 접속해서 데이터를 보내기 전에 잠깐 멈춰두는 것이다.
  • 동기 (Synchronous): 동기적인 작업은 순서대로 진행되며, 이전 작업이 완료되어야 다음 작업이 실행된다.
  • 비동기 (Asynchronous): 비동기적인 작업은 작업들이 동시에 실행될 수 있으며, 한 작업의 완료를 기다리지 않고 다음 작업을 시작할 수 있다.

 

 

 

getDocs 데이터 가져오기

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)

});
  • 컬렉션 명 설정
  • docs.forEach 을 통해 호출한 딕셔너리를 순회
  • 가져온 데이터 변수에 담기
  • append 메서드를 통해 html 붙이기

 

 

배포란?

배포는 소프트웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을 실제 사용자들에게 제공하는 과정을 말한다.

 

URL이란?

URL은 "Uniform Resource Locator"의 약자로, 인터넷에서 특정 리소스의 위치를 나타내는 주소이다. 간단히 말해서, 웹 페이지나 파일의 고유한 주소로 생각할 수 있다.

 

URL은 일반적으로 다음과 같은 형식을 갖는다.

프로토콜://도메인/경로
  • 프로토콜(protocol): 웹 브라우저와 웹 서버 간의 통신 방식을 지정한다. 가장 일반적으로 사용되는 프로토콜은 "http://"와 "https://" 이다.
  • 도메인(domain): 인터넷 상에서 고유한 식별자로 사용되는 웹 사이트의 주소이다. 도메인은 일반적으로 사이트의 이름과 최상위 도메인(Top-Level Domain, 예: .com, .org)으로 구성된다.
  • 경로(path): 웹 사이트 내에서 특정 페이지나 파일의 위치를 지정할 수 있다. 경로는 슬래시("/")로 구분된 디렉토리 경로와 파일명으로 구성된다.
ex) https://spartacodingclub.kr/catalog

예를 들어, https://spartacodingclub.kr/catalog 라는 URL은 HTTPS 프로토콜을 사용하며, spartacodingclub.kr 라는 도메인에 위치한 catalog라는 경로에 있는 페이지를 나타낸다.

 

URL을 사용하여 웹 브라우저에서 웹 페이지에 접속하거나, 웹 서버에서 파일을 다운로드하거나, 웹 사이트 간에 정보를 전달할 수 있다. URL은 웹의 기본적인 동작과 정보의 위치를 식별하는 데 중요한 역할을 한다.

 

 

 

Github Pages로 배포하기

GitHub Pages는 GitHub에서 제공하는 다른 사람들에게 인터넷으로 공유할 수 있는 서비스이다.

 

호스팅? 인터넷에 올리는 것!!

✅ 정적 웹 페이지란?

실시간 변경되는 내용은 없고 HTML, CSS, JavaScript 등으로 이루어진 단순한 웹 페이지를 의미합니다. GitHub Pages를 이용하여 자신의 프로젝트를 온라인으로 호스팅하여 웹 브라우저에서 접속 가능하게 할 수 있죠!

 

1. 저장소에서 settings로 들어간다.

 

2. settings 화면 왼쪽부분에서 Pages를 찾아 클릭

 

3. Branch Name을 main으로 설정하고 save 버튼을 누른다.

 

4. 조금 기다리렸다가 새로고침 하면 화면에 주소가 노출된다.

 

 

 

 

파이어베이스 한계점

파이어베이스를 사용하여 웹 애플리케이션을 호스팅하면 편리함과 빠른 개발 속도를 얻을 수 있지만, 일부 제한 사항이 존재한다.

주요한 한계 중 하나는 백엔드에 대한 컨트롤을 일부 잃게 된다는 점이다.

  • 서버 제어 제한: 파이어베이스는 서버 인프라에 대한 직접적인 컨트롤이 제한된다. 파이어베이스에서 제공하는 기능과 방식에 따라 작업을 수행해야 한다.
  • 확장성 제약: 파이어베이스는 Scale-Up 확장성 측면에서 제한이 있을 수 있다.
  • 종속성: 파이어베이스를 사용하면 Google의 서비스에 의존하게 된다. 파이어베이스 외부의 다른 서비스나 기능을 활용하기 어렵거나 제한적일 수 있다.

 

 

 

 

 

 

 

 

티스토리툴바