🙏11/24 내배캠 React 19일차

 

🐜 오늘 할 일

• 프로젝트 진행하기

---

📆    계획표

시간	내용	결과
8:00~21:00	프로젝트	☁️
21:00~23:00	깃, spa강의	☁️

 

---

 

👩🏼‍🌾   오늘의 줍줍 " " 🌾🌾 

 

오늘은 spa형식으로 파일을 전환한 후 mainpage가 랜딩되었을 때, post데이터의 nickName,image,profileImage,title데이터를 가져오는 함수를 입력하였다.

export const getPostList = async () => {
  const postList = document.getElementById("main_columns");
  console.log(postList);
  postList.innerHTML = "";
  const docId = ""; //test
  // const docId = sessionStorage.getItem("docId");

  try {
    const querySnapShot = await getDocs(collection(dbService, "post"));
    querySnapShot.forEach(async (doc) => {
      console.log(2, doc.data());
      // console.log(doc.id);  <- 불러온 post값의 id이다. 이걸 가져와서 post가 누구의 post인지 확인할 수 있음
      const { userId, image, title } = doc.data();
      const { profileImage, nickName } = await getUserProfile(userId);
      const temp_html = `<figure onclick="goToPostId">
                          <img
                            id="image"
                            src="${image}"
                          />
                          <figcaption>
                            <a id="title">${title}</a>
                            <div id="users">
                              <img id="profileImage"
                              src="${profileImage}"
                              />
                              <a class="name">${nickName}</a>
                            </div>
                          </figcaption>
                        </figure>`;

      const div = document.createElement("div");
      div.innerHTML = temp_html;
      postList.appendChild(div);
    });
  } catch (err) {
    console.error(err);
    return alert("다시 시도해주세요.");
  }
};

 

 

 

공부해야할것

• sessoin storage란?브라우저를 닫는 순간 그 데이터가 사라진다.
• : 데이터 저장의 목적이 아닌 장바구니,사용자 정보등 해킹위험이 적은정보를 휘발성데이터로 저장하기 위한 목적으로 sessionStorage또는 Localstorage를 사용한다.
• post를 불러온 후 post를 클릭 시 데이터 값으로 이동해야할 때 사용해야 할 방법 localsotrage랑은 다름

메인페이지의 collectipon.post의 데이터들을 가져온다.

→ 데이터들을 다 가져오고, main-column에서 각 postId로 이동해야하는데, 어떻게 이동할 것인가?

→ main-columns에 onclick값을 주고, onclick=”goToPost”로 변수값을 준다.

→ goToPostInfo는 postid가 지정되어있다.

→ 근데 여기서 사용해야하는 함수가 session storage? 이건 무엇인가?

session storage의 key값은 docId / value값은 어떻게 해야하는지 모르겠다 아직…

 

풀어야할 것

: post를 클릭하였을 때 postId를 확인한 후, 그 페이지로 이동하는 함수를 만들어야 한다.

session storage를 활용하여 doc.id를 찾아내고, 그 값을 goToPostId함수에 입력해야한다.