Source from: react.vlpt.us/basic/27-useful-tools.html

The steps to take 1. Create an account on console.aws.amazon.com 2. Create a user and a new bucket. Note the accessKeyId, the secretAccessKey and ARN 3. Add policy to the bucket and the user, add CORS to the bucket. 1) policy { "Version": "2012-10-17", "Statement": [ { "Sid": "AddCannedAcl", "Effect": "Allow", "Principal": { "AWS": [ "arn:my arn" ] }, "Action": [ "s3:PutObject", "s3:PutObjectAcl..

작업 내용 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 를 사용하여..