6/27 TIL

비로그인시 게시글의 댓글 불러오기

각 게시글의 상세페이지를 들어갔을 때, 로그인한 상태라면 정상적으로 출력되지만 비로그인 상태라면 댓글이 보이지 않았다.

window.onload = async function () {
  const urlParams = new URLSearchParams(window.location.search);
  articleId = urlParams.get("article_id");

  await loadArticles(articleId);
  await loadComments(articleId);
};

async function loadArticles(articleId) {
...
  // 게시글 수정·삭제 기능

  const parsedPayload = JSON.parse(payload); // 현재 로그인 유저 정보
  const currentUser = parsedPayload.user_id;

  const articleEdit = document.getElementById("article_edit"); // 게시글 수정·삭제창
  // 작성자에게만 기능 노출
  if (currentUser == articleUserPk) {
    articleEdit.style.display = "block";
  } else {
    articleEdit.style.display = "none";
  }
}

// 댓글
async function loadComments(articleId) {
  const payload = localStorage.getItem("payload"); // 현재 로그인 유저 정보

  const response = await getComments(articleId); // 해당 아티클의 댓글

  // 댓글 edit기능을 위한 유저 식별

  const parsedPayload = JSON.parse(payload); // 현재 로그인 유저 정보
  const currentUser = parsedPayload.user_id;

  const commentList = document.getElementById("comment_list");
  commentList.innerHTML = ""; // 새로운 댓글을 포함한 댓글창을 새로고침 하지 않고 보여주기

  // 댓글 작성하기
  response.forEach((comment) => {
    commentId = comment["id"];
    // 프로필 이미지 가져오기
    const User = comment.user;
    const UserAvatar = User.avatar;

    // 유저 프로필 이미지로 분할
    if (UserAvatar) {
      if (comment.user === currentUser) {
        commentList.innerHTML +=
        ...
...

그런데 loadComments가 아니라 loadArticles에 속해있는 코드가 오류가 발생하는 바람에 진짜 풀어야 할 문제를 보지도 못하고 있었다.

const currentUser = parsedPayload.user_id;

현재 로그인 유저와 게시글 작성자를 비교해서 수정·삭제 버튼을 숨김/노출 하도록 하기위한 코드이다.
null값이기 때문에 계속 오류가 뜨고 다음으로 진행이 안되고 있었다.
그래서 onload를 할 때 loadArticles 함수에서 오류가 발생 하더라도 진행되도록

window.onload = async function () {
  const urlParams = new URLSearchParams(window.location.search);
  articleId = urlParams.get("article_id");

  try {
    await loadArticles(articleId);
  } catch (error) {
  }
  // await loadArticles(articleId);
  await loadComments(articleId);
};

try catch 문을 사용했다. python의 try except와 같았기 때문에 수월했다.

그리고 진짜 문제를 마주했는데...
?
이것도 try catch잖아?

try { const parsedPayload = JSON.parse(payload); // 현재 로그인 유저 정보
  const currentUser = parsedPayload.user_id;
  } catch {
    const commentList = document.getElementById("comment_list");
    commentList.innerHTML = "";
    response.forEach((comment) => {
    
      commentId = comment["id"];
      // 프로필 이미지 가져오기
      const User = comment.user;
      const UserAvatar = User.avatar;

      commentList.innerHTML += `<li class="media d-flex mb-3">
        <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" class="mr-3" alt="프로필 이미지" width=50 height=50>
        <div class="media-body">
          <h5 class="mt-0 mb-1">${comment.username}</h5>
          <p id="comment_content${commentId}">${comment.content}</p>
        </div>`;
  })
  }

아주 쪼금 더 번거로웠지만 마찬가지로 해결했다!

코드를 조금만 더 다듬으면 될 것 같다!

가보자고!