Profile.jsx import { styled } from "styled-components"; import { auth } from "../firebase"; import { useState } from "react"; const Wrapper = styled.div` display: flex; align-items: center; flex-direction: column; gap: 20px; `; const AvatarUpload = styled.label` width: 80px; overflow: hidden; height: 80px; border-radius: 50%; background-color: #1d9bf0; cursor: pointer; display: flex; justify-con..

이전에 file을 추가하는 form이 있어서 사진을 추가할 수 있었는데, 저장이 되기 위해서는 파이어스토어에서 스토리지라는 기능을 사용해야한다. 해당 기능은 파이어스토어를 생성하면 자동으로 스토리 이제 스토리지로 넘어와서 시작하기 눌러서 시작하면된당. 이것도 테스트 모드로 시작하면됨 firebase.js에서 파이어 스토어를 사용 가능하도록 설정한다. firebase.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; cons..

깃허브를 추가한다. 그러면 이러한 팝업창이 뜨는데 아래의 url을 깃허브에 등록해주면 된다. 깃허브 개발자세팅에서 New Oauth App 버튼 클릭! 이름과 홈페이지 URL은 아무거나 입력하면 되고, 콜백 url 은 위에서 파이어베이스에서 발급받은 url 붙여넣기하면됨. 발급받은 ClientID와 Client secrets를 파이어베이스에 입력하면된다. 사용설정이 완료되었다. 그리고 깃허브 연동 버튼을 만들어줄건데 컴포넌트로 만들거임 깃허브 로고를 다운로드 받는다. public 폴더에 넣음 GithubButton.jsx 파일을 생성해서 깃허브 버튼을 만들어줄거임 import { GithubAuthProvider, signInWithPopup } from "firebase/auth"; import { s..

로그인이 되어 있지 않으면 다른 페이지에 접근 불가 처리 할거임 ProtectedRoute.jsx생성 import { Navigate } from "react-router-dom"; import { auth } from "../firebase"; //children하위 컴포넌트 const ProtectedRoute = ({ children }) => { const user = auth.currentUser; //현재 접속 유저 if (user === null) { //유저가 없으면 navigate로 login 이동 return ; } return children; //자식컴포넌트로 이동 }; export default ProtectedRoute; Home.jsx에 로그아웃 버튼 추가 import { au..

새 프로젝트를 시작한다. App.css 안의 내용 다 지워주고 index.css는 삭제한다. App.jsx 도 정리한다. 그 다음 디팬던시추가 폴더 생성 후 파일을 생성한다. Layout.jsx import React from "react"; import { Outlet } from "react-router-dom"; const Layout = () => { return ( 레이아웃 ); }; export default Layout; CreateUser.jsx Home.jsx Login.jsx Profile.jsx App.jsx import { RouterProvider, createBrowserRouter } from "react-router-dom"; import "./App.css"; import ..

새 프로젝트 만들기 - vite로 터미널에 설치한다. npm i firebase react-firebase-hooks firebase를 사용할 때 도움이 되는 hook 임 와 함께 두 개 설치함 그리고 파일들을 정리한다. App.css 내용 지우기, App.jsx div만 남겨놓고 삭제 index.css는 삭제 -> main.jsx에서 링크삭제 https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 파이어 베이스에..

import { Timestamp } from "@firebase/firestore"; import를 위와 같이 하고 const handleSubmit = async (e) => { e.preventDefault(); const ref = collection(db, "todos"); //db config 추가하기 await addDoc(ref, { title: newTodo, //입력할 내용을 객체형식으로 넣으면됨 uid: user.uid, createdAt: Timestamp.fromDate(new Date()), //날짜 추가 }); //추가할 때 까지 대기 await createAt으로 추가하면됨 참고 https://stackoverflow.com/questions/69519447/how-to-ge..

index.css body { margin: 40px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #f2f2f2; } .App { max-width: 640px; margin: 0 auto; } nav { background: #772eff; padding: 10px 20px; color: #fff; displa..

정렬 기능을 추가해 보겠음 Home.jsx에 각 정렬을 저장할 usestate 만들기 기본값은 비용순으로 오름차순 정렬함 select 의 옵션을 추가함. 그리고 값이 바뀌면 함수가 실행되게 함 바뀐 값으로 useState에 저장함 그리고 파이어 베이스에서 값을 불러올 때 사용한 useCollection을 수정할거임 처음에는 userID만 같은 값만 불러오는 조건문만 사용했는데, 정렬 값도 추가 전달함 useCollection.js에서 각 정렬 값들을 가져온다. 그리고 re에 orderBy로 정렬 옵션을 추가함. 첫 번째 오는 정렬값이 우선 적용되고, 뒤에 오는 정렬옵션(오름차,내림차)순은 첫 번째 정렬값을 기준으로 정렬됨 테스트 처음 화면 (비용순, 오름차순으로 정렬되어있다.) 비용순 - 내림차순 정렬 ..

파이어 베이스에서 규칙을 정할 수 있다.