커뮤니티

관심있는 영화를 모아둘 수 있다.
편의상 여기선 '찜' 기능이라고 부르겠다.

세부 기능

• 글 작성
  • 이미지 업로드 가능
  • 유효성검사: 내용이 하나도 없으면 업로드 불가능
• 글 조회
  • 이미지 작게 나오고 클릭하면 원본 사이즈 나옴
• 글 삭제
  • 본인이 작성한 글만 [삭제] 버튼 노출
• 글 수정
  • 본인이 작성한글만 [수정] 버튼 노출
  • 수정시엔 새로운 사진 추가나 사진 변경 불가능(삭제는 가능)

아키택처

폴더구조

📦src
 ┣ 📂api
 ┃ ┣ 📜firebase.jsx // realtime databaase API
 ┃ ┗ 📜upload.jsx // 이미지 업로드용 storage API
 ┣ 📂components
 ┃ ┣ 📂community
 ┃ ┃ ┣ 📜DeletePost.jsx // 삭제 컴포넌트
 ┃ ┃ ┣ 📜NewPost.jsx // 새 글 작성 컴포넌트
 ┃ ┃ ┣ 📜PostCard.jsx // 개별 게시글   
 ┃ ┃ ┣ 📜PostList.jsx // 전체 게시글
 ┃ ┃ ┣ 📜PostModal.jsx // 수정, 삭제 창이 출력되는 모달
 ┣ 📂pages
 ┃ ┣ 📜Community.jsx // 커뮤니티 페이지
 ┣ 📂store
 ┃ ┣ 📂community
 ┃ ┃ ┣ 📜community-actions.jsx
 ┃ ┃ ┗ 📜community-slice.jsx
 ┃ ┗ 📜store.jsx

라우팅

path: "/community" element: "<Community/>"

고민

1. DB구조

커뮤니티 게시글 CRUD를 구현하기에 앞서 DB구조(경로)를 어떻게 짤 것인가 생각해야됐다. 단순히 게시글만 작성하는건 경로가 크게 중요하지 않겠지만 나는 후에 댓글 기능도 구현할 예정이기 때문에 어떻게하면 두 데이터를 유기적으로 잘 연결되도록 할 수 있을까 고민했다.

그리고 두 가지 방법을 떠올렸다.

1. 게시글이 댓글 데이터를 포함

/community/posts/게시글id/게시글내용,댓글

이렇게하면 하나의 게시글을 들고오면 자동으로 모든 댓글 리스트를 가져오게 되므로 게시글과 댓글 조회 기능은 간편하게 구현할 수 있을 것 같았다.

하지만 게시글을 추가, 수정, 삭제 할때마다 게시글의 모든 정보까지 불필요하게 업데이트되고 댓글을 다루기 위해선 게시글 자체에 접근해야 하므로 비효율 적이라고 느꼈다.

2. 게시글과 댓글을 각자 다른 경로에 저장

게시글: /community/posts/게시글id/게시글내용
댓글: /community/comment/게시글id/댓글내용

실제 구현한 방법이다.

게시글과 댓글을 서로 다른 경로에 저장하고, 게시글을 조회할 때 /community/comment/게시글id 경로에서 댓글을 가져온다.

이러면 게시글을 업데이트 할 땐 게시글 경로만 접근하면 되고, 댓글을 업데이트 할 땐 댓글 경로에만 접근하게 되므로 불필요한 업데이트를 줄일 수 있을 것 같았다.

추가로, 경로에 userId를 추가할까도 생각해봤는데 댓글이나 게시글 데이터가 auth(작성자) 정보를 포함하므로 굳이 경로에 user정보까지 추가할 필요는 없다고 생각했다.

2. 이미지를 포함한 게시글을 다루는 방법

이미지가 첨부된 게시글을 다루는게 은근 까다롭다고 느껴졌다. 데이터 베이스에는 이미지 자체를 저장할 수 없기 때문이다.

