오늘 공부 계획 및 공부한 내용📝
- firebase 세팅
파이어베이스 공식사이트
Firebase 는 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로
개발에 필요한 다양한 소스들을 제공해준다.
문제🧐 / 해결과정⚒️
1) fetchData로 데이터를 받아오는 것은 알겠는데 대체 뭐가 렌더링이 된다는 건지 의문이었다. 자세히 코드를 뜯어보니 위에 이렇게 명시되어 있었다.
const [user, setUser] = useState({
userImgUrl: null,
nickname: '로그인이 필요합니다'
});post 즉, 게시물을 작성할 때 현재 로그인한 사람의 데이터를 가져와 setUser해서 user정보를 갱신하기 위해 (==렌더링!) useState를 사용한 것.
🤔 그럼 왜 여기서 user 정보가 필요한가?
const addContent = async (event) => {
event.preventDefault();
if (!title || !selectedFile) {
alert('사진과 제목 모두 입력해주세요.');
return;
}
const newContent = {
title: title,
desc: desc,
imgUrl: uploadImgUrl,
uid: auth.currentUser.uid,
comments: [],
userNickname: user.nickname,
userImg: user.userImgUrl
};
console.log(newContent);
setContents(newContent);
setTitle('');
setDesc('');
alert('게시물이 등록되었습니다.');
navigate('/');
const collectionRef = collection(db, 'contents');
await addDoc(collectionRef, newContent);
};==> 이유는 newContent 이름으로 그 게시물을 작성한 사람의 정보까지 같이 setContents(newContent) 할 것이기 때문...!
===> 꼭 newContent에 유저 정보까지 담아야 하는 것은 아니지만
좀 더 내가 이해하기 쉽게 접근할 수 있을 것 같아 이런 방법을 택했다.
🤔 => 근데 이런 방법으로 하니 나중에 댓글을 유저 아이디와 나열하려고 했을 때 게시물 안 특정 댓글에 접근하는 로직을 구현하기가 너무 어려웠다.
댓글의 0번째 요소는 "댓글1", 1번째 요소는 "댓글2" 뭐 이런 식이다 보니 index로 나열되어 있는 것 하나하나에 어떻게 유저를 연결하나,,, 고민을 하다 결국 해결하지 못했다...
useEffect 개념을 한번 더 정리해보자
--> 의존성 배열에 아무것도 없으니 이 함수는 컴포넌트가 렌더링 될 때 단 한번만 실행!
useEffect : 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook.
ex) 어떤 컴포넌트가 화면에서 보여졌을 때 무언가를 실행하고 싶을 때
ex) 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때
===> 즉, 컴포넌트가 렌더링 될 때 실행되는 게 특징
2) contents 컬렉션에서 해당 params.id에 해당하는 다큐먼트 데이터를 가져오겠다...
🤔
일단 여기서 useEffect 훅을 사용한 이유는 화면에 처음 렌더링 될 때 이 함수를 실행시키기 위함인데... contents에서 필요한 정보를 받아와 해당 게시물 정보를 수정 또는 삭제하기 위함이다.
params.id가 갑자기 어디서 등장했는지 궁금했다.
📌 바로 설명을 하자면 contents 컬렉션에 있는 각 content는 고유의 다큐먼트 넘버가 있는데 이를 통해 문서를 구분한다. 그리고 이걸로 해당 게시물 페이지 경로를 지정해 줄 수 있다.
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/showdetail/:id" element={<Detail />} />
<Route path="/post" element={<Post />} />
<Route path="/mypage/:id" element={<Mypage />} />
<Route path="/update/:id" element={<Update />} />
</Routes>
</BrowserRouter>
);
};
코드가 이런다고 했을 때
아래처럼 페이지 경로로 /showdetail/ 뒤에 고유의 넘버가 붙는다.
이 넘버가 다큐먼트 고유 넘버로 데이터베이스에 들어간다.
그래서 이 params.id는 contents 컬렉션 내 특정 다큐먼트 정보를 불러올 때마다 사용된다.
