Firebase 시작하기

firebase는 무엇인가?

구글 클라우드 기반 NoSQL 데이터베이스로, 웹 서버를 대신 만들어 주는 서비스이다.
별도의 서버 개발 없이 제작 가능하고 백엔드 코드 없이 프론트 지식만으로 웹 서비스를 할 수 있다.

초기 셋팅을 해줄 때 규칙 설정을 해주는 것이 중요하다.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

1) allow read, write: if false 부분의 false를 true로 바꿔준다.
2) 세팅코드를 내가 작성해 놓은 코드에 넣어준다.(프로젝트 설정에 위치한다.)

참조링크

• 데이터 추가 스켈레톤 코드
  $("#id").click(async function () { let doc = {}; await addDoc(collection(db, "콜렉션이름"), doc); })

• 데이터 읽기 스켈레톤 코드
  let docs = await getDocs(collection(db, "콜렉션이름")); docs.forEach((doc) => { let row = doc.data(); console.log(row); });

• window.location.reload() : 현재 페이지 새로고침(리로드)

window.location은 웹 브라우저의 JavaScript 객체로서, 현재 브라우저 창의 주소(혹은 URL)와 관련된 정보를 제공하고 조작할 수 있는 속성(property)이다.
이 객체를 통해 현재 페이지의 URL을 확인하거나, 새로운 URL로 이동하거나 페이지를 다시로드할 수 있다.

window.location.href: 현재 페이지의 전체 URL을 나타낸다. 이 속성을 읽어오거나 변경함으로써 페이지의 URL을 변경
window.location.protocol: 페이지의 프로토콜(http, https 등)을 나타낸다.
window.location.host: 페이지의 호스트(도메인) 정보를 나타낸다.
window.location.pathname: 페이지의 경로 부분을 나타낸다.
window.location.search: 페이지의 쿼리 문자열 부분을 나타낸다.
window.location.hash: 페이지의 해시(fragment) 부분을 나타낸다.
window.location.assign(url): 지정된 URL로 페이지를 이동.
window.location.href = url과 같은 역할을 한다.
window.location.replace(url): 현재 페이지를 새로운 URL로 대체. 뒤로 가기로 이전 페이지로 돌아갈 수 없다.

firebase를 쓰기 위해선 <scrip type = 'module> 이라고 지정

• firebase는 onclick 적용이 안되기에 type에 module이 붙으면 onclick에서 무언가를 부를 수 없게 되어, 따로 코드를 작성하여 버튼에 클릭을 직접적으로 동작할 수 있게 해줘야한다.

  $("#id값").click(async function () { $('#지정하려는 div의 id값').toggle()