예전에 자바와 스프링으로 백엔드 프로젝트를 할 때 이미지를 다루는데 꽤 애를 먹었던 기억이 있어서 이번에도 긴장부터 됐지만 막상 방법을 알아 보니 그닥 어렵지는 않았다.

1. 저장

이미지가 포함된 게시글을 저장하기 위해서는 먼저
1. 이미지를 서버에 업로드 시키고
2. 업로드한 서버url을 게시글 데이터에 저장한다

즉, 게시글 데이터에는 이미지 자체가 저장되는게 아니라 이미지가 업로드 된 url경로가 저장되는 것이다.

나는 프론트엔드 프로젝트이기 때문에 이미지를 업로드 할 서버가 없어 또다시 firebase의 도움을 받아야 했는데 realtime database에는 이미지를 저장할 수 없기 때문에 storage를 사용했다.

storage는 realtime database와 거의 비슷한데 그 활용성이나 쓰임법에 차이가 있다고 보았다. 업그레이드 버전이라고 본 듯?

아무튼!

이미지도 저장할 경로를 설정해줘야 했는데

/images/게시글id/이미지id

이렇게 설정해주었다.

firebase storage는 이미지를 업로드하면 업로드 경로를 반환하는데 그 경로를 받아서 게시글 데이터에 넣어주면 된다.

그리고 게시글을 조회할때 img 경로에 해당 url을 넣어주면 이미지가 조회된다.

2. 수정, 삭제

게시글 수정 시에는 이미지를 변경하진 못하고 삭제할 수 있게만 만들었는데 이부분은 나중에 변경도 가능하도록 바꿀 예정이다.

게시글 수정이나 삭제 과정도 저장 작업과 비슷하다. 먼저 이미지 파일을 다루고 그 후에 게시글 데이터를 다룬다.

다만 삭제 할때는 무조건 이미지 파일을 삭제하면 되지만 수정할때는 이미지를 그대로 둘 것인지 삭제할 것인지 구분해서 동작해야 한다.

나는 수정창에서 이미지 삭제 버튼(X) 을 누르면 isImageDel state값을 true로 변경하고, 게시글 업데이트 action에 해당 값을 전달해서 값이 true이면 이미지 파일을 삭제하고, false이면 이미지를 그대로 두도록 구현했다.

그리고 만약 삭제한다면 게시글 데이터의 image, imageUrl 데이터도 빈 데이터가 되도록 비워주었다.

3. API 분리 (근데 클린코드를 곁들인)

지금까지 하나의 firebase.js 파일에 모든 api 코드를 작성하고 있었는데 이러다보니 파일이 너무 길어지고 가독성이 안좋아져서 realtime datababse API와 storage API를 분리하고 싶었다.

사실 이건 아직 해결하지 못했다.

정확히 말하자면 api 파일은 분리했지만 코드가 많이 더럽다...

눈에 보이는 제일 큰 문제는 firebase configuration 설정이 중복된다는 것이다.

처음에는 이걸 해결하기 위해 예전에 다른 프로젝트에서 했던 방식인 자바스크립트 클래스와 인스턴스를 활용하는 방법을 시도해 보려고 건드려봤는데 생각보다 오래 걸릴 것 같은데다 다른 기능을 구현할 시간까지 사라질 것 같아 아직은 하지 못했다. 나중에 배포 후 리팩토링 하며 기능을 개선할 때 시도해 볼 생각이다.

일단 개인적인 생각으로는 class나 class extends를 사용해서 어찌저찌 해결할 수 있지 않을까 싶다

구현

firebas

// 커뮤니티 게시글 저장
export const addPost = (post) => {
  set(ref(db, `/community/posts/${post.id}`), post);
};

// 커뮤니티 게시글 들고오기
export const getPost = async () => {
  const snapshot = await get(child(dbRef, "/community/posts"));
  if (snapshot.exists()) {
    return Object.values(snapshot.val());
  }
};

// 게시글 수정
export const updatePost = async (post) => {
  update(ref(db, `/community/posts/${post.id}`), post);
};

// 게시글 삭제
export const removePost = async (postId) => {
  remove(ref(db, `/community/posts/${postId}`));
};

