본캠프 2일차

neww·2024년 10월 1일

본캠프

목록 보기

2/7

Firebase 기본 세팅 설정

go to console - 프로젝트 sparta-

false → true로 바꾸기

프로젝트 개요 -톱니바퀴- 프로젝트 설정

앱의 키 식별자가 포함된 firebase 구성 객체 복사

---사이트 기본 세팅 끝

VS code에서 기본 세팅

1. 코드의 일부분을 수정
<script>을 → ```<script type="module">``` 로 바꾸기 

2.Firestore 세팅코드 캠프에서 나눠준 코드

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

firebase config는


firebase 구성 정보 설정 바꾸기 전	바꾼 후

- 기본 세팅 설정완료

데이터 추가 스켈레톤 코드firebase 인스턴스 초기화 밑에

데이터 추가 스켈레톤 코드
$("").click(async function () {
let docs = await getDocs(collection(db, ""));
docs.forEach((doc) => {
	 //코드 작성
});
코드 설명

$("#id").click(async function () {빈칸}

버튼의 아이디를 넣어서 버튼을 클릭하면, 작동되는 함수를 만드는 곳
let doc = { 빈칸 };

영화 카드에 넣어줄 데이터들, 입력 폼에서 받는 것

이미지(image), 제목(title), 내용(content), 날짜(date)를 변수에 담기
await addDoc(collection(db, "콜렉션이름"), doc); 
})
postbox에 입력했던 값들을 데이터베이스에 넣기

영화 데이터베이스 컬렉션에 넣을 곳 컬렉션을 써주기

추가자료

alert→ 팝업 창을 표시하여 사용자에게 메시지를 전달하는 기능을 제공
reload → 현재 페이지를 새로고침 하는 기능을 제공
async 비동기 작업 처리 키워드
await 비동기 작업 처리 키워드
async await
비동기적인 코드를 보다 간결하고 동기적인 스타일로 작성할 수 있도록 도와준다.
데이터를 보내기 전에 잠깐 멈추는 것

동기 (Synchronous): 동기적인 작업은 순서대로 진행되며, 이전 작업이 완료되어야 다음 작업이 실행됩니다.

비동기 (Asynchronous): 비동기적인 작업은 작업들이 동시에 실행될 수 있으며, 한 작업의 완료를 기다리지 않고 다음 작업을 시작할 수 있습니다.

데이터 가져요기 스켈레톤 코드
let docs = await getDocs(collection(db, ""));
docs.forEach((doc) => {
	 //코드 작성
});
컬렉션 명 설정해 주기

이미지, 제목, 별, 추천 이유 값들을 변수에 담기

카드 코드 가져와서 변수에 담아주기

append 메서드를 통해 카드 붙여주기

[완성코드] 영화 데이터 가져와서 카드 생성

id 값에 click을 줌
doc= 넣고 싶은 데이터
콜렉션이름 = albums

<div class="mybtn">
     <button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>
     <button type="button" class="btn btn-outline-dark">닫기</button>

onclick="makeCard()"을 지우고 id값<button id="postingbtn">

이름과 나이로 데이터 저장 테스트 성공


코드	firebase 데이터 저장

새로고침 코드window.location.reload(); 결과


새로고침 코드`window.location.reload();`	결과


코드 적용 전	바꾼 후

<button>추억 저장하기</button>

에서 id="savebtn"으로 바꾸기

추억저장하기에서 기록하기 박스가 사라졌다가 생기는 기능 추가하는 코드? 과정 openclose 사용 안하고 id태그 사용

script type=module 에 모듈이 붙는 순간 onclick에서 부를 수가 없다.

직접 버튼에 id태그로 클릭을 적용시켜야 한다.

기록하기에 id="postingbtn" 태그 바꾼 코드