밍부스15) firebase너를 내 백엔드로 임명한다. 아니, 취소한다.

minji jeon·2022년 7월 26일
0

TIL_

목록 보기
34/61
post-thumbnail

오늘 호기로운 마음으로 니꼬쌤의 파이어베이스로 클론코딩하기를 시작했으나, 오후 5시쯤 버전문제의 장벽을 깨지못하고 포기하였다.
나의 하루...뭔가 결과물없이 끝낸거 같아서
날린 느낌이지만 그래도 배운건 있으니깐!@

그래도 업그레드된 구조분해 할당이라던가, 생각하지 못했던 코드들에 대해 배울수 있었다.
이만 접고, 리덕스나 연습해봐야겠다.

그래도 강의를 통해 얻는것들.....

firebase는 뭘까
파이어베이스의 기능은 ?
aws의 amplify와 같다.
marrying amazon?
marrying google

비즈니스단계는 아님
비즈니스 구상중에 사용 (빨리 만들어야하니깐 )

firebase시작방법
우선 사이트에서 내프로젝트만들기를 하면 나의 전용 키가 주어진다.
이때 나의 키는 공개되면 안되기 때문에 깃에 올리게 될 경우 env파일을 따로 만들어서 gitignore로 등록해줘야 한다.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import firebase from './firebase';
import App from './App';
console.log(firebase)

나의 api키
firebase.js
import * as firebase from "firebase/app";

const firebaseConfig = {

};

export default firebase.initializeApp(firebaseConfig);

파이어베이스는 여기까지...

  1. 비구조화 할당 사용법
    인풋에 name주기
    const onChange =(event)=>{
    const {name,value} = e.target; //target으로부터 이벤트를 받아오고 name이랑 value를 받아온다.이벤트로 부터 ?? //const {target{name,value}}=event
    if(name === "email"){
    setEmail(value)
    }else if(name==="password"){
    setPassword(value)
    }
    event.target.name}
    const onSubmit = (event)=>{
    event.preventDefault()
    }
<input  name="email" type="text"  placeholder="Email"  onChange={onChange} required/> /name을 달아주면 스테으트를 두개나 만들 필요가 없다
        <input name="password" type="text" placeholder="Password" onChange={onChange} required />

--> 같지만 다른방법

const [form, setForm] = useState({ email: "", password: "" });
const onChange = ({ target: { name, value } }) => setForm({ ...form, [name]: value });

2.로그인 했을때와 안했을때

{isLogin ? <메인페이지 /> : <로그인페이지 />}
  1. fom의 새로고침 막을때
const onSubmit = (event)=>{
    event.preventDefault()

}

내일은

리덕스로 과제를 완성하고 (완성할수 있을지 모르겠다.)
코딩애플 강의를 마무리 할 예정이다. (하고싶다.)
그다음엔 모하지//

profile
은행을 뛰쳐나와 Deep Dive in javascript

0개의 댓글