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

Today I Learned

• CRUD 구현 공부하기

 

 

해결하는 경험

임시로 작업하던 페이지를 우리 팀의 firebase에 연결하기

팀원 분이 임시로 웹페이지를 만들어서 작업하던 페이지를 어제 우리 팀의 github에서 파일을 내려받아 합치는 과정을 도와드렸다. 그런데 JS module 로 작업하던 구조가 아니라 import와 export가 전혀 되어있지 않았다. 그래서 오늘 오전에는 공부할 겸 팀원분이 작업하던 새 글 작성 페이지를 firebase에 db가 올라가게 연결하는 작업을 해봤다. 

import { addDoc, collection,} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js";
import { dbService } from "./firebase.js";

export const uploading = async (event) => {

    var today = new Date();
    var year = today.getFullYear();
    var month = ('0' + (today.getMonth() + 1)).slice(-2);
    var day = ('0' + today.getDate()).slice(-2);
    var dateString = year + '-' + month + '-' + day;

    try {
      await addDoc(collection(dbService, "product"), {
        분류: $('#category').val(),
        제목: $('#title').val(),
        평점: parseInt($('#score').val()),
        내용: $('#content').val(),
        작성일: dateString,
        // 이미지: 
       });
        
       alert('저장완료');

    } catch (error) {
         alert(error);
         console.log("error in addDoc:", error);
    };
};

일단 새 글 작성이 되고 firestore에 글 작성한 db가 올라가기까진 하는데 이미지 업로드는 성공하지 못했다. 팀원분께 물어보니 이미지는 storage에 저장되고 storage에 저장된 url만 가져오는 방식이라 하셔서 프로필 이미지 업로드할 때 작성했던 코드를 참고해서 시도해봤지만 실패했다. 결과적으로 팀원분이 jquery도 버리고 코드를 새로 작성하셨지만 나도 혼자 수정해보면서 CRUD 중 Create의 구조가 어떻게 되는지 공부할 수 있는 기회였다.

 

 

 

firestore 필드에 유저의 정보 포함하기

게시물을 올릴 때 유저의 정보를 함께 넣어야 나중에 데이터를 가져올 때 편할 거 같아서 어떤 방법이 있을까 고민을 했다. 내가 처음으로 생각했던 방법은 firestore에 유저별로 collection을 만들어서 데이터를 가져오는 방법이었다. 그런데 구글링을 하다가 다른 블로그 글을 보고 document 필드에 유저의 정보를 넣어주는 방법도 있다는 것을 깨닫게 되었다.

 

문제 상황

firestore에 필드에 유저의 이메일 정보를 추가하고 싶다.

글 작성 버튼을 누르면  email 값이 없다고 뜨는데

 

console을 보면 내가 원했던 경로에 email이 잘 저장되어 있는 것을 볼 수 있다.

 

// 성공
const { uid } = authService.currentUser;

// 실패
const uid = authService.currentUser.uid

무슨 이유인지 모르겠지만 대괄호 안에 원하는 항목을 넣으니 현재 유저의 정보를 잘 가져 온다.

 

firestore 데이터 관리 방법 정리 너무 잘 되어 있는 블로그 추천!

https://velog.io/@khy226/Firestore-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

 

 

 

branch merge 후 문제 발생

글 작성 세부 페이지를 merge했다가 세부 페이지의 내용이 메인 페이지에 뜨는 문제가 발생했다. 문제의 원인이 무엇인지 대충 알 거 같긴 한데 문제를 해결하진 못했다. 내일 튜터님에게 여쭤봐야 할 듯하다!

 

 

 

느낀 점

오늘은 CRUD를 공부했는데 Create만 했는데도 쉽지가 않다. DB의 정보를 불러오는 것도 시도해봤지만 실패했다. 하루하루 많이 배우고 성장하는 거 같으면서도 따라가기 벅차서 고통받고 있다.🤮