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

Today I Learned

• 프로젝트 발표 전에 최종 점검, 자잘한 에러 수정
• 드디어 발표와 함께 기초 프로젝트 마무리!

 

해결하는 경험

게시물 상세 페이지에 수정, 삭제 버튼이 나타났다가 사라지는 문제

수정 전

firebase.auth().onAuthStateChanged((user) => {
    if ( user && user.uid == result.data().uid) {
      $("#edit").show();
      $("#delete").show();

    } else {
      $("#edit").hide();
      $("#delete").hide();
    }

내가 작성한 글이 아닐 때는 hide 메서드를 이용해서 수정, 삭제 버튼이 보이지 않도록 만들었다. 그런데 로딩 과정에서 내가 작성한 글이 아니더라도 수정, 삭제 버튼이 잠깐 나타났다가 사라지는 게 너무 거슬려서 이것을 해결하고 싶었다. 해결 방법은 굉장히 간단했는데 CSS에서 수정, 삭제 버튼 display 속성을 none으로 하면 된다. 그러니까 기본적으로 버튼이 보이지 않는데 내가 작성한 글일 때만 버튼을 추가해주는 방식인 것이다.

 

 

 

로그인하지 않으면 게시물 상세 페이지가 뜨지 않는 문제

//문제 발생 코드
if (user.uid == result.data().uid) {
      $("#edit").show();
      $("#delete").show();

} else {
      $("#edit").hide();
      $("#delete").hide();
}

로그인하지 않았을 때는 게시물의 상세 페이지에 들어가도 데이터를 불러오지 못하는 문제가 있었다. 콘솔 창을 확인해보니 로그인하지 않아서 uid 값이 null로 뜨기 때문에 발생한 문제인 거 같았다.

 

//1차 수정-실패
if (user.uid == result.data().uid) {
      $("#edit").show();
      $("#delete").show();

} else if (user.uid == "null") {
	  $("#edit").hide();
      $("#delete").hide();
} else {
      $("#edit").hide();
      $("#delete").hide();
}

기존 if문 구조에서 else if 문으로 uid 값이 null인 경우도 설정해주면 되지 않을까 생각해서 코드를 수정해봤지만 실패했다.

 

//2차 수정-성공!
if ( user && user.uid == result.data().uid) {
      $("#edit").show();
      $("#delete").show();
      
} else {
      $("#edit").hide();
      $("#delete").hide();
}

그 다음에 생각했던 게 user일 때만 uid 값을 비교하라는 구조 즉, if 문 안에 if 문이 하나 더 있는 구조였지만 구글링을 해보니 보통 if 문 조건에 and나 or 연산자로 두 개의 조건을 설정해주는 거 같았다. 그래서 일단 && 연산자를 사용해서 user이면서 uid 값이 같을 때만 해당 게시물에 수정, 삭제 버튼을 보여줘라!라고 설정했더니 드디어 문제를 해결할 수 있었다. 이 문제는 처음부터 스스로의 힘으로 해결한 것이기 때문에 굉장히 뿌듯했고 기억에 남을 거 같다.

 

 

 

발표 약 2시간 전에 갑자기 firebase storage에 문제 발생..

발표를 2시간 30분 정도 앞두고 갑자기 게시물의 이미지를 불러오지 못하면서 콘솔 창이 빨갛게 물들었다.😱 콘솔 창을 보니 firebase storage 문제인 거 같아서 확인해 봤다.

 

한도가 5GB밖에 안 된다고..?

storage를 들어가 보니 이 프로젝트의 할당량이 초과되었다고 뜬다. 아마 고화질의 음식 이미지를 많이 올리다보니 해당 프로젝트의 storage 용량 할당량이 초과된 거 같다. 그래서 급하게 새로운 프로젝트를 생성하고 firebase.js에 입력해 두었던 프로젝트의 id 값을 수정하고 게시물도 전부 새로 올려야 했다. 또 할당량을 초과할까 봐 무서워서 새로 올릴 때는 이미지 사이즈도 작게 줄여서 올렸다ㅋㅋ 이 문제를 방지하기 위해서 애초에 이미지를 업로드할 때 용량을 줄여주는 프로그램(?)을 연결한다든지, 업로드하는 이미지의 용량 기준을 정해둔다든지 하는 방법이 있겠다는 생각을 했다.

 

 

 

회고

기초프로젝트가 끝났다! 팀원들 모두 정말 고생하면서 만들었기 때문에 시원하기도 하고 섭섭하기도 하다. 오늘도 다른 팀들의 발표와 튜터님의 피드백을 보면서 배우는 점이 많았고 또 욕심이 생긴다. 근데 욕심만 늘어나고 시간과 체력이 없다~~ 아직 저번 주의 WIL을 작성하지 못했는데 이번 팀프로젝트의 결과를 전체적으로 정리할 생각이기 때문에 글 작성하는 데 시간이 생각보다 오래 걸릴 거 같다.

 

사실 오늘도 발표 이후에는 거의 TIL 작성만 했다. 주말에는 프로젝트 때문에 너무 바빠서 어떤 문제가 있었고 어떻게 해결했는지 정말 간단하게 틀만 잡아서 임시저장 해 놓은 상태였고 오늘 전체적으로 글을 다듬어서 지난 주말 이틀 치 TIL을 올렸다. TIL을 작성하는 데 너무 많은 시간을 쓰고 있는 건가 걱정이 들기도 하지만 바로 이틀 전에 작성한 글만 봐도 내가 이렇게 고생했었구나 기록이 남겨져있는 게 너무 재밌다. 난 약간 기록하는 병이 있는 거 같다. 근데 확실한 건 이렇게 자세하게 TIL을 작성하지 않았다면 문제를 발견하고 해결했던 경험들이 기억에서 금방 사라져 버렸을 것 같다는 것이다!