[TIL] 내일배움캠프 React 과정 2022.11.27

오늘 수정한 부분

• 메인 페이지 최신순 정렬
• 게시물 수정, 삭제 기능 구현
• 내가 작성한 글에만 수정, 삭제 버튼이 보이도록 설정하기
• 프로필 페이지에 내가 작성한 글만 불러오기 + css 작업
• 회원가입 후 프로필 이미지를 업로드하지 않고 게시물을 올렸을 때 프로필 이미지가 null로 뜨던 문제 해결
• 로그인하지 않으면 메인 페이지에 데이터가 불러오지 않던 문제 해결
• 게시물 수정 페이지에서 이미지를 새로 업로드하면 페이지 안에서 기존 이미지를 새로운 이미지로 교체하기
• 수정 페이지 css 작업
• 메인 페이지 css 작업

 

 

해결하는 경험

프로필 이미지가 null로 뜨는 문제

회원가입 후 프로필 이미지를 업로드하지 않으면 DB에 저장된 프로필 이미지 URL이 null로 떠서 게시물 상세 페이지에서 프로필 이미지를 불러오지 못하는 문제가 발생한다. 그래서 회원 가입할 때 프로필 이미지에 기본 프로필 이미지를 넣어주도록 코드를 수정하고 싶었다.

 

updateProfile(authService.currentUser, {
            displayName: signUpNickname ? signUpNickname : null,
            // 기본 프로필 이미지 저장하기
            photoURL: "/assets/blankProfile.webp" ? "/assets/blankProfile.webp" : null
})

회원가입 기능을 구현하는 함수 안에 회원가입할 때 프로필 이미지에 기본 프로필 이미지를 저장하도록 코드를 추가했다.

 

 

 

메인 페이지 카드 CSS 수정하기

수정 전

수정 후

메인페이지에 각 게시물마다 제목과 닉네임, 작성 날짜가 뜨도록 설정했는데 이 세 항목의 폰트 스타일이 전부 동일하니까 뭔가 단조로운 느낌이 들었다. 그래서 제목은 폰트 굵기를 주고 닉네임에는 색상을 약간 다르게 주고 작성 날짜는 폰트 크기를 줄이고 회색으로 수정했다. (닉네임 부분은 색깔이 마음에 안 들어서 최종적으로는 검은색 계열로 수정했다.)

 

그리고 카드마다 간단한 transform 호버 효과를 주었다.

.product:hover {
  transform: scale(1.02);
}

 

 

 

갑자기 상세 페이지가 로드되지 않는 문제

메인 페이지에서 게시물을 클릭했을 때 들어가는 상세 페이지에서 갑자기 헤더는 잘 뜨는데 하단에 포스트 내용을 불러오지 못한다.

<div class="post__btn">
  <button id="edit">수정</button>
  <button id="delete">삭제</button>
</div>

알고 보니 수정 삭제 버튼의 위치를 옮기려고 잠깐 주석처리해 놨었는데 post__btn 클래스에 상세 페이지를 불러오는 append 메서드가 붙어있던 것이었다. 주석을 해제하니 금방 문제가 해결되었다!

 

 

 

 

로그인하지 않았을 때는 메인페이지에 데이터를 불러오지 못하는 문제

