작업 내용 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 데이터베이스에 변화가 있을때마다 새 데이터(모든 메세지..

작업 내용 파이어베이스를 이용하여 로그인 및 로그아웃을 구현 사진에 대해 이야기를 나눌 수 있는 채팅 기능을 구현 로그인 -> 채팅 기능 사용 가능 로그인X-> 사진만 볼 수 있음 상단으로 스크롤이동할 수 있는 버튼 추가 framer-motion 을 이용하여 애니메이션 적용. App.js 1) 로그인/로그아웃 구글 로그인 및 로그아웃을 구현하기 위해 firebase 의 projectAuth(=firebase.auth()) 를 이용한다. 로그인 버튼을 누르면 google 창이 뜬다. 로그인/로그아웃 변화가 생길때마다 useEffect 에서 유저 로그인 상태를 저장한다. import Title from "./comps/Title.js"; import UploadForm from "./comps/UploadF..

Modal.js framer-motion 라이브러리를 이용하여 이미지가 opacity 0->1 으로 변화하고 상단에서 아래로 떨어지도록 했다. import React from "react"; import styled from "styled-components"; import { motion } from "framer-motion"; import Chatroom from "./Chatroom"; const Modal = ({ selectedImg, setSelectedImg, user }) => { const handleClick = (e) => { // console.log(e.target.classList); if (e.target.classList.contains("backdrop")) { setSe..

목적: 파이어베이스를 사용해보고 싶었다. 백엔드에 들이는 시간을 아낄 수 있기에 프론트엔드 파트에 집중할 수 있을 것 같다. 컨셉: 유저들이 사진을 공유하고 사진에 대해 대화를 나눌 수 있는 반응형 채팅 웹. 파이어베이스의 소셜로그인과 실시간 데이터베이스 기능을 사용할 계획이다. Initial Set-up Set up react environment with necessary dependencies and new Firebase. Connect App with database and Storage of Firebase. 리액트 개발환경을 세팅했다. 일단, 토이 프로젝트이기 때문에 많은 모듈은 필요하지 않다고 판단하여 styled component 정도만 적용했다. 파이어베이스에 데이터베이스와 스토리지(이..