PB

VSCodeの拡張機能であるPrettierを利用しているので、フォーマットがエディタ依存となっている

導入

• prettier ... コードをフォーマット(整形)してくれる。
• eslint-plugin-prettier ... prettier -> eslintの順で実行してくれる。
• eslint-config-prettier ... prettierが整形した箇所をeslintに無視させる。

べき等を保つ

リクエストの結果は何度送信しても同じ

• GET
• PUT
• DELETE

安全性を保つ

リソースを変更しない

• GET

追加

• statusコード(仕様にそった)
• 通信出来ているかを確認する。(bodyでメッセージを送信...Webを支える技術参照)

削除後、画面更新がされず削除を反映させるにはリロードが必要

• 見出し&URLは必須項目
• 投稿ボタンは必須項目が入力されるまで押せないようにする。(disable)
• 各入力欄はSQL・HTMLタグに使用される特殊文字(<>, </>, (), *など)を正規表現をかける
• エラー内容を各入力欄の下に表示する
• データ送信先(/api/link)にtitle, comment, urlを送信する

※注意:App.jsに投稿までのテスト処理が書いてあるがあくまでテストなので送信項目まで引用可

修正後にDB保存されるが、取得し更新まで出来ていないので修正が必要

1. 編集ボタンを押し編集する。
2. 完了ボタンを押すことでAjax通信が始まりDBが更新される
3. 表示は変わっているが、表示内容が再度DBから取得されていないので修正が必要。
   エラーも起こっている

• ES2015以降のブラケット構文を使用する為に、babelでコンパイル

• DB操作をブラケット構文として、リファクタリング

• TypeScript化。tscでトランスコンパイル

正規表現によるバリデーションのエラー

同じURLでもコピー内容を貼り付けすると、
testメソッドにてfalseとなるが
手入力だとtrueとなる。

追加機能

• 期限付き永続ログイン
• ブラウザの終了時までログイン

実装方法

上記機能のどちらを利用するかのcheckboxを選択肢する。

• true : 期限付き永続ログイン
• false : ブラウザの終了時までログイン
  この場合、request.session.cookie.expire = false;にする

修正

session.idでuserの名前を利用しているので、ライブラリを使う。
https://www.npmjs.com/package/uniqid

LinkCardデフォルトでの並び順を作成日(降順)とするソートロジックをReact(クライアント側)で実装する。

クラアント対サーバーは圧倒的にクライアント側の方が数が多いいためサーバー側でsortを行ってしまうと負荷がクラアントの数分だけ生じてしまうのでクライアント側で実装する事でアクセスする側で処理を行い負荷対策を取るため

データを取得するのがTopPageのコンポーネントがマウントした時なので、pathのみが変わる現在、投稿しトップページ移動した際にデータを取得していない

dockerContainer起動時にPostgresを生成する

• cookie
• session

LinkCard・UserのCRUD

• 作成・更新・削除が正常に出来ているかをユーザーにメッセージとして送信する

branch:mainPageの変更点を反映

1. Reduxで並び順を管理する。
2. 並び替えの状態をContainerで取得し、Storeから取得したLinkCardを並び順でfilterをかける。

Chrome

• Local に保存されているファイルを読み込む形式(<input type="file" />)

テストデータの作成

• 複数のユーザー
• 複数のLinkCardデータ

テストコード

目的

• DB機能を担保する
• リファクタリング後の動作確認の手間を減らす

PB

現状ReactにStateとして状態・データを持たせているので、Reduxを利用して

• action
• reducer
• store

に分割して管理する。
Express APIとの通信はRedux thunkで実現する。

RegExp.prototype.toString()

SNS

• Google
• Facebook
• Twitter ... 申請が必要

ライブラリ

• passport
• auth0

検索範囲 ( column name)

• タイトル(title)
• 詳細(comment)

1. データベースに必要なTable設計のファイルを用意

• Usersテーブル設計 1
• LinkCardsテーブル設計 多

2. コンテナ起動時に実行する用に設定

新規投稿画面の実装について

1.新規作成ボタンを押す
2.modalで投稿formが現れる
3.投稿フォーム外を押して作成をやめる | 送信画面を押す
4.modalを解除してTopPageへ

docker
postgres
　username
password ...
以上のデータベース情報などを隠しファイルで管理する。

Reactのファイル構成にAtomicDesignを取り入れる。

Pb

Reduxへ移行

Pagenation