220611 firebase, react hook form

// 터미널에서 npm 또는 yarn 설치
npm install firebase

yarn add firebase

 

//_app.js or _app.tsx 에서

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

export const firebaseApp = initializeApp(firebaseConfig);
// export를 붙여준다.

 

//애널리틱스 

import { } from 'firebase/analytics';

// firebaseConfig에 
measurementId:
// 추가

// 애널리틱스까지 포함한 내 _app.tsx

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "@@",
  authDomain: "@@",
  projectId: "@@",
  storageBucket: "@@",
  messagingSenderId: "@@",
  appId: "@@",
  measurementId: "@@"
};

export const firebaseApp = initializeApp(firebaseConfig);
export const analytics = getAnalytics(firebaseApp);

 

근데 이거 안됨... 안돼요 analytics 가져오는 방법이 잘못됐나봐요... 하핫;~ ! 

 

react hook form 

form 안에 있는 모든 버튼이 

누르기만 하면 페이지가 리렌더링됨

 

 

dk boardWrite 리팩토링 너무 어렵다 ㅇ너무너무너무너무 

리액트 훅이랑 yup이용하려고 id랑 onchangeInputs 빼놨더니 당연히 값 안 들어가고

그래서 리액트 훅에서 submit 하면 data가 들어온대서 그걸 이용하려고 했는데

뭐 button에 submit걸어놓기만 하면 무조건 화면 리렌더링 되니까 그러지도 못하겠고

그리고 일단 우편번호 검색이나 이미지 첨부 버튼만 눌러도 리렌더링 되는데 ..ㅠㅠ ㅠㅠㅠ <form 안에 onSubmit 안 써도 그냥 버튼에 type="button"이라고 걸어두지 않는 이상 화면 무조건 다시 불러와져서 엥 엥엥 왜그러는거냐고...

침착하고 독스를보자 

 

"handleSubmit" will validate your inputs before invoking "onSubmit"

<form onSubmit={handleSubmit(onSubmit)}>

이라고 쓰니까 리렌더링 안된다 근데 너무 배고프다 

 const onSubmit = (data) => {
    console.log(data);
    props.setInputs(data);
  };
  
  
export default function BoardWriteUI(props) {
 
<form onSubmit={handleSubmit(onSubmit)}>

	...


	<S.Submit
         type="submit"
       	 isActive={formState.isValid}
         onClick={showModal}
       	   >
       	     {props.isEdit ? "수정🔮" : "등록🎉"}하기
       	   </S.Submit>
          
          
         
	</form>

}

1. form에 onSubmit에 handleSubmit(onSubmit) 바인딩

2. form 안의 제출 버튼에 type="submit" (디폴트가 submit이긴 하지만 명시함)

3. form 안의 제출 버튼 누르면 Modal이 뜨도록 함, 여기서 타입이 submit이어서 onSubmit이 실행됨

4. onSubmit에서 setInputs로 Inputs에 data를 넣어줌

5. Modal에서 네를 누를 땐 Inputs에 data가 들어와있기 때문에 정상적으로 작동!

 

아니 근데 이게 맞나..?ㅎㅎ 모르겠지만~ 일단 여기까지만 리팩토링 하는 걸로ㅠㅠ(리팩토링 된지도 잘 모르겠다)

 

지금 궁금한건 Input01로 다 넣어놨는데, 각각 css를 다르게 줄 수 있는지...? 어떻게 줘야하는지?임