upload

// 이미지 추가
export const addFile = async (postId, file) => {
  const attachmentRef = ref(storage, `/images/${postId}/${file.id}`);
  await uploadString(attachmentRef, file.url, "data_url");
  return getDownloadURL(ref(storage, attachmentRef));
};

// 이미지 삭제
export const removeFile = async (postId, imageUrl) => {
  const attachmentRef = ref(storage, `/images/${postId}/${imageUrl}`);
  deleteObject(attachmentRef);
};

NewPost

export default function NewPost({ onClose, isEdit, post }) {
  const { user } = useAuthContext();
  const [content, setContent] = useState("");
  const [fileDataUrl, setFileDataUrl] = useState("");
  const [imageUrl, setImageUrl] = useState();
  const [isImageDel, setIsImageDel] = useState(false);
  const dispatch = useDispatch();

  const onClickDel = () => {
    if (isEdit) {
      setIsImageDel(true);
    } else {
      setFileDataUrl("");
    }
  };

  const onChangeHandler = (e) => {
    const { value, files } = e.target;

    // 파일 업로드에 필요한 url(reader.result) 얻기
    if (files) {
      // 파일 제거했을때 방어로직
      if (files[0]) {
        const reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = () => {
          setFileDataUrl(reader.result);
        };
      }
      return;
    }

    // 글내용
    setContent(value);
  };

  const onSubmitHandler = async (e) => {
    e.preventDefault();

    // 수정창일경우
    if (isEdit) {
      const newPost = {
        ...post,
        content,
      };

      dispatch(updatePostFetch(newPost, isImageDel));
      onClose();
      return;
    }

    const newPost = {
      id: uuidv4(),
      content,
      auth: user.email,
      commentCount: 0,
      createdAt: new Date().getTime(),
    };

    dispatch(addPostFetch(newPost, fileDataUrl));

    setContent("");
    setFileDataUrl("");
  };

  useEffect(() => {
    // 처음 수정 페이지에 들어왔을 때 파일 정보가 있으면 미리보기 보여주고 파일 데이터 유지
    if (isEdit) {
      setContent(post.content);
      setImageUrl(post.imageUrl);
    }
  }, [isEdit, post]);

  return (
    <>
      {user && (
        <div className={styles.newPost}>
          <p className={styles.user}>{user.email}</p>
          <article onSubmit={onSubmitHandler}>
            <textarea
              type="text"
              value={content || ""}
              onChange={onChangeHandler}
              placeholder="최대 300자까지 입력 가능합니다."
              maxLength="300"
              required
            />

            {!isImageDel && (fileDataUrl || imageUrl) && (
              <div className={styles.imgBox}>
                <img
                  src={imageUrl ? imageUrl : fileDataUrl && fileDataUrl}
                  alt="첨부"
                />
                <span onClick={onClickDel}>
                  <TiDelete className={styles.delBtn} />
                </span>
              </div>
            )}
          </article>
          {!isEdit && (
            <footer className={styles.submitBox}>
              <label htmlFor="file">
                <BsCardImage />
              </label>
              <input
                type="file"
                id="file"
                accept="image/*"
                onChange={onChangeHandler}
                hidden
              />
              <Button text="작성" onClick={onSubmitHandler} />
            </footer>
          )}

          {isEdit && (
            <footer>
              <Button text="수정" onClick={onSubmitHandler} />
            </footer>
          )}
        </div>
      )}
    </>
  );
}

DeletePost

export default function DeletePost({ onClose, post }) {
  const dispatch = useDispatch();

  const onRemoveHandler = () => {
    dispatch(removePostFetch(post));
    onClose();
  };

  return (
    <div className={styles.deletePost}>
      <h1>정말 삭제하시겠습니까?</h1>
      <div className={styles.buttonBox}>
        <Button text="취소하기" onClick={() => onClose()} cancle />
        <Button text="삭제하기" onClick={onRemoveHandler} />
      </div>
    </div>
  );
}

PostCard

