React
一般的な話であるが、OAuth認証の基本的な仕組みを前提として確認する。OAuth認証を利用するWebアプリは、OIDCプロバイダから提供されたアクセストークンの正しさを、ユーザプロファイル情報の取得可否によって確認する。つまり、認証の過程においてWebアプ…
SVGを最近よく活用している。CanvasよりReactとの相性はよいし、ベクターなのも好み。 (Three.jsを使えると面白いけど、、その機会はなかなかない。) だいたいの場合は、HTMLに埋め込んで使えばいいので、特別なことをする必要はない。 ただ、たまに画像と…
Azure Static Web Appではstaticなファイルにはmiddlewareが機能しないっぽいので、 画像にも認証をかけたい場合はAPIで画像を返すようにする必要がある。 Static Web Appってそういうものだよなーと思っているので仕方ない気がするし、 そもそも認証が必要…
以前にAzure Web App Serviceへのデプロイについての記事を書きました。 ma38su.hatenablog.com 今回はこのデプロイをブラッシュアップして、Azure Pipelineからstatic web appへもデプロイできるようにしました。 2024/2/10 追記 Next.JSのmiddlewareうまく…
NextJsの認証を簡単に実現するモジュールのひとつであるNextAuth.jsについて、Autodeskアカウントを使ってみようということで、 今回はカスタムプロバイダーとしてAutodesk Platform ServicesのOAuthを試してみたので、その結果を残しておきます。 いまauth.…
追記:NextJS(AppRouter)でSuspenseを使うときはCSRにしようと書いたのだが、CSRだとNextJSのRouter Cacheと相性がわるそう。というか、最近NextJSはオーバースペックだなぁと感じている。 Viteで作っていたReactのプロトをNextjsに移植したところ、Suspense…
最近、新しいアプリを作ってみたらデプロイに苦労したのでメモを残しておく。 2023.9.13時点で、Next.JSのアプリは、VSCodeの拡張機能や、Web App Serviceから自動設定できるGitHub連携のデフォルトのGitHub Actionでは、Next.JSのデプロイに時間がかかりす…
少し前に話題になっていたReact自体の自作をやってみた。 一日かからないくらいの時間で、実装できるし、Reactの動作をかなりこまかく理解できるようになったので、React書く人にはお勧めしたい。 zenn.dev 自分が書いたのは以下。ほぼ写経。 github.com 気…
軽量なコンテナを作るにはdistrolessのイメージをベースにするのがよいらしい。 distrolessは、Googleが管理しているイメージで、Google Container Registryで管理されているっぽい。 github.com 当たり前だけどdockerhubで検索してもでてこない。 とりあえ…
とりあえず実装すると以下のような形か。 import React from 'react'; const Counter = () => { const [count, setCount] = React.useState(0); const handleClick = React.useCallback((e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { setCount(c => c + 1); }, []); return ( <div> <p></p></div></htmlinputelement,>…
状態が頻繁に更新されるコンポーネントということで、タイマーを実装してみる。とりあえず、実装すると以下のようになる。 import React from 'react'; const Timer = () => { const [time, setTime] = React.useState(0); React.useEffect(() => { const id…