공부 이유 : 파이어베이스에 대한 이해 부족 및 앞으로 백엔드에 기반이 될 개념이라
알게된 것 : 파이어스토어 데이터 베이스 기본사용방법 ; 내용 가져오기
파이어스토어 데이터베이스에 내용 입력 :
1. 파이어베이스 인스턴스 초기화 아래에 넣기
$("#id").click(async function () { - 어떤 id 값에 클릭을 넣으면 (;onclick이 안먹기 때문에 ; 전에 만들었던
let doc = {}; openclose 와 makecard 도 되지않음)
await addDoc(collection(db, "콜렉션이름"), doc); - let doc 부터 ~ doc); 까지 실행해라 - 여기가 핵심
})
vs code 파일 이름으로 넣으면 알아보기 쉬울듯
보통 버튼에 클릭을 집어 넣으므로 onclick을 빼고 id 값을 주기 ex) onclick="makecard()" -> id= "postingbtn"
-> $("#id") =>$("#postingbtn")
$("#postingbtn").click(async function () { 포스팅btn이 눌려졌을 때
let doc = {'name':'bob', 'age':30}; <-여기 값이
await addDoc(collection(db, "albums"), doc); 앨범스라는 컬렉션에 저장
})
만든 페이지에서 postingbtn으로 연결했던 버튼을 누르면 파이어스토어 데이터베이스에 올라감 :)
name, age 는 예시고 진짜 필요한(앨범 작업 글 - 쓰고 주소 올리기)
let image = ${'#image'}.val();
let title = ${'#title'}.val();
let content = ${'#content'}.val();
let date = ${'#date'}.val();
만들었던 makecard 내용만⬆️ 복사 후
$("#postingbtn").click(async function () {
let doc = {'name':'bob', 'age':30}; 여기서 내용인 name~30만 지우고, let에 들어가는 내용 입력
다시 내용입력 (물론 저장-> alt b 또는 새로고침 후에) 기록하기 누르면 파이어스토어 데이터베이스에 저장됨
; 단, 카드가 생성되어지진 않음. 데이터베이스에만 저장 됨
데이터 넣고 화면 새로고침하기
⬆️사진의 맨 아래 코드인 awair addDoc(collection(db, "albums"), doc); 아래에
alert ('저장완료!'
window.location.reload();
})
위의 설명과 같이 모듈이 붙으면 onclick이 안먹히므로.. onclick 지우고 id값 주기
ex) 바디에 있던 버튼 수정 <button id="savebtn">추억저장하기</button>
그 다음 스크립트에 있던
$("savebtn").click(async function () {
$('#postingbtn').toggle(); 전에 버튼이 openclose 역할을 했으므로 그대로 데려옴
})
원래 onclick이였을 때 script에서
function openclose() {
$('#postingbox').toggle.(); 이거였는데 ⬆️이렇게 바뀜
}
; 위에 있던 function openclose은 지우기
--------------------------------------------요기까지는 데이터를 넣고 잘 저장됬으면 새로고침해도 그대로 구현됨
파이어스토어 데이터베이스 에서 정보를 지우고 싶다면 네모블록 3번째 우측에 보면 점 3개 -> 문서삭제
이번에는 저장된 데이터 가져오기
상황 : 앨범이미지와 제목등을 쓴 카드를 기록하기 버튼을 누르면 아래로 작성한 카드가 등록됨
다큐먼트가 다 로드가 되면 (카드는 로드된 후에 바로 붙는 것이므로; )
$(document).ready(function () { 로딩이 완료 되면
let url = "주소" ;
fetch(url).then(res => res.json()).then(data => { 여기있는 행동을 해라
let mise(미세먼지 데이터 ; 예시) ;여기서는 미세먼지 나타내는 행동
$('#미세먼지에 붙인 이름').text(mise)
})
--- 그런데 스크립트 타입이 모듈로 적는 순간(파이어베이스쓰려면 모듈로 적어야하므로) ⬆️ 위의 미세먼제스크립트가 나중에 호출
; 즉 필요가 없어짐
let url = "주소" ;
fetch(url).then(res => res.json()).then(data => {
let mise(미세먼지 데이터 ; 예시)
$('#미세먼지에 붙인 이름').text(mise)
}) 요것만 따로 빼주고 다큐먼트는 지우기
아래에 있는 건 데이터 읽기 스켈레톤 코드
let docs = await getDocs(collection(db, "albums")); 카드 가져올 때는 getDocs / 카드를 붙일 때는 addDoc
docs.forEach((doc) => { 가져오면 한장씩 돌아가면서 붙여줌
let row = doc.data();
console.log(row); 콘솔이 적혀 있으니 가서 새로고침 후 콘솔에서 확인해보기
});
let image = $('#image').val(); 부터 function makecard 에 있었음
let temp_html = `~~~` 카드에 뭘 누르면 연동되게끔 했던 코드들
$('#card').append(temp_html); 까지 콘솔 아래에 넣고 펑션은 지우기(콘솔도 지우기)
});
row 가 한 줄을 의미하므로 한줄에는 이미지를 구현, 한줄에는 타이들을 구현.. 해서 $를 row로 바꿔주기
페이지에 가서 새로고침 하면 파이어스토어에 있던 데이터 담은 카드들이 아래에 연동
; 데이터 베이스에 저장되있던 카드정보가 불러와져서 기본 세팅 카드 아래에 정보를 포함한 카드가 생성됨
의문 : 지난 번 튜터님께 4-6강의처럼 파이어스토어 데이터 베이스를 연동하면 onclick이 안먹히는게 아니냐고 여쭤봤는데 아니라고.... 어떤게 맞는거지... 다음에 찾아보기...
회고 : 강의를 여러번 들었는데도 실제로 구현하기 어렵당.. 얼른 익혀서 강의필기 말고도 알게된 점 써보고싶다
: 드디어 파이어스토어 데이터 베이스가 입에 익었다... 맨날 파이어베이스라고 했는데 🤣
: 오늘 미니프로젝트를 발표날이여서 자기 소개 사진을 얼굴로 올릴려 했는데,,, 내 컴퓨터에 있던 파일이여서 이미지가 올라가지 않았다.. 다른 분은 사진을 올렸던데.. 그럼 블로그 처럼 공용화 되어있는 곳에 올려야 이미지가 들어갔을까? 다음에 해봐야겠다. (내 컴퓨터로는 이미지 주소가 안뜨고 슬랙 나에게 보내기 메세지 속 사진의 이미지 주소로는 로딩이 안됬었음 : 파이어스토어 데이터 베이스에 올라가지 않아서 그런가,,? / 근데 우리가 불러온 네이버 이미지도 거기엔 안올라갔잖아... :( 공용화 되어있는 곳에 올려야 읽는건가).. 요것도 찾아보기..
'TIL' 카테고리의 다른 글
| 240422 TIL 여섯번째 날 - java script (0) | 2024.04.22 |
|---|---|
| 240419 TIL 다섯째날+1 - 발표회고 및 kpt (0) | 2024.04.19 |
| 240418 TIL 넷째날; 부족한 부분 보강2-파이어 스토어 데이터 베이스(4강~) (0) | 2024.04.18 |
| 240417 TIL 셋째날 ; 부족한 부분 보강1-자바스크립트(2-6~8) (0) | 2024.04.17 |
| 240416 TIL 둘째 날 (0) | 2024.04.16 |