react

ログイン、リフレッシュ処理の流れ

地獄みたいなコードになってたので整理したものをまとめておきます。 正式なフローとかではないのでご了承ください。 SPAを想定しています。 データ アクセストークン リフレッシュトークン セッションID まとめ 流れ サインイン アクセストークンの取得、リ…

「Create React App Sampleをインストールします」を消す

create-react-appで作成したアプリをビルドしてブラウザで開くと出てくるこちらについて index.htmlの以下をコメントアウトすると消せました <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> stackoverflow.com manifest.jsonはPWA周りの設定ファイルだそうです。</link>

(react)tailwindcss導入->vscodeで自動補完するまで

tailwindcssのインストール tailwindcss.com vscode拡張のインストール 補完や色の確認ができるようになり便利です tailwindcss.com prettierとの連携 導入すると自動フォーマット時にtailwindcssのclass記述がいい感じの順番にソートされるようになりスッキ…

凡ミスまとめ

ELBが1/2の確率でレスポンスを返さない ELBが2AZで、ターゲットのECSがコストの都合で1AZにしか置いてない状態。 片側(ECSを置いてない方のAZ)のELBからECSに通信が届いてないのかと思いましたが、ELBを置いたパブリックサブネットに対してIGWへのルーティン…

(cloudfront, s3)root以外でAccess Deniedになる

dev.classmethod.jp

useEffect内で依存配列を使わずに最新のstateを参照したい

unmount時にstateの値を使って何かしたい時、下のようなコードを書くとvalueの値を他の場所でいくら更新してもmount時の値である0のままになるかと思います。 const [value,setValue] = useState(0) useEffect(()=>{ return ()=>{ console.log(value)//ずっ…

onMouseDownでautoFocusが効かない

inputタグにautoFocusを設定すると、文字入力が可能になっている状態で表示されます。 <input type="text" ... autoFocus /> onClickで何らかのstateを切り替えてinputを表示させた際は問題ありませんでしたが、 onMouseDownイベントを使って左クリック以外で表示を切り替えたい場合にfocus状態…

cookieがセットされない

サーバー(golang)でhttp.SetCookieしているのにブラウザ側でクッキーがセットされなかった件について、CORSの設定が足りなかったようです。 フロント側 APIクライアントでcredentialsの使用を設定 axiosの場合はwithCredentials const backend = axios.creat…

2回renderされてない?

開発環境だけの仕様とのこと。 strict モード – React 補足: この機能は開発モードのみで適用されます。ライフサイクルは本番モードでは 2 回呼び出されることはありません。

オーディオのimport

javascript - EDIT: How to import MP3 files in React app - Stack Overflow