Next.js x Firebase Book Log

これをやってく中でのメモ

js tuple is unable to direct access like below?


let a, b;
[a, b] = [10, 20];

console.log(a);
console.log(b);

const [user, setUser] = useRecoilState(userState)
user.uid

まった

Next.jsって<Link>の前に全角スペースとかが入っていると上手く動かないかも‥。

まった

1回user.tsのようにファイルを作っちゃうと、improtするときに../models/Userではエラーになることがあるが再起動とかしてると治る

import { User } from '../models/User'

まった

ここわからん
useEffectとrecoilを使ってるauthentication.tsをimportしてるわけでもないのに、なんでホットリロードしたらState?が変わるんだ？？

修正してファイルを保存すると、ホットリロードにより画面が更新され、正しくユーザー ID が表示される状態となります。これは先程の状態とは異なりますので、再度ブラウザでページをリロードして「ロード中」の画面になるようにしてください

まった

初回レンダリングの考慮で

if (query.uid !== undefined) {
      return
    }

ってしとったわ。。query.uidがあるのに毎回ここでreturnされちゃうからそりゃうごかんわ。。

まった

global.cssなどが予め入ってるのは

yarn create next-app myapp

としたからか？

Next.js公式チュートリアルはcreate-next-appとなってるけど、これってリポジトリ名というよりはコマンド名？つまり同じものinstallしてるっぽい？

npx create-next-app myapp --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

まった

user && という条件を入れることで、user が存在する場合のみに囲んだ部分の描画が行われる

[uid].tsx

        {user && (
            <h1>見出し</h1>
        )}

まった

_app.tsxでimportすると全てのファイルで明示的にimportしなくても使えるようだ（global.scssとか）

まった

Reactがドキュメントもチュートリアルも日本語化されてて充実しているので、Stateやprops ({}で渡せる) などを理解するためにやっておいたほうが理想的
https://ja.reactjs.org/

まった

currentUser.uidでは画面をロードした状態でまだ値がないなどでエラーになるので、作成したuseAuthenticationをインポートして取得するuserを使う。

import { useAuthentication } from '../../hooks/authentication'

export default function Home() {
  const { user } = useAuthentication()

  print(user.uid)
  return (<div>hogehoge</div>)
}

まった

useEffect()はSSR（Server Side Rendering）時は呼ばれちゃだめらしい？？よく分からん。SSRの基礎についてはこのQiitaがわかりやすかった

まった

Recoil

A state management library for React.

Atom

An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom:

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

まった

07. Recoilでユーザー情報を保存する

const { user } = useAuthentication()で、なぜuserをオブジェクトにして？returnし、また分割代入？でuserだけを受け取っているのかわからない。

export interface User {
  uid: string
  isAnonymous: boolean
  name: string
}

まった

Hook API Referrenct

useState, useEffect, useRef などの仕様を知りたい場合に参照する

まった

next/router

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click me
    </button>
  )
}

まった

router.query

query: Object - The query string parsed to an object.

まった

Firebaseのセキュリティー

こういうルールのためのメソッドがあるのか

request.resource.data.diff(resource.data).affectedKeys().hasOnly(['isReplied'])