//tips
久しぶりにcrunchbaseの探索。
https://www.entrepreneur.com/article/424448
Zora has raised $50M from Haun Ventures to enable anyone to create NFTs
あとはイーロンさんのtwitter買収意図の確認。
https://www.dailymail.co.uk/news/article-10791425/Elon-Musk-plans-fire-1-000-Twitter-staff-quintuple-revenue-69-million-users-paying-3-month.html
https://www.businessinsider.com/elon-musk-new-twitter-product-x-launch-plan-pitch-deck-2022-5
//smart contract
http://localhost:3000/IDでのnft表示順番が一種のランダムになっているが、そちらはどうするかも後で決める。
nftimageを縦横に等間隔に並べる。
<h2>ALL Players</h2>
<Grid container >
{ninja.map((item,index) => (
<div key={index} className={classes.grid}>
{item.storagelink &&
<Grid item xs={3} md={3} lg={3} >
<img src={item.storagelink} alt="" width="300" height="300" onClick={()=>router.push('/ID/'+item.userid)}/>
</Grid>
}
</div>
))}
</Grid></Grid>
</Grid>
予想以上に手間取ったがこちらにて対応できた。
makestyleには
grid: {
margin: "auto",
},
を追加しておいた。
Imageをクリックするとそれぞれのuseridに紐づいた[id]ページに飛ぶようにしている。
VercelよりVercel - Hobby Case Opened [No Reply]というメールが来ており、エンジニアが返信するから3-4 days待ってねとのこと。
日本の商標は問題なさそうなのでロゴを作ってみるか。
面白そうなのでランサーズなどの日本の機関でオークションをするのではなく海外デザイナーなどが入ってくる99designsを利用してみることにする。
https://99designs.jp/
念の為next.jsのdiscordにも入れるようにしておいた。いざとなればここで直質問する。
複数回読み込み時のブラウザおよびサーバのコード認識順序で混乱したので、少しnext.jsの復習。
https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state
https://reffect.co.jp/react/react-useeffect-understanding
イベントを呼ぶ際にはfunction handleOnAuth(e) {とせずに下記のように呼ぶことができるが、eをつけることでe.preventDefault();を組み込めるのでeをつけた方がお得か。
function handleClick() {
console.log('increment like count');
}
stateを使うのはuiからの変更情報をサーバ側に伝えるためで、サーバ側が外部から取得する情報をわざわざstateに格納する必要はないのか。stateが重く、slowにさせている要因だった場合は見直すか。
You can think of state as any information in your UI that changes over time, usually triggered by user interaction.
UIの変更が絡む箇所はstateを絡ませることでスムーズにいく。既に描画されているブラウザでイベントが実行されるとイベント関数が呼ばれてstateの変数がアップデートされるわけだが、このアップデートされたlikesの値はブラウザ側で保存される。
const [likes, setLikes] = useState()
function handleClick() {
setLikes(likes + 1)
}}
return (
<div>
{/* ... */}
<button onClick={handleClick}>Likes ({likes})</button>
</div>
)
React (Next.js) の useState フックは、Web ページの状態を保持するものだが、ページのリロードや、ブラウザの再起動を行うと、その状態はリセットされる。保存先はメモリのよう。
何度もページの読み込みが行われるのはuseeffectの第二変数の受け取り設定が要因。
useEffect（副作用フック）で設定したコールバック関数は、クライアントサイドでのレンダリング時にしか呼び出されず、レンダーの結果が画面に反映された後に動作するようになっている。つまりuseeffectが行われる前に一度関数が読み込まれページが反映された後にuseeffectの関数が実行されることになる。
これはページの更新ではないので他の関数は呼び出されない。
useEffectは画面が描写された後に実行されるので描写前に何か処理をしたいという時にはuseLayoutEffect Hookを利用すれば良いよう。
これは使ったことなかったのでいずれ試す。
