msksgm’s blog

msksgm’s blog

Webエンジニアです.日々の勉強,読書,映画観賞,美術観賞の記録を載せます.

6月の振り返り

6月の振り返り 今月から週一で技術記事を作成します.

生活習慣

プログラミング関連

個人開発

1 週目

TypeScript を使ったバックエンドを学習.
3 層アーキテクチャを構想,TypeScript で DI を使うツールは,typeDI,TSyring,inversifyjs の 3 つがります.
現在コンパイルが通りません.

2 週目

TypeScript,express,typeORM,typedi を使ったバックエンドを作成しました.
これからこれを主に使おうと思います.

React で CRUD 処理をするフロントも作成しました.
axios とか form を完全に忘れていましたが,なんとかなりました.

3 週目からは認証認可をやりたいとおもいます.

3 週目

引き続き,言語が TypeScript,フロントエンドに React,バックエンドに express, typeORM,を使ったアプリ作成を練習中です.
docker compose を用いてフロントエンド,バックエンド,DB を docker network にひとまとめにすると,cors を解決できない問題に悩まされています.
firebase を用いた認証ができるようになりました.来週からは認証に取り組みたいと思います.

4 週目

Firbase Authentication の認証処理と jwt の導入に頭を悩ませています.
Firebase に認証をおこなったあとに,user 情報を DB からどのように取得するかを考えています.
また,脆弱性について学んでいるのですが,React で対策できているか不安です.

フロントエンド

1 週目

特になし

2 週目

figma についてゼロイチラボさんの動画で学びました
とてもわかりやすく,最初の一歩に最適でした.

React で API から CRUD を行うアプリの作成にも取り組んでいました.
API 通信には axios をつかい,form の処理には react-hook-form を用いました.
UI Component には semantic UI を使用したのですが,react-hook-form との折り合いが悪く,Controller を使えば解決できるらしいのですが,素の input を使うことで解決しました.
React のアプリは環境変数プレフィックスに REACTAPP をつけないと動かないのが驚きでした.

3 週目

React でアプリのフロントエンドを作成しています.
firebase authentication を用いた認可処理について取り組んでいました.
ひとまず導入できるようになったので安心です.
4 週目からは,認可についてとりくんでいきます.

4 週目

React Router のprops.history.pushでページ遷移を行っていました.
レイアウトコンポーネントとどう組み合わせるか難しいです.
また非同期処理についてよくわかっていないので,CRUDAPI を叩いたときに,CREATE したあとに,READ がちゃんとできていないと思ったら,CREATE->READ の実行順序が担保されていませんでした.
async await文で順序を指定できることがわかりました. 認可について作成しています.
Firebase Authentication を使っていますが,どのように jwt と組み込ませるのかで詰まってしまいました.
そろそろ,テストについても取り組みたいのでピンチです.

バックエンド

1 週目

TypeScript で Web API サーバーを作成
TypeORM 学んだ.
inversify で DI を導入したいが上手くいかないと思ったら,公式でもできないような記述があったので断念.
nestjs を使えばできるみたいなので,2 週目から nesjs で取り組むことにした.

2 週目

一度 nestjs で WebAPI サーバーを作成しましたが,オブジェクト単位で controller,service,repository を自動生成するのが,個人的に合わなくてやめました.
なので,typescript,express,typeorm,typedi で API サーバーを作成しました.
DI はちゃんとできているか不安だったので,StackOverflow で質問をしましたが,返答が来ていません....

RDS,EC2 へのデプロイをおこない,DB 接続ができているかを確認しました.
無事に動作することを確認できてよかったです.

ついでに Docker 化もできました.

3 週目

docker compose を用いて,バックエンド,DB ワンコマンドで作成できるアプリを作成しました.
DB 環境を気にしなくてよくなったので,これからも活用していきます.

4 週目

認証処理のための API 設計をしていました.
どのようにして,Firebase で自動生成される uid から userid を取得しようか考えています.

インフラ

1 週目

特になし

2 週目

node.js のバックエンドを Docker 化

3 週目

Docker 化したアプリを docker compose で連携
フロントエンド,バックエンド,DB をまとめると CORS が発生して困っています.

4 週目

docker volume を圧迫しているときに,以下のコマンドで開放することができます.

docker volume rm $(docker volume ls -qf dangling=true)

データベース

1 週目

ORM(TypeORM) についてなんとなくわかった.

2 週目

特になし.3 週目にはローカルに Docker で DB サーバーを作ってみようと思います.

3 週目

Docker で DB サーバーを作成.
docker compose でバックエンドとの連携が可能になった.

4 週目

typeorm でユニーク制約やデフォルト値の付け方がわかりました.

ネットワーク

1 週目

特になし

2 週目

RDS,EC2 に API サーバーをデプロイ

3 週目

docker compose で docker 間通信を実現

4 週目

特になし

英語

技術記事

1 記事目 「 簡単に typescript + express + mysql で簡易 webAPI サーバー作成」

6/4(金)に作成

msksgm.hatenablog.com

2 記事目 「コピペで anyenv,nodenv から React(TypeScript)環境構築」

6/11(金)に作成

msksgm.hatenablog.com

3 記事目 「typeorm の設定を typeormconfig.ts から読み込む」

6/18(金)に作成

msksgm.hatenablog.com

4 記事目「Firebase エクスポートされたメンバー 'User' がありません。as no exported member 'User'.」

6/25(金)に作成

msksgm.hatenablog.com

知識の Buffer

  • winston
  • mailggun
  • agenda
  • async await
  • helth エンドポイントパタ=ン
  • nestjs
  • node.js から DB サーバーにヘルスチェックをおこなう
  • jwt

趣味

読書

1冊目「現場で役立つシステム設計の原則」

msksgm.hatenablog.com

2冊目「エンジニアリング組織論への招待」

msksgm.hatenablog.com

3冊目「ノンデザイナーズ・デザインブック」

msksgm.hatenablog.com

映画観賞「シン・エヴァンゲリオン劇場版:||」

msksgm.hatenablog.com

美術観賞「特別展 国宝 鳥獣戯画のすべて」

msksgm.hatenablog.com

絵を書く

最後に