외주일지 2 (html에 firestore연결, 페이지 간 데이터 넘겨주기, ui 뿌리기)

의식의 흐름대로 백을 연결하다보니까 내가 어떻게 했는지 기억이 안난다..

큰일났다 싶어서 지금이라도 기록 시작하기

 

https://codingapple.com/unit/firebase-installation-with-npm/

Firebase 설치 방법 몇가지 정리 (쌩HTML사용시 & 리액트사용시) - 코딩애플 온라인 강좌

 

우선 초기 설정은 이거 보고 했다. 

 

 

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

    });

 

링크는 이렇게