[preOnboard#4]チャットウィンドウページ課題後記

羽状バニラ
チャットウィンドウページ 🤹‍♂️
n/a.ターゲット

Reduxを使用して、ログインとメッセージ・データのグローバル・ステータスを管理します.

チャットウィンドウを実現するために必要な複数のUX機能.

感想
🍷 Redux

李徳思は抽象的で、概念が容易ではなく、個人プロジェクトをする時、実は回避する感じもありません.しかし今回はFreeon BoddingでRidexのレッスンを受け、以前よりよく理解できたので「Ridexを試してみる」という自信が生まれました.どんなに難しく見えても、似たようなコードを何度も見たら、頭の中で積み重ねて熟知しているように見えます.

🎼 scss
このプロジェクトでscssを初めて使いました.試用後の結論は「小さな項目ではないのでなるべく使わない」です.

まず、propsを入れる過程が大変でした.私が担当しているセクションでは、入力ウィンドウにメッセージが1つある場合にのみ転送ボタンが有効になりますが、styled-componsesではusState propsをスキップするだけでよいので、scssはpropsとしてのクラス名を追加するために新しいコンポーネントを作成する必要があります.

また、1つのcssにネストする過程で、大きな括弧の範囲を外すとcssは適用されず、jsxコードと比較して検索する必要があります.

最後に必ず書類をください.ファイルをscssファイルに分離する必要があるため、vsccodeで画面の両側にファイルを置くのは面倒です😭

いずれにしても、バニラをあちこち見て、きっと使うアイテムもあります.個人的には、小さなプロジェクトでは、scssは明らかにstyled-conntsより軽いです.cssは文法と本当に似ているので、色のような簡単な変数やstyled-componsesの素子指定のような重い感じはありません.また,開発者ツールElementでは,コードに指定されたclass名で出力するのも便利である.
しかし、一定規模のプロジェクタを行う場合、汎用コンポーネントのモジュール化とprops伝達がより便利なstyled-コンポーネントがより良い場合があります.scssはモジュール化やprops伝達も可能であるが,styled−componseほど直感的ではないようだ.
🍵 作成したutil関数
メール作成時刻(=現在時刻)フォーマット関数

export const formatDate = (date: Date) => {
	return date.toISOString().substring(0, 19).replace('T', ' ');
};

検索により、yyy-mm-dd hhh:MM:ssに現在の時間を出力する単行util関数が作成されます.
最初に受け取った日付TOOString()を付けると、年月日と時分秒の間に大文字の「T」が出てきて、文字列の最後に3文字程度のランダムアルファベットが印刷されます.
この形態を整理するために、先頭の年から毎時「秒」まで19箇所をカットし、中央の大文字「T」をスペース("")で置き換え、最後に所望の形態の文字列として出力します.
トラブルシューティング
👿 質問する
入力ウィンドウ(textarea)では、ハングルを書くときにハングルを2回入力する現象があります.
🧚‍♂️ 解決する
stackoverflow検索により,textareaでトルコ関数を含む「onKeyDown」propsを「onKeyPress」に変更すればこの問題を解決できることが分かった.
原因は分かりませんが、私のパソコンでは発生せず、他のメンバーのパソコンで発生し続けるエラーです.解決できて嬉しいです.