"heydude", my app
アプリを作り始めた。
後で見返して成長を感じられるように困った点と達成した点を時系列で逐一時系列で書いていこうと思う。
アプリの内容:
目標1:狭い範囲のトピックで最適な選択肢を提示する
目標2:動的(編集、アカウント認証、レコメンド、)
最終:CRUD可能な情報最適化アプリ、最適な選択肢を提示するウィキペディア。
使用ツール:{
エディタ:vscode,
サーバー:XSRVER(サーバーサイドでnodejsを動かせるのを確認できたため。OS: Linux, middle : apache )→GCP Compute Engine に変更
フレームワーク:NEXTJS(フロントエンド兼バックエンド)
ライブラリ:d3,
}
2022年10月23日
2022年10月24日
ページ遷移の作成
2022年10月27日
d3を使用してアプリ上で以下のsvgを表示・指示内容に従って変化させたい。
cf) d3 APIリファレンス
課題:observablehqを参考に自分のコードに落とし込もうとしているが、表示がうまく行かない。observablehqのjsを自分のアプリのnextjs(react)&typescriptに適用させたい。
解決方法:
1. nextjs内で、d3を使った簡単な図形の描写。済
>|js|
import React, { useEffect, RefObject } from 'react'||<
2. サンプル対象を変更。observablehq.comのコードを適用する。
2022年11月1日
Next js APIのテスト実装
2022年11月2日 GCP Compute Engineに移行する。理由はインフラから制御することでサードパーティライブラリでの柔軟なサービス設計が可能だと知ったから。(訳:「Iaasかっこいい」)
方法は全て公式ドキュメントに記載されていると信じている。(グーグルのドキュメントのシンプルさや構成が好きなのは僕だけでしょうか。)
・GCPドキュメント(メタマネージドSSH接続のサードパーティ欄参照。サードパーティなので手動で設定)
→ローカルのターミナルでRSA 鍵ペアを作成。
→作成済みのVMに公開鍵を追加。Google Cloud Consoleで、先ほど作成したキーの公開鍵を追加。
→サードパーティツールのSSH接続方法(今回はVSCode)に従い、ssh接続。
→接続確認。
}
nextjs 公式ドキュメントより
System Requirements
Node.js 14.6.0 or newer
MacOS, Windows (including WSL), and Linux are supported
-> nodejs のインストール cf) nodejsドキュメント
-> ubuntu で、パッケージマネージャを使いnodejs (lts)をインストールしたい。
-> 脳筋状態で以下コマンド(Github/nodesource)をコピーアンドペースト
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
-> インストール完了 (node -v コマンドでチェック可)
-> npm npx の使用可能。