個人開発メモ（フロントエンド編）
abeuzZ概要
個人開発（元記事URL 貼る）における調べ物のメモです。
自分の見解や苦労などはIMOとしてトグルに格納しています。
abeuzZTailwind
motivation
- 業務で触っていたbootstrapに似ており、慣れやすそう。
- やりたいデザインはTailwindで足りる。
knowledge
IMO
2023年状況だがとても良くまとまっており参考になりました。感謝。
CSSで独自スタイルの変数を定義するのは複数人開発だと意図せずオレオレスタイルが定義されてしまい、ほとんど似たようなスタイル定義が重複したり親要素との依存関係など複雑になるイメージなのでライブラリという共通言語の方があった方が良いと思っている。
とはいえデザインや手触りはこだわりたいのでUIライブラリは不採用。
ありがとうTailwind。
（2020年くらいのフロント知識なので上記問題を解決する手法があれば教えていただけると嬉しいです！）
abeuzZNext.js
abeuzZスマホでlocalhost接続
自分のMacのIPアドレスがわかれば良い。
同じwifiに接続してlocalhost代わりにすれば接続できる。
上記以外にもターミナルでifconfigでもIP調べることが可能。
abeuzZただこれするとNext側でクライアントコンポーネントとサーバーコンポーネントでhost名をIPとdockerサービス名で使い分けないとうまく接続できない。（自分の勘違いかもしれないが）
どこかで解決したい。
abeuzZInfinity Scroll実装
基本的な考え方は以下の感じ。
- useStateでページネーションのindexを記録
- コンポーネントを監視してスクロールして画面に入ったら発火してページネーションindexを増やす
- バックエンドからページネーション形式で次のデータをfetch
- コンポーネント追加
あとは監視をどのようにして実装するか。
いずれの外部ライブラリも更新が2年前くらいで止まっている。
最新のNext14を利用していることもあり一旦IntersectionObserverを用いて自前で実装してみる。
abeuzZserverActionに関して
abeuzZclient component & server component
abeuzZuseSWR
無限スクロールでuseStateなどを使ってクライアントコンポーネントからAPIを読んでコンポーネント追加という動作をする必要があったの調べ物で見つけた。
最初はサードパーティライブラリなので不採用にしようと思ったがライブラリ制作者はNext.jsと同じくvercelなので検討中。
結構記述減らせそう。
abeuzZuseEffect
バグを見つけ出すために、開発中には React はセットアップとクリーンアップを、セットアップの前に 1 回余分に実行します。これは、エフェクトのロジックが正しく実装されていることを確認するストレステストです。これが目に見える問題を引き起こす場合、クリーンアップ関数に一部のロジックが欠けています。
開発中にuseEffect内のAPI等が2回実行されていると思ったらそういう仕様か