自動化無しに生活無し

入力欄に入力をするたび発火をする時、Stateに保存し続けると頻繁に再レンダリングが発動してパフォーマンスが落ちる。そこでデバウンスを採用する。 デバウンスしてキー入力の度にイベントを発火し続けないようにする【再レンダリング地獄対策】 このデバウンスをReactで実装し、setTimeoutのオブジェクトを記録するには、useRefが正解。 同じように値が変わっても再レンダリングをしないhookとしてu ...

DRF+ReactのSPAでWebsocketのチャットサイトをつくる と DRF+ReactのCRUD簡易掲示板SPAでJWT認証を実装する の続き。 今回は、先にSPAでJWT認証を済ませたうえで、WebSocketを行うようにした。Sec-WebSocket-Protocol を使っている。 トークンの検証が煩雑になるため、WebSocketのメッセージ部にJWTトークンは含ませない設計にした。 WebS ...

ReactはStateの変化で再レンダリングをする仕様である。 Stateの高頻度な変更は、再レンダリングを頻繁に発生させ、表示が遅くなると言った問題が起こる。 この問題を防ぐためにも、キー入力の度にStateを書き換えるのではなく、最後のキー入力が終わって1秒経ってからStateを書き換えるという仕様に仕立てる。 このしくみをデバウンスという。 このデバウンスのしくみはsetTimeoutの操作で簡単に ...

DRF+ReactのSPAでCRUD簡易掲示板をつくる このDRF+ReactのCRUD簡易掲示板SPAに、JWT認証を実装する。 なぜなら、JWT認証を実装しない場合、通常のDjangoのセッションベースの認証を実装する場合では、CSRF検証が必要になるから。 開発要件 JWT認証を実装する( CSRF検証の廃止 ) ログイン、ログアウト、トークンの更新、アカウント新規作成の機能 ユーザー名とパスワードを使用し ...

Reactで全てのコンポーネントでStateや関数を扱いたい場合がある。 propsを使う場合はバケツリレーになってしまい、見通しが悪くなる。 そこで、Contextを使い、全コンポーネントでStateや関数を使えるようにする。 【React】グローバルなStateを使って、Propsバケツリレー問題を解決する 更に、カスタムフックを使えば呼び出しやすくなる。 src/AuthContext.jsx まずはcreateContextで、コンテキ ...

タイトル通り、Django REST FrameworkとReactのSPAで、WebSocketを使ったチャットサイトを作った。 以前のWebSocket搭載チャットサイト(下記)はReactを使っていないため、SPAではない。今回はReactを搭載したSPAとしている。 DjangoでWebSocketを使って、チャットサイトを作る ただし、今回はJWT認証の実装は見送った。理由は後述。 開発要件 WebSock ...

開発要件 DRF+ReactでSPA react-router-domでページURLの構築 簡易掲示板のCRUD機能 カテゴリ指定・追加機能 リプライ投稿機能 CSRF検証の挙動を確認するため、あえてJWT認証はオミット CRAではなくViteを使用 以前のものは、1対多には対応しておらず、CRAを利用していた。またページもない。 更に、axiosがコールバック地獄になっているので、そちらも修正した。 使用ライブラリ ...

setStateをする時、こんな風に直接値を書き換えていないだろうか？ const handleToggle = () => { setToggle(!toggle); } state変数がプリミティブ型の場合、このsetToggleにより、再レンダリングは発生する。 しかし、オブジェクト型の場合、Stateが値の変更を検知できず、再レンダリングは発生しない。 const handleProfile = (e) => { profile[e.target.name] = e.target.value; setProfile(profile); // この方法では再レンダリングは発生しない。 } オブジェクト型の場合、このようにsetState関数内で処理をす ...

npx create-react-app frontend このコマンドでreactプロジェクトを作ってきたが、もうcreate-react-app はもう使われなくなったようだ。(2023年春時点から) そこで、Viteを使ってReactプロジェクトをつくる。 Viteとは？ Viteは、JavaScriptフレームワーク用のビルドツールである。Vite(フランス語で高速の意味)の名の通り、非常に高速。 ESモジュールで必要な部分だけオンデマンドでロードでき ...

npm install --save パッケージ名 この–saveで、package.jsonにパッケージ名を記録することができる。 ただし、–saveオプションは、npmのバージョン5からデフォルトで有効になっている。 故に、npmバージョン5で、特に設定を触っていない場合は、あえてつける必要はない。 npm install パッケージ名 でよい。 よって、タイトルのnpm install --save パッケージ名 の--saveは必要か？ はnpmバージョン5以 ...