첫 토이프로젝트가 끝났다. 리액트로 만든 팀프로젝트였는데 팀프로젝트는 처음이라 많이 두려웠는데 순조롭게 마무리를 한 거같다. 이번 토이프로젝트 기간은 2주였는데 회고를 해보자.
🫠 토이프로젝트 시작
팀프로젝트는 처음이라 어떻게 맞춰나가지? 고민을 많이 했다. 다행히 팀원 중 한분이 경험이 있으셔서 컨벤션 을 작성하며 시작했다. 컨벤션을 어떻게 작성하면 좋을까? 얘기를 나누며 작성을 했는데 BEM표기법과 깃 컨벤션을 작성하고 중복되는 DB를 관리하기 위해 DB네이밍도 어떻게 할지 정해나갔다.
처음엔 vite로 깃 레파지토리를 만들어서 초기환경을 세팅하고 시작했다.
브랜치를 따서 각자 구현했는데, 맨 처음 스타일가이드를 제작하는 동안 알고리즘설계를 했다. 디자인과 DB를 고려하며 설계하는데도 중간에 빈틈이 많구나를 느꼈는데, 다음프로젝트땐 더 잘 할 수 있을거같다,,~!!
👩💻 페이지 구현
알고리즘설계가 끝난 후 페이지가 크게 3개가 나왔다. 그 중 난 갤러리 페이지를 맡게 되었는데 CRUD기능이었다. 데이터를 쓰고, 읽고, 수정, 삭제 하는 기능인데 DB는 firebase로 해서 관련된 인강들을 찾아보며 기능구현을 했다.
🔥 파이어베이스
Firebase는 구글에서 개발한 클라우드 기반의 백엔드 서비스를 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼이다. Firebase는 데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등의 다양한 기능을 제공하며, Realtime Database와 Cloud Firestore, Authentication, Cloud Storage, Hosting, Cloud Messaging 등의 기능을 포함한다. Firebase는 다양한 프로그래밍 언어와 플랫폼을 지원하며, 개발자들은 빠르게 애플리케이션을 개발하고 배포할 수 있다.
그렇다면 파이어베이스로 CRUD를 해보자
1) 글쓰기 기능 만들기 (CREATE)
(1) form안에 input과 버튼생성하기
- text, Textarea, file을 작성
<form onSubmit={onSubmit}>
<input onChange={onFileChange} width={"95%"} type="file" id="file" accept="image/*" />
<Input width={"100%"} placeholder="제목을 작성해주세요." onChange={onChangeTitle} required />
<Textarea onChange={onChangeTextContent} placeholder="글을 작성해주세요." width={"100%"} height={"22rem"} />
<Input width={"100%"} type="submit" className="btn regular primary" value={isLoading ? "로딩중" : "글쓰기"} onClick={onSubmit}/>
</form>
(2) firestore database 이용
- mybase에 import 하기
import { getFirestore } from "firebase/firestore";
export const dbService = getFirestore();(3) document 생성
- submit할 때마다 document 생성
- 자동으로 id를 생성해서 문서를 추가할 때는 addDoc을 사용
const onSubmit = async (e) => {
e.preventDefault();
const user = auth.currentUser;
if (isLoading || title === "" || title.length > 50) return;
try {
const userConfirmed = window.confirm("글을 등록하시겠습니까?")
if (!userConfirmed) {
return
}
setLoading(true);
const docRef = await addDoc(collection(db, "posts"), {
title,
textContent,
createAt: new Date().toLocaleString(),
username: user.displayName,
userId: user.uid,
});
이렇게 하면 cloud firestore에 추가가 된다.
2. 작성한 글 가져오기 (READ)
(1) get method 이용하여 작성한 데이터 가져오기
- 글 배열이 들어가는 state만들기
- mount가 되면 db collection 를 가져와서 보여준다.
try {
const snapshot = await getDocs(postsQuery);
const newPosts = snapshot.docs.map(doc => {
const { title, textContent, createAt, userId, username, photo } = doc.data();
return {
title, textContent, createAt, userId, username, photo, id: doc.id
};
});
setPosts(newPosts);
} catch (error) {
console.error("게시물 목록 가져오기 중 에러:", error);
}(2) map 이용하여 가져온 데이터 출력하기
{posts.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map(post => (
<li key={post.id}>
<a href="" onClick={() => ViewPost(post.id)} >
<Profile filename={post.photo} />
<div className="board__status">{post.createAt}</div>
<div className="board__title">{post.title}</div>
<div className="board__writer">{username}</div>
</a>마무리
수정,삭제는 리팩토링을 진행하며 추가할 예정이다. 처음 한 프로젝트라 브랜치 생성할 때 네이밍을 어떻게 해야할지도 하나씩 정해갔는데 깃 merge 이슈가 생각보다 번거로웠다. 최종으로 코드합치는 담당을 맡았는데 충돌이 생각보다 많이 나서 하나하나 확인해가며 수정했다. 다음 프로젝트때는 PR도 해보며 진행하면 좋을거 같아, 프로젝트 들어가기 전에 리팩토링을 진행할 예정이다. 리팩토링을 하며 전역관리를 해보고 PR도 해보며 다음프로젝트 들어가기 전에 많이 준비해가면 좋을거같다~!!!
JS와 리액트는 꾸준히 공부해가며 리덕스툴킷도 한번 공부하며 사용해볼예정이다! ✨ 다음 블로깅은 리덕스가 되겠..지?!!!