if (path === "/") {
    // 프로필 이미지 변경했을 때 헤더의 이미지도 변경해 주기
    document.getElementById("headerProfileView").src =
    authService.currentUser.photoURL ?? "/assets/blankProfile.webp";

로그인했을 때는 메인 페이지가 잘 뜨는데 로그인하지 않았을 때는 firestore에 저장된 게시물의 데이터를 불러오지 못하는 문제가 있었다. 프로필 이미지를 변경했을 때 헤더의 프로필 이미지까지 업데이트하도록 코드를 작성했었는데 이 부분이 문제였다. 로그인하지 않았으니 불러올 유저의 프로필 이미지 URL이 없어서 문제가 발생하는 것이었다.

 

if (user) {
      // 프로필 이미지 변경했을 때 헤더의 이미지도 변경해 주기  
      document.getElementById("headerProfileView").src =
      authService.currentUser.photoURL ?? "/assets/blankProfile.webp";

그래서 해당 코드를 메인페이지일 때가 아니라 가입한 유저일 때 작동하도록 if문의 조건을 수정했더니 문제가 해결되었다.

 

 

 

게시물 수정 페이지에서 이미지 변경 시 구현 사항

일단 여기까지 성공함

내가 원하는 기능은 게시물 수정 페이지에서 원래의 게시물 이미지를 불러오고 수정을 원하는 새로운 이미지를 업로드했을 때 기존 이미지가 새로운 이미지로 교체되는 것이었다. 일단은 input 태그와 javascript를 이용해서 기존 이미지 밑에 새로운 이미지를 보여주는 것까지는 성공했는데 동일한 위치에 이미지가 교체되는 것까지는 구현하지 못했다.

 

...?

<img src="[object HTMLImageElement]">

내가 새로 업로드한 이미지의 링크가 이렇게 끔찍하게(?) 생겼는데 이걸 현재 이미지가 있는 부분에 src url만 교체하는 방법으로 시도해봤지만 img src에 [object HTMLImageElement]가 담겼다는 에러와 함께 실패했다.

 

 

function setThumbnail(event) {
        var reader = new FileReader();

        reader.onload = function (event) {
          var img = document.createElement("img");
          img.setAttribute("src", event.target.result);

          document.querySelector("div#image_container").appendChild(img);
          $("#editView").attr("src", img);
        };
        reader.readAsDataURL(event.target.files[0]);
};

일단은 이 문제보다는 다른 사항을 해결하는 것이 우선이라고 생각해서 약간 부족하지만 기존 이미지가 엑박 처리되고 그 위치에 새로운 이미지가 들어가는 방법으로 마무리했다.

 

참고 https://sinna94.tistory.com/entry/JavaScript-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

 

 

게시물 최신순으로 가져오기

export const getpagelist = async () => {

    const q = query(collection(dbService, "post"), orderBy("date", "desc"));
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => { ...
    });
};

메인 페이지에 게시물 데이터를 불러올 때 최신순으로 정렬해서 가장 최근에 작성한 글이 첫 번째로 뜨면 좋겠다고 생각했다. 이미지를 업로드할 때 입력했던 필드 값인 date를 이용해서 내림차순으로 정렬하는 것은 어렵지 않은데 아쉬운 점이 있다면 firestore에 날짜를 저장할 때 date: 20221127 이런 식으로 시간은 저장하지 않기 때문에 하루 동안 작성한 글을 시간순으로 최신 정렬하는 것을 힘들 거 같다는 점이다.

 

+) 내가 이런 점이 아쉽다고 얘기를 했더니 게시물 업로드를 담당하신 팀원 분이 필드 형식을 추가하는 게 어떻냐고 먼저 제안해주셔서 게시물을 작성할 때 필드 값에 작성 시간까지 넣는 것으로 수정하여 시간까지 고려해서 최신순으로 게시물을 정렬하는 것이 가능해졌다.

 

우리는 firestore에 작성일을 저장할 때 내림차순 정렬을 쉽게 하기 위해서 date: 20221128121609 이런 식으로 숫자만 등록했는데 보통 이렇게 하지 않는 건지 궁금하다. 2022월 11월 25일 이런 식으로 문자열이 들어가니까 정렬 기능이 적용되지 않는 거 같아서 수정했던 부분인데 발표 후 튜터님의 피드백을 받고 다른 방법이 있었던 건지 궁금해졌다. 

const today = new Date();
const year = today.getFullYear();
const month = ("0" + (today.getMonth() + 1)).slice(-2);
const day = ("0" + today.getDate()).slice(-2);
const h = addZero(today.getHours());
const m = addZero(today.getMinutes());
const s = addZero(today.getSeconds());
const dateString = year + month + day + h + m + s;

addDoc(collection(dbService, "post"), {
      // date: 20221128121609 형태로 데이터를 저장
	date: parseInt(dateString),
}

<div class="foodContent__register-Date">
 	<!-- 결과물 2022-11-25 -->
	작성일: ${dates.slice(0, 4)}-${dates.slice(4, 6)}-${dates.slice(6, -6)}
</div>

근데 날짜를 date: 20221128121609 이렇게 저장하면 내림차순 정렬이 용이하다는 장점이 있기는 하지만 숫자로만 이루어진 날짜 및 시간 데이터를 만드는 과정이 번거롭고, 나중에 게시물에 작성 날짜를 보여줄 때 데이터를 한번 더 가공해야 한다는 불편함이 있기는 하다.

 

 

 

메인 페이지에 하나의 데이터를 두 번씩 불러오는 문제

주소가 http://127.0.0.1:5500/#일 때는 게시물 데이터를 정상적으로 가져오는데 주소가 http://127.0.0.1:5500/일 때는 데이터가 두 개씩 뜬다. 예를 들어서 firestore post 컬렉션에 a, b, c라는 데이터가 저장되어 있다면 이것을 메인 페이지에 불러올 때 a, b, c, a, b, c로 중복해서 보여주는 것이다.

 

window.addEventListener("hashchange", handleLocation);
// document.addEventListener("DOMContentLoaded", handleLocation);

팀원 분이 이 문제를 해결했는데 아마 DOMContentLoaded 이벤트가 두 번 실행되어서 그런 거 같다. 동일한 구조의 document.addEventListener("DOMContentLoaded", handleLocation); 가 main.js에도 있고 router.js 에도 있어서 하나를 주석 처리했더니 문제가 해결되었다.