1. 로그인 / 회원가입 /로그아웃 - 이메일/비밀번호 ✔ - 구글 ✔ - 깃허브 ✔ 2. 검색창 실시간 조회 ✔ - 검색어를 입력할 경우 알라딘 API 상품 조회를 통해서 실시간으로 오른쪽에 검색결과가 출력 ✔ - 원래는 알라딘에서 권장하는 ISBN13의 값으로 검색해서 불러왔는데, 상품이나 오래된 도서의 경우에는 해당 값이 부여되지 않아 출력되지않는 현상이 일어남. - 그래서 ISBN 값으로 가져오게끔 바꾸고 상세설명이 없는 상품의 경우 상세 설명 없음 이라 표시 - 실시간 조회되는 책의 이미지나 제목을 클릭하면 해당 책의 상세보기 ( 알라딘) 홈페이지로 이동해야하는데 이동이 안됨. 해결 필요 ✔ (해결완료 -아래에 설명추가) 3. 검색 조회 및 정렬 ✔ - 포괄적으로 검색하고 싶을 경우 키워드를 검..

https://console.firebase.google.com/ 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 내가 추가하고자 하는 인증은 일단. 1. 이메일/비밀번호( 회원가입 시) 2. 구글 인증 3. 깃허브 인증 이렇게 추가할 예정이다. 그 중 이메일/비밀번호부터 해보겠음., 1. 이메일/ 비밀번호 인증 현재 작업하고 있는 프로젝트에 firebase.js 파일에서 파이어베이스 관련 설정을 할거임 이미 기본 설정은 되어있고 여기에 인증 관련 초기 설정만 추가하면됨 하단에 파이어베이스 인증 코드를 추가한다. getAuth 을 import한다. import { initializeApp } from "firebase/app"; import { getAuth } fr..

yes 선택 후 첫번째 호스팅 선택 use an existing project 선택 그리고 package.json에 에 추가한다. "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "predeploy": "npm run build", "deploy": "firebase deploy" }, Hosting url이 뜨면서 호스팅이 완료됨이 확인된다. Hosting URL: https://nwitter-5aa7d.web.app Nwitter nwitter-5aa7d.web..

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..