React.js/SNS Project6 Day 6 1. Refactoring HomeHeader.jsx Before /Home/Header.jsx import { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Grid, Typography } from "@mui/material"; import IconButton from '@mui/material/IconButton'; import AddCircleIcon from '@mui/icons-material/AddCircle'; import { getDocs, query, collection, where } from "firebase/firestore"; import {db} f.. 2022. 8. 25. Day 5 1. 폴더 구조 2. MyFeed 페이지 MyFeedHeader.jsx와 MyFeedMain.jsx를 MyFeed.jsx로 import하여 사용한다. -/MyFeed/MyFeedMain.jsx import { useEffect, useState } from "react"; import { getDocs, query, collection, where } from "firebase/firestore"; import { Grid } from "@mui/material"; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import CardMedia from '@mui/material/CardMedi.. 2022. 8. 24. Day 4 1. Flow Chart 2. 폴더 구조 2. 홈 네비게이션 바(상단) -/Home/Header.jsx import { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Grid, Typography } from "@mui/material"; import IconButton from '@mui/material/IconButton'; import AddCircleIcon from '@mui/icons-material/AddCircle'; import { getDocs, query, collection, where } from "firebase/firestore"; import {d.. 2022. 8. 23. Day 3 1. 폴더 구조 2. 로딩 화면 -Loader.jsx import "./Loader.css"; const Loader = () => { return ( ) } export default Loader; 비동기 처리할 때 유저에게 보여줄 로딩 화면이다. -Loader.css 코드가 너무 길어 첨부하진 않겠다. 3. Firebase Firestore 연동 -Firebase.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: "", authDomain: ".. 2022. 8. 22. Day 2 1. 폴더 구조 2. 라우터 설정 -Router.js import { Route, Routes } from "react-router-dom"; import Home from "../Components/Home"; import SignIn from "../Components/SignIn"; import SignUp from "../Components/SignUp"; const Router = () => { return ( ) } export default Router; -App.js import Router from "./Env/Router"; import CssBaseline from '@mui/material/CssBaseline'; const App = () => { return ( ) } expor.. 2022. 8. 21. Day 1 1. 프로젝트 생성 $ npx create-react-app youngstagram 2. GitHub 연동 $ git init $ git add . $ git commit -m "First Commit" $ git remote add origin https://github.com/youngjin96/youngstagram.git $ git push origin master 3. 라이브러리 설치 Firebase $ npm install firebase MUI $ npm install @mui/material @emotion/react @emotion/styled @mui/icons-material react-router-dom $ npm install react-router-dom SweetAlert2 $.. 2022. 8. 20. 이전 1 다음
