오늘 호기로운 마음으로 니꼬쌤의 파이어베이스로 클론코딩하기를 시작했으나, 오후 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);
파이어베이스는 여기까지...
- 비구조화 할당 사용법
인풋에 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 ? <메인페이지 /> : <로그인페이지 />}- fom의 새로고침 막을때
const onSubmit = (event)=>{
event.preventDefault()
}내일은
리덕스로 과제를 완성하고 (완성할수 있을지 모르겠다.)
코딩애플 강의를 마무리 할 예정이다. (하고싶다.)
그다음엔 모하지//
