ReactJS/Twitter App Clone

[ReactJS] Firebase Auth #02

로그인 방법 Firebase Project에 들어가 로그인 방법을 설정한다 Manage Users https://firebase.google.com/docs/auth/web/start?hl=ko 이 문서를 바탕으로 사용자를 관리한다 State Persistence 문서: https://firebase.google.com/docs/auth/web/auth-state-persistence State Persistence는 사용자들을 어떻게 기억할 수 있는지 선택할 수 있게 한다 session은 탭이 열려있는 동안에는 사용자 정보를 기억하는 것을 의미한다 local은 탭을 닫더라도 사용자 정보를 기억하는 것을 의미한다 (기본값) none은 사용자 정보를 기억하지 않는 것이다 On Auth State Chang..

[ReactJS] Firebase Auth #01

Firebase Auth Firebase Auth를 사용하려면 먼저 import를 해야 한다 /src/fbase.js import "firebase/auth"; /components/App.js import firebase from "../fbase" Absolute Imports 절대적인 경로로 import하려면 jsconfig.json 파일을 생성하여 아래의 형식 같이 코드를 작성하면 된다 참고: https://create-react-app.dev/docs/importing-a-component jsconfig.json ( 파일 경로가 src로부터 시작되게 설정하는 코드 ) { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그리고 상대적..

[ReactJS] Router Setting

1. /src에 components와 routes 폴더를 생성한다 2. App.js 파일을 components 폴더에 담은 후 index.js 파일에서 App.js의 경로를 수정한다 /src/index.js import App from './components/App'; 3. routes 폴더에 Auth.js, Home.js, Profile.js, EditProfile 파일을 생성하고 다음과 같이 코드를 작성한다 Routes component들을 입력하고 Enter을 눌렀을 때 자동으로 import할 수 있게 한 것이다 /src/routes/Auth.js import React from "react" const Auth = () => Auth; export default Auth; 4. npm i rea..

[ReactJS] Firebase 연결하기

1. https://console.firebase.google.com/u/0/?hl=ko로 이동하여 프로젝트를 만든다 2. 생성한 프로젝트에 들어가 웹 App을 생성한다 3. npm i firebase@9.6.1를 입력하여 Firebase를 설치한다 4. 아래 표시한 부분을 복사한다 5. src 폴더에 fbase.js를 생성하여 아래와 같이 입력한다 import * as firebase from "firebase/app" // 복사한 코드 붙여넣기 export default firebase.initializeApp(firebaseConfig) 6. npm run start를 했을 때 문제가 없으면 된다 7. 그리고 index.js 파일에 firebase를 import한다 import firebase fr..