export default function PostCard({ post }) {
  const { user } = useAuthContext();
  const [showEdit, setShowEdit] = useState(false);
  const [showDelete, setShowDelete] = useState(false);

  const toggleShowEdit = () => {
    setShowEdit((showEdit) => !showEdit);
  };

  const toggleShowDelete = () => {
    setShowDelete((showDelete) => !showDelete);
  };

  return (
    <Card className={styles.postCard}>
      <div className={styles.headerBox}>
        <h1>{post.auth}</h1>
        <div>
          {user.email === post.auth && (
            <div className={styles.menu}>
              <BiDotsHorizontalRounded
                id="menuBtn"
                className={styles.menuIcon}
              />
              <Card className={styles.subMenu}>
                <ul>
                  <li onClick={toggleShowEdit}>수정하기</li>
                  <li onClick={toggleShowDelete}>삭제하기</li>
                </ul>
              </Card>
            </div>
          )}
        </div>
      </div>

      <time
        className={styles.timeAgo}
        dateTime={new Date(parseInt(post.createAt))}>
        {post.createAt}
      </time>

      <div className={styles.content}>
        <p>{post.content}</p>
        {post.imageUrl && post.imageUrl.length > 0 && (
          // <Link to={post.imageUrl}>
          <a href={post.imageUrl} target="_blank" rel="noopener noreferrer">
            <img src={post.imageUrl} alt="첨부" />
          </a>
          // </Link>
        )}
      </div>

      {showEdit && (
        <PostModal type={EDIT} toggleEdit={toggleShowEdit} post={post} />
      )}
      {showDelete && (
        <PostModal type={DELETE} toggleDelete={toggleShowDelete} post={post} />
      )}
    </Card>
  );
}

PostModal

const Backdrop = ({ toggleMenu }) => {
  return <div className={styles.backdrop} onClick={toggleMenu} />;
};

const ModalOverlay = ({ toggleEdit, toggleDelete, post, type }) => {
  if (type === EDIT) {
    return (
      <div className={`${styles.overlay} ${styles.edit}`}>
        <NewPost onClose={toggleEdit} post={post} isEdit />
      </div>
    );
  } else if (type === DELETE) {
    return (
      <div className={`${styles.overlay} ${styles.delete}`}>
        <DeletePost onClose={toggleDelete} post={post} />
      </div>
    );
  }
};
export default function PostModal({ toggleEdit, toggleDelete, post, type }) {
  // 현재 위치에서 띄우기
  useEffect(() => {
    document.body.style.cssText = `
    top: -${window.scrollY}px;
    overflow-y: scroll;
    width: 100%;`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = "";
      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
    };
  }, []);

  return (
    <div>
      {ReactDOM.createPortal(
        <Backdrop toggleMenu={toggleEdit || toggleDelete} />,
        document.getElementById("backdrop-root")
      )}
      {ReactDOM.createPortal(
        <ModalOverlay
          toggleEdit={toggleEdit}
          toggleDelete={toggleDelete}
          post={post}
          type={type}
        />,
        document.getElementById("modal-root")
      )}
    </div>
  );
}

구현화면

• 커뮤니티 메인 페이지
  내가 작성한 글만 ... 아이콘이 나타난다
  

• 게시글 수정, 삭제는 모달창으로 나타난다
  

트러블 슈팅

1. firebase Storage 권한

🚨 Uncaught (in promise) FirebaseError: Firebase Storage: User does not have permission to access 'images/c0a490be-a907-40a5-8571-84ce934d088d/fd60fcc8-6327-4ff6-9798-e68fb404db4e'. (storage/unauthorized)

firebase storage를 write하는 권한이 없어서 발생하는 에러

firestore > project > storage > Rules탭에서 allow read, write: if false 를 allow read, write: if true 로 변경하면 해결

2. redux state값이 Proxy로 나오는 문제

리덕스 add액션 때 cannot read properties of undefined (reading ‘push’)가 에러가 떠서 state값을 확인해보니

이렇게 Proxy로 나오는중

current(state) 처리로 해결했다