Side Project
외주일지 2 (html에 firestore연결, 페이지 간 데이터 넘겨주기, ui 뿌리기)
haeunkim.on
2022. 9. 4. 18:27
의식의 흐름대로 백을 연결하다보니까 내가 어떻게 했는지 기억이 안난다..
큰일났다 싶어서 지금이라도 기록 시작하기
https://codingapple.com/unit/firebase-installation-with-npm/
Firebase 설치 방법 몇가지 정리 (쌩HTML사용시 & 리액트사용시) - 코딩애플 온라인 강좌
0:48 개발환경셋팅과 설치할거 있음 4:22 작업폴더만들고 Firebase 프로젝트 만드는 법 9:55 html 파일에 Firebase SDK 설치해야 Firebase 문법 사용가능 (참고) Monterey 버전 os 쓰는 맥북은 firebase serve --port=90
codingapple.com
우선 초기 설정은 이거 보고 했다.
blog.html (글 목록이 보이는 페이지)
스크립트 부분
const db = firebase.firestore(); //db연결하고
console.log(db);
db.collection('posts') //posts collection가져와서 전체 다 뿌려주기
.get().then((result) => {
result.forEach((postInfo) => {
console.log(postInfo);
const convertDate = (date) => { //firestore에 timestamp로 저장된 날짜 format
// whatever formatting you want to do can be done here
var d = date.toString()
return d.substr(4, 11);
}
var date = convertDate(postInfo.data().uploadDate.toDate())
const data = postInfo.data().id;
const postTemplate = `
<div class="col-xl-4 col-md-6">
<div class="post-item position-relative h-100">
<div class="post-content d-flex flex-column">
<h3 class="post-title"><a class="goToPost" style="color: #364D59;" href="post.html?${data}">${postInfo.data().title}</a></h3>
<div class="meta d-flex align-items-center">
<div class="d-flex align-items-center">
<span>${postInfo.data().sub}</span> //데이터 이런식으로 뿌려줌
<!--생략-->
`
document.querySelector('.posts-list').insertAdjacentHTML('afterbegin', postTemplate); //위에서 만든 postTemplate을 posts-list class에 연결해서 넣기!
const aTag = document.getElementsByClassName('goToPost')[0]; //className으로 가져올때 배열형식이기때문에 [0] 붙여야 에러 안뜸!
aTag.addEventListener('click', () => { //제목 누르면 이동할 수 있도록 이벤트 추가
location.href = `post.html?${data}`; //아이디 넘기기
},false);
});
});
</script>
html 부분
<div class="row gy-4 posts-list"></div>
포스트의 게시글 타이틀을 클릭하면 나오는 post.html
post detail 이 나오고 링크 넘어온 아이디로 데이터 가져옴
const receivedData = location.href.split('?')[1]; //파싱
console.log(receivedData);
const db = firebase.firestore();
console.log(db);
db.collection('posts').doc(receivedData).get().then((postInfo) => {
//아이디로 데이터 가져오기
const convertDate = (date) => {
// whatever formatting you want to do can be done here
var d = date.toString()
return d.substr(4, 11);
}
var date = convertDate(postInfo.data().uploadDate.toDate())
const data = postInfo.data().id;
const postTemplate = `
<article class="blog-details">
<h2 class="title">${postInfo.data().title}</h2>
<div class="meta-top">
<ul>
<li class="d-flex align-items-center"><i class="bi bi-clock"></i> ${date}</li>
</ul>
`;
document.querySelector('.blogPost').insertAdjacentHTML('afterbegin', postTemplate);
});
반응형