에러

1. firebase 웹앱 추가하고, 설정을 써주고 코드를 제대로 썼는데도 firebase 데이터 저장이 전혀 동작하지 않았다. default form submit event 막아주지 않아서 로그를 확인할 수 없어서 생긴 문제였다.

회원가입 form 을 넘길 때 e.preventDefault(); 를 써주지 않았더니 firebase 가 동작하는지 아닌지 확인할 방법이 없었다. 로그가 firebase 진입 전에는 찍히는 데 진입 이후 성공했는지 여부가 안나왔던 것. form submit event 때문에 페이지가 바뀌어 버렸는데 e.preventDefault(); 를 써주니 firebase 에러 메시지가 나왔다. 

 

에러 메세지:

Error adding document:  FirebaseError: Missing or insufficient permissions.
channelrequest.js:1086

POST https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel?database=projects%2Fmovie-recap-a8084%2Fdatabases%2F(default)&VER=8&gsessionid=MOEDeoVrJwUHIdRk4acLR1i3hiW4ngcyOHFoGsoK9gk&SID=Bqy19e_nCUNvTElLNYNPvQ&RID=90235&TYPE=terminate&zx=6rtoc2y7yqrq net::ERR_BLOCKED_BY_CLIENT

 

검색해보니 firebase firestore 규칙을 if true; 로 바꿔주면 되는 것

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

참조

https://fomaios.tistory.com/entry/Firebase-Error-%ED%95%B4%EA%B2%B0%EB%B2%95-%ED%8F%AC%ED%95%A8-Missing-or-insufficient-permissions

.

 

2. firebase 버전이 8 에서 9 로 업그레이드 되면서 코드를 작성할 때 compat 을 붙여줘야 한다. 아래와 같은 에러가 나왔다.

ERROR in ./src/firebase.js 16:0-22
export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)

ERROR in ./src/firebase.js 18:18-36
export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)

 

export 'firebase' (imported as 'firebase') was not found in 'firebase/app'

 

맨 처음 firebase 를 import 할 때 /compat/app 뿐 아니라 /compat/firestore 도 해줘야 한다

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

 

3. 처음 setState 할 때 에러 setInput 에 빨간 줄 뜨면서 다음과 같은 에러가 뜨면서 undefined 내용이 나오면 initialState 값을 넣어줘야 한다

 

Argument of type '{ id?: string | undefined; password?: string | undefined; passwordCheck?: string | undefined; name?: string | undefined; age?: number | undefined; address?: string | undefined; detailAddress?: string | undefined; }' is not assignable to parameter of type 'SetStateAction<ISignUp | undefined>'.
  Type '{ id?: string | undefined; password?: string | undefined; passwordCheck?: string | undefined; name?: string | undefined; age?: number | undefined; address?: string | undefined; detailAddress?: string | undefined; }' is not assignable to type 'ISignUp'.
    Types of property 'id' are incompatible.
      Type 'string | undefined' is not assignable to type 'string'.
        Type 'undefined' is not assignable to type 'string'.ts(2345)

 

initialState 로 string 빈 값 넣어주면 undefined 뜨지 않아서 빨간 줄 사라진다

const initialInput: ISignUp = {
  id: "",
  password: "",
  passwordCheck: "",
  name: "",
  age: 20,
  address: "",
  detailAddress: "",
};

export interface ISignUp {
  id: string;
  password: string;
  passwordCheck: string;
  name: string;
  age: number;
  address: string;
  detailAddress: string;
}

const initialCautions: ISignupCautions = {
  password: false,
  passwordCheck: false,
};

interface ISignupCautions {
  password: boolean;
  passwordCheck: boolean;
}

const SignUp = () => {
  const [input, setInput] = useState<ISignUp>(initialInput);
  const [cautions, setCautions] = useState<ISignupCautions>(initialCautions);