4일차 CSS/기능 리팩토링 및 배포 완료

작업 내용

• Complete chatroom function 
  • Add chat-room in each picture
  • Chat function is available for logined user
  • Applied CSS and CSS-Animation
  • Applied Media-Query(Responsive Web for Laptop/Tablet/Mobile)
• Apply dotenv for firebase API Key
  • Hide all of sensitive info in .env
• Deploy app by Firebase

배포주소: https://j-star-gram.firebaseapp.com/

 

chatroom.js

1) get data and render

데이터베이스에 변화가 있을때마다 새 데이터(모든 메세지데이터)를 불러오는데,

imgId === selectedImgId 즉, 선택된 사진에 관련된 메세지 데이터만 가져올 수 있도록 filter 메소드를 이용하여 필터링한다.

이를 위해서 imgId 라는 객체를 메세지 데이터에 포함시켰다. 박스안의 스트링이 자동으로 생성되는 이미지 id 이다.

import React, { useState, useEffect } from "react";
import { timeStamp } from "../firebase/config";
import styled from "styled-components";
import { motion } from "framer-motion";
import Message from "./message";
import firebase from "firebase/app";

const Chatroom = ({ user = null, selectedImgId = null }) => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState("");
  const { uid, displayName, photoURL } = user;
  const db = firebase.firestore();

  useEffect(() => {
    if (db) {
      const unsub = db
        .collection("messages")
        // .where("imgId", "==", selectedImgId)
        .orderBy("createdAt")
        .limit(100)
        .onSnapshot((snap) => {
          //show recent message
          const ulObj = document.getElementById("ulbox");
          ulObj.scrollTop = ulObj.scrollHeight;
          const data = snap.docs
            .map((doc) => ({ ...doc.data(), id: doc.id })) //Each child in a list should have a unique "key" prop.
            .filter((ele) => {
              return ele.imgId === selectedImgId; //extract messages for the selectedImg
            });
          if (data.length <= 10) {
            setMessages(data);
          } else {
            const lastTen = data.slice(data.length - 10, data.length);
            setMessages(lastTen);
          }
        });
      return unsub;
    }
  }, [db, selectedImgId]);

  const handleOnChange = (e) => {
    setNewMessage(e.target.value);
  };
  const handleOnSubmit = (e) => {
    e.preventDefault();

    if (db) {
      //make specific collection for each pircture!!
      db.collection("messages").add({
        text: newMessage,
        createdAt: timeStamp(),
        uid,
        displayName,
        photoURL,
        imgId: selectedImgId,
      });
    }
    setNewMessage("");
    // const inputBox = document.getElementById("inputBox");
    // inputBox.focus();
  };

 

이 메세지 데이터들은 아래와 같이 각 메세지 단위에 전달되어 렌더링 된다.

<Ulbox id="ulbox" style={{ listStyle: "none", paddingLeft: "0px" }}>
        {messages.map((message) => (
          <li id="libox" key={message.id}>
            <Message
              user={message}
              text={message.text}
              createdAt={message.createdAt}
            />
          </li>
        ))}
      </Ulbox>

 

2) submit new message

새 메세지를 제출하면 handleOnSubmit 함수를 통해 데이터베이스에 저장된다.

const handleOnSubmit = (e) => {
    e.preventDefault();

    if (db) {
      //make specific collection for each pircture!!
      db.collection("messages").add({
        text: newMessage,
        createdAt: timeStamp(),
        uid,
        displayName,
        photoURL,
        imgId: selectedImgId,
      });
    }
    setNewMessage("");
    // const inputBox = document.getElementById("inputBox");
    // inputBox.focus();
  };

3) user info (App.js)

현재 유저로 상태를 유지하되 변화가 생기면 새로운 user 로 상태를 저장하거나 null 로 설정한다.

  const [user, setUser] = useState(() => auth.currentUser);

  useEffect(() => {
    //this detects the change on state of user login
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
      if (initializing) {
        setInitializing(false);
      }
    });
    //cleanup subscription(the state of login of user to logout)
    return unsubscribe;
  }, [initializing, auth]);

이 user 라는 객체 안에 아래의 정보가 담기는데, uid/displayname/photoURL 은 자동으로 포함되어 있다.

Overview

오늘의 생각

파이어베이스를 활용한 부분(firestore/storage/auth(googlelogin)/deployment),

상태관리(createdAt/text/displayname/photoURL/imgId) 그리고 Framer-motion 활용법 등에 대한 코드리뷰를 해야겠다.

파이어베이스 기능들을 사용해보고자 3-4일 동안 진행했던 단기 프로젝트여서 조금 정신없이 코드를 짰던 것 같다.

필요한 부분이 있다면 로직 리팩토링도 해야겠다. 개괄적으로나마 파이어베이스를 백엔드 파트로 활용하는 법을 익힐 수 있었다.

 

가능하면, 그동안 진행했던 프로젝트들의 기능을 좀 더 손봐야겠다.

그리고, 내 포트폴리오 웹사이트를 하나 만들어야겠다.

 

추후 추가할 기능

• 무한 스크롤
• 채팅창에 접속 유저 표시
• 메시지 입력중 말풍선 효과
• 채팅창 첫 렌더시 최신 글이 먼저 보이도록 수정
• 사진 저장 기능(버튼)
• 카테고리 및 검색 기능

도움받은 사이트

파이어베이스 배포: youtu.be/IDHfvpsYShs