작업 내용 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..

px: font 에 따라 글씨 크기가 달라진다. em: 선택된 폰트에 상관없이 항상 고정된 사이즈를 가진다. 부모의 폰트사이즈에 상대적으로 계산된다. 부모의 폰트 사이즈에 곱한 값. (개발자도구에서 확인 가능) rem: root 에 지정된 폰트사이즈에 따라 크기가 결정된다. 즉, html 이나 body 에서 따로 사이즈를 지정하지 않으면 기본적으로 html font-size 가 100% 로 지정되는데, 이는 브라우저에서 지정한 폰트사이즈를 따라간다는 말. 브라우저 환경에서 폰트사이즈를 변경하면 이에 따라 웹 폰트 사이즈가 변경된다. v: viewport related %: parent related 결론 픽셀은 왠만하면 사용하지 말자. 고정값이 필요할 경우엔 rem 을 사용하자. vh, vw 를 사용하여..

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

The terms “URI” and “URL” are often used interchangeably, but they are not exactly the same. A URI is an identifier of a specific resource. Like a page, or book, or a document. A URL is special type of identifier that also tells you how to access it, such as HTTPs, FTP, etc.—like https://www.google.com. If the protocol (https, ftp, etc.) is either present or implied for a domain, you should call..