学生達のコードと時間を評論します

週末にできるから!同期たちとコードレビューをしました!!🎉 🎉 🎉
この间初めて一人で勉强して、Code Reviewを一绪にやったので、紧张して、どう発表すればいいか分かりませんでしたが、结果は本当に充実して楽しい时间でした.
思いがけない方法で近づいてくる同級生たちのコードを見て、「わあ、これでもいいよ」と感嘆した.
私が同級生たちに私のコードを説明したとき、私も自分の考えとコードを書く程度によって、説明の質も異なることに気づいた.
新しく学んだことをまとめる前に、これを覚えておきましょう!
「コードに正解はありません.開発者ごとにスタイルが違います.メンテナンスと効率的な方法を考えてみましょう.」

新学

コメントウィンドウは<textarea>

ホームページでfeedコメントウィンドウを実現したとき、私はそう書きました.

<div class="feed__comment-input">
  <input
    type="text"
    name="comment"
    id="commentInput"
    class="comment__input"
    placeholder="댓글 달기..."
  />
  <button
    type="button"
    id="commentAddBtn"
    class="comment__add-btn"
    disabled
  > 게시 
  </button>
</div>

しかし、サンシャイン(同期)は、私たちが実現するこのコメントウィンドウは<textarea>であるべきだと述べた.
例として、実際のInstagramコメントウィンドウを持ってきました.

コメントウィンドウは短くても長くてもかまいません
すなわち、マルチスレッドの特徴を有する.
したがって、input type=textではなくtextareaのラベルを使用するのが適切です!💡

Unicodeアプリケーションfont Awesomeを使用

インスタグラムと同じアイコンはあまりないのでfont Awesomeではなく、そのままスケッチデザインアイコンで使います.
他の学生の多くはfont Awesomeを使っています
HTMLではなくCSSでロードする方法を教えてくれました!

<!--기존에 내가 사용했던 방식 - HTML -->
<span class="heart-btn">
  <i class="fas fa-heart"></i>
</span>

<!--유진님께서 알려준 방식 -->
<!-- HTML -->
<span class="heart-btn"></span>

<!-- CSS -->
.heart-icon::before {
  font-family: "FontAwesome";
  content: "\f004";
  color: #000;
}

margin: 0 auto VS display: flex

縦以外にも横並びだけなら代表的なmarginとflexの方法がありますが、何を使えばよいでしょうか?
結論として、flexを使用すると、コードは2行になるので、margin autoを使用することができれば、display flexを使用するほうがいいかもしれません.
そして、全員が同意した部分が何が良いのかは、実現状況を考えるよりも判断したほうがいい.

/* Marign */
margin: 0 auto;

/* Flex */
display: flex;
justify-content: center;

text-overflow: ellipsis;

Enter = 13

ホームページの「コメント機能の追加」実装セクションでは、ユーザーが「enter」に従って「コメント機能の追加」コードを作成します.

const isPressEnter = e.code === "Enter";
if (isPressEnter && isInputValid) addComment();

恵利(同期)は「Enter」の代わりに13を使うことができると言った.
どのオペレーティングシステムも同じであることが気になるので、質問すると他のkit値が異なるかもしれませんが、企業は13です.

const isPressEnter = e.code === 13;

でも今は好奇心があると書いてあります
すべての開発者が13が企業であることを知っていればよかったのですが、知らなかったら?
あるいは,コードが多い場合にずっとブラウズしていて,13を別の変数値と勘違いしているのではないか.
「Enter」でコードを書くと分かりやすくなりますか?疑問が生じる.
でも浅い?現在グーグル検索では、ほとんどが13を利用しています.
どうして13を選んだのですか.🧐 この部分はまた探さなければなりません.

input autocomplete

<input autocomplete="on|off">formタグにinputタグがある場合、autocomplete are reportを使用すると自動的に推奨され、自動的に完了するそうです.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
これに対して、さらに検索すると、autocompleteプロパティ値をonとして指定すると、ブラウザはユーザーが以前に入力した値に基づいてユーザーが入力した値と似た値を表示することがわかります.
スイッチセットもありますが、どうせ

form.reset

HTMLFormElement.reset()メソッドを使用すると、formラベルのinput値がすべてリセットされます.

keyup VS input

git hubにアップロードされた同期コードを表示すると、入力されたイベントはinputとkeyupの2つの部分に分かれていることがわかります.

userEmail.addEventListener("input", enableButton)

userEmail.addEventListener("keyup", enableButton)

昨日warm-upセッションの時間、指導者はinputがレプリケーション値を伝達できないことを教えてくれました.この部分は聖賢テストが発見した事実です.keyupは、すべての鍵のイベントの発生を聞いた.すなわち,制御+Cによる複製値を受け取り,またCustomに変換された複製キー値も受け取る.
逆に、inputコントロール+Cまたはカスタムキー値も受け入れられません.
つまり、文字、数字、特殊文字キーのみが受け入れられます.
そのため、ログインセキュリティを強化したい場合は、アクティブオブジェクトをinputに使用できます!

関数宣言文と関数式

関数宣言文は関数反発を生成し、式は変数反発を生成します.
したがって、エラーを減らすには、関数呼び出し前に関数を宣言しなければならないルールに従う関数式として定義する必要があります.
でも.指導者や学生たちのコードを見ると、ほとんどが関数宣言として定義されています.だから混乱して、最終的に私も関数声明を書きました.この点についてみんなで議論したいので、議論することを提案します.
結果は宣言式や表現式の中で何がいいのか、良いというより、一つの方法を維持し続けたほうがいい.(たとえば、宣言式を使用する場合もあれば、式を使用する場合もあります)
コードが長くなると式がよくなるようで、最近の傾向では関数式という情報も知られています.
また、関数式で書く習慣を身につけるべきだと思います.
それは最初からこんな間違いを犯したからだ.

commentInput.addEventListener("keypress", triggerAddComment);
commentAddBtn.addEventListener("click", triggerAddComment);

function triggerAddComment(){}

上のコードは関数コードです.
しかし、関数宣言前に呼び出すのは正しくなく、潜在的なエラーの可能性があります.
そこで、矢印関数を使って式を書く習慣を身につけましょう.
△必ずしも矢印関数を使う必要はありません.このバインドを考えてみましょう.

const triggerAddComment = ()=>{}

commentInput.addEventListener("keypress", triggerAddComment);
commentAddBtn.addEventListener("click", triggerAddComment);