プログラミングの勉強
GraphQLとは、Facebookが開発した、REST-APIに変わるAPIの方式。 ざっくりと「GraphQLって何?」が一言でわかるように、簡潔にまとめる。
ejsの構文として`include`がある。 ejsファイルからejsファイルを呼び出せる。 include構文の使い方をメモする。
Node.jsを利用してWEB APIサーバを立ち上げたい。 Node.jsに画面サーバを担わせることもできるが、画面側はReactで作成したいので、今回はWEBサーバとして基本的なAPIを提供するところまでを目標とする。
EC2でサーバを立ち上げて、SSHでサーバに入る方法メモ。
EC2サーバ(Linux)上にdocker環境を構築し、コンテナを立ち上げてwebサイトを表示する。
以下手順にしたがってgatsbyによるWebページ作成を試していたところ、想定外のエラーが発生した。結果的にVagrantのメモリを大きくすることで解決したので、対処法をメモ。
ReactアプリやNode.jsのExpressでアプリを作ると自動で作成される`package.json`ファイルの意味をメモ。
Node.jsのモジュールgatsby-cliをインストールしたが、利用できない(`gatsby --help`などのコマンドを打つとエラーが出る)状態だったので、対処法をメモ。
Reactでは、コンポーネントを関数で定義しているが、関数の外に書いた処理はいつ実行されているのかよくわからなかったので試してみた。
EC2にSSH接続する際、ポートフォワーディングの設定をしたい。 本記事はこちらへ移行しました。 bunsugi.com
ローカルで開発したソースコードをAWS CodeCommitで管理する。
React×Typescriptでルーティングする際、前画面の値を次の画面に渡す方法を記載する。 ①URLパラメータを使う(パスパラメータ、 クエリパラメータ)② ``コンポーネントにstateを渡す③`useHistory()`を使う
Vagrant環境と、ローカル環境ではフォルダを共有することができる。 Vagrantfileに設定を入れてもうまくいかなかったが、`vagrant-vbguest`をアンインストールすることで解決した。
ssh接続は一般的に sshコマンドで実施するが、事前にファイルに設定を記入しておくことで、簡単にSSH接続することができる。
違うサーバどうしでファイルをやり取りするのは`scp`コマンドが一般的である。 ここでは、scpの基本コマンドの解説に加え、Vagrant仮想環境とローカルのファイルのやり取りを実例としてメモする。
VirtualBoxで突然ディスク容量不足により、何もできなくなったので、ディスク容量を拡張した。
VirtualBoxで突然ディスク容量不足により、何もできなくなったので、対処した。内容をメモ。
ReactとNode.js Expressを使って、チャットアプリの超基礎となる部分を作成した。今回は、機能を追加し、さらにチャットアプリに近づける。
型定義が必要なTypescriptを利用しているが、何を定義したらよいか難しい場合があるので、調べた内容を記載する。
eact-router-domを利用して基本のページ遷移を実施する。 react-router-domは2021/11/3にバージョン6がリリースされたようだが、情報が少なくて独学が難しいのでバージョン5から始める。
Reactのreact-router-domを例に、yarnで古いバージョンのパッケージをインストールする方法メモ。
React × TypeScriptでコンポーネントを追加するときに毎回迷うので、基本となる要素をメモ。
ReactでCSSを適用する方法のメモ。ReactでCSSを当てる方法はいくつかある。覚えておけばよさそうなものだけ抜粋してメモ。
Reactのレンダリングに関わるuseEffect、memo、useCallback、useMemoに関しての基本事項を記載。
AWS AmplifyでReactアプリを作成しようとしたところ、ビルド実行時にエラーとなったので原因をメモ。
Reactを勉強する中でJavaScriptの記法を利用している。 その中でよく出てきた、超基本の重要なJavaScript記法をメモしておく。今後、何か月か勉強をお休みすることがあると忘れそうなため。
Reactを利用してアプリを作っていたところ、予期せぬ大量レンダリングが発生して画面描画が遅くなってしまった。 いろいろ試した結果、useStateのset関数の使い方が悪いことがわかったのでメモ。
ReactとExpressを利用して簡易チャットアプリを作成した。 実施した内容をメモ/紹介する。
チャットアプリの事前準備として、画面サーバ(React)とWebサーバ(Node.js)を別々に構築して、クライアントとWebサーバ間をSocket.ioで接続する。
自分で画面サーバとWebサーバを作成し、通信させる。 具体的には、画面サーバがWebサーバから値を取得して、画面表示する。 また、このときに必要になるCORSについて理解する。