지나가던 컴공생

- 이전에 계정을 생성했는데도 create account 버튼이 log in으로 바뀌지 않았었다. 이는 App.js에서 원인을 찾을 수 있다. - 어플리케이션이 로드될 때 firebase는 사용자가 로그인 되었는지 아닌지 확인할 시간이 없다. 왜냐하면 너무 빨리 일어나기 때문이다. 그래서 어플리케이션이 로드되자마자 로그아웃이 될 것이며 currentUser에는 아무것도 없을 것이다. - 사용자의 로그인 상태 변화를 관찰하기 위해 docs에서 onAuthStateChanged를 사용할 것이다. 이는 기본적으로 event listener이다. - 코드를 작성해 준다. (App.js) authStated의 변화를 감지하여 로그인이 되어있으면 true 아니면 fale를 반환한다. 그리고 setInit은 fire..

- 계정을 생성하기 위해 Firebase Docs에서 createUserWithEmailAndPassword 로 들어가자. 계정과 관련된 여러 API들을 볼 수 있다. - 계정 기능을 만들기 위해 Auth.js에서 새로운 state를 추가하자. newAccount가 true일 때는 새로운 계정을 만들 것이고 false일 때는 log in 버튼을 활성화할 것이다. import React, {useEffect, useState} from "react"; // for auth import const Auth = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [newAccount,..

- 로그인을 구현하기 위해 우선 Authentication으로 이동한다. - 인증을 위한 여러 선택지가 있는데 여기서는 이메일과 패스워드를 선택할 것이다. - 이메일/패스워드를 선택하고 enable 해준다. 마친가지로 google 로그인도 활성화하자. github 로그인은 활성화 하지 않겠다. (github 로그인 참조 : https://nomadcoders.co/nwitter/lectures/1912) - 로그인 수단 두 가지를 활성화 했다. 이제 로그인이 안 되었을 때의 페이지를 수정할 것이다. Router데렉토리의 Auth.js를 수정해 주자. - Email과 Password를 필수 입력으로 놓고 아래 submit 버튼을 만들었다. 그리고 아까 만들어 둔 구글 로그인 버튼도 만들었다. - 이제 이 ..

- 우선 지난 번에 Router.js에 작성했던 state를 지울 것이다. 왜냐하면 Router에는 Routes만 보여주는 용도로 사용해야 하기 때문이다. state는 App.js에 넣을 것이다. - App.js를 수정하여 Router에 props를 전달하고 - Router.js에서 받아준다. - 아래와 같이 footer 를 사용해서 살짝 꾸며주도록 하자. © {new Date().getFullYear()} PONZ - 이제 firebase를 사용하여 인증(Auth)를 구현할 것이다. 우선 firebase.js에 Auth를 import한다. - 참고로 jsconfig.json을 만들어서 아래 코드를 만든다면 모든 코드가 src가 baseURL로 작동하게 된다. - 그리고 import할 때 이름이 겹치는 ..

- 개발 구조를 잡기 위해 src 폴더에 components 폴더와 routes 폴더를 생성할 것이다. 그리고 App.js를 components를 components로 옮겨 주고 index.js의 App 위치를 수정한다. - 트위터 클론 코딩에서는 4가지 route를 생성할 것이다. 하나는 authentication(1) 이다. 로그인 되지 않았을 경우 로그인을 위한 부분을 보여준다. 로그인이 된 이후 home(2)으로 이동할 것이다. home에서는 profile(3)을 볼 수 있고, edit profile(4)페이지로 이동할 수 도 있다. - 이제 navigation을 만들어 볼 것이다. 우선 npm i react-router-dom으로 업데이트를 확인하고 Router.js를 생성하자. (hook에 대..

- firebase.js를 보면 apiKey, authDomain 등의 정보가 있다. 모든 key와 URL들을 코드에 적어두는 것 대신에 .env파일을 생성하여 환경 변수를 담아주도록하자. (반드시 .env 파일은 디렉토리 최상단에 있어야 함) git 같은 곳에 코드를 올릴 때 .env를 생성하여 키 값을 담음으로써 보안을 지킬 수 있다. (만약 이렇게 안하면 누군가 나의 DB에 접근할 수 있음) - firebase.js에 DATABASE_URL이 존재하지 않을 텐데 Firebase에서 생성해서 주소를 넣도록 하자. - 아래와 같이 .env에 REACT_APP_으로 시작하여 값을 집어 넣으면 된다. (반드시 REACT_APP으로 해야함, create-react-app으로 생성했으면 환경변수를 REACT_..

- 개발환경 : VSCode firebase@9.6.1 react-router-dom@5.3.0 - (1) npx create-react-app name 으로 react app 설치 (2) nwitter로 들어가 필요없는 파일 정리 및 파일 수정 scripts에서 "test" 지우기 (3) github 연결 (4) firebase에서 프로젝트 생성 -> Web 클릭 (5) 터미널에서 npm install --save firebase 입력 (6) src 폴더 아래 firebase.js 설치 후 아래 코드 복사 (7) index.js에 firebase import 하기 (8) npm run start로 서버가 제대로 돌아가는지 확인하기 - ref) https://nomadcoders.co/nwitter/le..