プログラミングCross-Origin-Opener-Policy policy would block the window.closed callの対処方法
Firebaseを使ってのアプリを作成している時、Google認証でログインした時に、コンソールに「Cross-Origin-Opener-Policy policy would block the window.closed call」エ...
備忘録
プログラミング
プログラミングFirebaseにメールまたはどのプロバイダからログインしたかを知る方法
Firebaseの認証には、 メール認証 GoogleID認証 facebook認証 Twitter認証 ・・・・ など、いろいろなプロバイダーを使ってログインする方法があります。 神谷 アプリにどんな認証を許可するかの設定はこちらから。 ...
プログラミングReactプロジェクトでreact-router-domを使ってSignIn/SignUp/Home画面を制御する。
当該記事のサンプルコードはこちら(Github)。 アプリはこちら(Outlet-Test) Reactのページ遷移はreact-router-domを使ってやる ユーザー登録をして、何かサービスを行うアプリには、SignIn/SignUp...
プログラミングReactのプロジェクトで環境ファイル(.env)の定義の読み込み方
Reactのプログラムを作っていた時、あるメソッドのプロパティにURLを設定する必要が出てきました。 そのとき、 コードにURLを”べた書き”するは嫌だな… と多くのエンジニアは思うでしょう。 なぜなら、今は開発中のプログラムは今はloca...
プログラミングVS Codeの拡張機能REST Clientを使った時に「connect ECONNREFUSED 127.0.0.1:(ポート番号)」のエラー発生について
REST Clientは、VS Code上でRest APIのレスポンスを確認できるVS Codeの拡張機能。 マーケットプレースで「REST Client」を検索して、REST Clientのページでインストールするか、VS Codeの拡...
プログラミングReactプロジェクトで画像にマウスオーバーしてポップアップを出す方法
「画像にマウスオーバーするとポップアップが出る」ということを実現する方法は何通りかあると思います。 この記事ではReactのcreatePortalを使用して、画像にポップアップを出す方法をご紹介。 プログラムの概要 表示された画像にマウス...
プログラミングReactのプロジェクトでsrcフォルダにある画像を読み込む
Reactのプロジェクトでsrcフォルダに保存しておいた画像ファイルが読み込めない! という場面に出くわい焦ったので、その対処を備忘録として残しました。 画像が表示されない Reactプロジェクトでsrcフォルダにある画像を出力しようとした...
プログラミングchakra uiでReactのプロジェクトをスタイリングしてみよう
Reactのスタイリングをするためのライブラリには、二種類あって コンポーネントタイプ クラスで定義するタイプ といった感じです(このタイプの呼び方は私が考えたんで、別の言い方があるかもしれませんが)。 前者はchakra ui、Mater...
プログラミングreact-iconsの使い方
react-iconsには、さまざまなiconが用意されています。 これを使わない手はないと思い、その使い方をご紹介。 react-iconsのドキュメント react-iconsのドキュメントはこちらです。 VSCodeなどを使っていれば...
プログラミングReactの特定コンポーネントだけに適用するCSSを作りたい(css in js)
Reactのコンポーネントってとっても細分化されますよね。 それに、ある特定のCSSを適用させたいときには、「そのコンポーネントのタグだけに適用させたい」と考える場面は当然あるでしょう。 ということで、特定コンポーネントだけに適用できる『c...