트위터 클론코딩 :1 (firebase,react)

 amplify ,firebase용도

실제 큰 프로젝트를 할 때 사용하기는 적합하지않다.

구글에서 빌려온 사용자와,인증,데이터로 실제로 소유하고있는거없음.
가능한 나의 아이디어를 빠르게 테스트 해보려고 할 때

서버,데이터베이스만드느데 시간을 투자하고싶지않을 때 

비즈니스용도 x 아이디어구상중 경쟁중

 

 

firebase 

firebase.js

https://firebase.google.com/docs/web/setup?authuser=0&hl=ko 

JavaScript 프로젝트에 Firebase 추가

.env에 환경변수 작성시 

create react app으로 만든 앱은 

REACT_APP_ 환경변수이름 BLAHBLAH = 로 작성히야함 규칙!

 

.env있는 파일들은 완전히 보안해주진않는다

실제 파일을 빌드하고 실행하게되면 클라이언트에서 실제값들로 바뀜.

깃헙 로드시 노출 되지 않기 위함의 목적이 더큼

 

You can configure your application to support importing modules using absolute paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.

Below is an example jsconfig.json file for a JavaScript project. You can create the file if it doesn't already exist:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Copy

If you're using TypeScript, you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.

Now that you've configured your project to support absolute imports, if you want to import a module located at src/components/Button.js, you can import the module like so:

import Button from 'components/Button';

 

 

https://firebase.google.com/docs/reference/js/auth.persistence.md?authuser=0#persistence_interface

Persistence interface

PropertyTypeDescription

type

'SESSION' | 'LOCAL' | 'NONE'

Type of Persistence. - 'SESSION' is used for temporary persistence such as sessionStorage. - 'LOCAL' is used for long term persistence such as localStorage or IndexedDB. - 'NONE' is used for in-memory, or no persistence.

session: 브라우저 닫더라도 기억됨 

local: 브라우저 열려있을 도안 (기본 값)

none: 민감하거나 공동컴퓨터에 적합.

 

 

위와 같이 확인 해보면

사용자 정보가 처음부터 불러지지 않는 걸 알 수 있다. 

-> useEffect기능을 이용해서 컴포넌트 mount할 때 동작하게하고  init이라는 state에 저장 할꺼임(로딩될때 라우터 숨기기위해서)

 

 

Rotuer는 route를 보여주는 한가지 용도로만 사용하는게 적합하기 대문에 작성한 state르 다른 파일로 옮겨

Rotuer을 App 안에 담아 App에  footer나 어떤 형식을넣고 싶을 수도있기 때무에

 

 
react-app 상대경로로 지정하기 

https://create-react-app.dev/docs/importing-a-component 

jsoncofng살펴보면 모든게 /src에서부터 나옴

Auth.onAuthStateChanged()

Adds an observer for changes to the user's sign-in state.

To keep the old behavior, see Auth.onIdTokenChanged().

https://firebase.google.com/docs/reference/js/auth.auth?authuser=0#authonauthstatechanged

 

#signinwithpopup

https://firebase.google.com/docs/reference/js/auth.md?authuser=0 

auth package  |  Firebase JavaScript API reference

 

Logout 구현

export default function Profile() {
    const navigate = useNavigate();
    const onLogoutClick = () => {
        authService.signOut();
        navigate("/");
    };
    return (
        <>
            <button onClick={onLogoutClick}>Logout</button>
        </>
    );
}

 

파이어베이스 클라우드   
no sql database임 
collection :폴더 
document :문서