filter関数を使用してminishop(2)を実現する

0.リンク

https://kimmsoll.github.io/minishop-js/

1.コードの修正

1.委任イベントによる変更

// button들의 부모인 nav에 eventListener를 등록한다.
const buttons = document.querySelector("nav");

const setEventListener = (items) => {
    // 로고 누르면 모든 옷 출력
    logo.addEventListener("click", (event) => {displayItems(items)});
    // 버튼에 맞게 필터링 되어 출력
    buttons.addEventListener("click", (event) => {
        displayItems(items.filter((item) => item[event.target.dataset.key] === event.target.dataset.value));
    })
};

2.重複を解消するための変数を作成し、ボタンの空白以外の条件を追加し、onClick関数を個別に作成する

const onClick = (event, items) => {
    const dataset = event.target.dataset;
    const key = dataset.key;
    const value = dataset.value;
    if(key === undefined || value === undefined){
        event.preventDefault();
    } else {
        displayItems(items.filter((item) => item[key] === value));
    }
}

const setEventListener = (items) => {
    logo.addEventListener("click", () => displayItems(items));
    buttons.addEventListener("click", (event) => onClick(event, items));
};

2.学習内容

(1)委任イベント

親コンテナは、子要素でイベントが発生したときに聞こえます.

ulのliが100個である場合、すべてのliにeventListenerを登録するよりも、ulにeventListenerを登録する方が効率的である.

addEventListenerのパラメータ

addEventListenerでパラメータを渡す場合は、匿名関数を使用する必要があります.

// item 전달 예시
const onClick = (item) => console.log(item);
buttons.addEventListener("click", () => onClick(item));
// item, event 전달 예시
const onClick = (event, item) => console.log(item[event.target.dataset.key]);
buttons.addEventListener("click", (event) => onClick(event, item));

(2) visibility / display

可視性:hidden,display:noneは画面に表示されない場合と同じですが、レンダリングツリーでは異なります.

可視性:RenderTreeに非表示ですが、表示されません.
paintでは、コンポーネントは生成されますが、レイアウトは生成されません.

display:noneはRenderTreeにも存在しません
paint,composition,layoutが発生します.最終的には、より良い可視性が保証されます.

（3）マウント順

注)https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path
DOM -> CSSOM -> RenderTree -> layout
1.DOMツリーに変換
htmlファイルを分析して作成します.DOMはjsによって変更される可能性があります.
2.CSSOMの実施
造形DOM用のすべてのCSS情報を含む.
3.RenderTreeの作成
DOMとCSSを組み合わせて、ユーザーが見たコンテンツをRenderTreeとして作成します.
4.layout:寸法を計算してレイアウトを整理するには
5.paint:PSを考慮してレイヤーを分割するには
6.composition:レイヤー順にブラウザに表示するには

3. PWA

注)https://www.youtube.com/watch?v=FEBkne7Nyu4
https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md

PWAの作成手順の概要

ngrokをダウンロードします.

vscで作成したコードをLive Serverとして開きます.
ポートを検証すると、端末は~/Downloads/ngrok http 포트번호コマンドでhttpsのurlを受信することができる.

httpsをPWAビルダーサイトに入れます.
PWABuilder ⇢ https://www.pwabuilder.com/
最初はそうだった適合度0点

残りの入力が必要な項目を入力し、ファイルをダウンロードします.

からダウンロードしたファイルのリスト.json, pwabuilder-sw.jsは、vscコードファイルに画像(私がアップロードしたアイコン)をインポートします.

manifestは、vsc htmlファイルにコードを書き込み、サービス担当者が操作できるようにします.

<link rel="manifest" href="manifest.json" />
// head 마지막에 삽입  
<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>

pwabilder-sw.jsファイルでofflineFallback Pageファイル名を変更します.オフラインで表示するページhtmlファイルを作成すればいい!

PWAビルダーのWebサイトに戻り、「アプリケーションのテスト更新」ボタンをクリックします.

4.感じ

PWAの作り方を見ていると、わあ、こんなに簡単なのか…!やった、要求事項は全部書いたのに、manifest点数は上がらなかった...urlを再び受け取ってから、何度も試してもどこが間違っているのか分かりません.何とかしたい.

日目に再試行し、成功した.ファイルのコピー先でエラーが発生した可能性があります.PWA URLを入手しました.https://eb9983b36239.ngrok.io/
基本的に加入すべきものを加え、一定の点数を得て生成に成功しましたが、本当のユーザーが何を必要としているのか、UIをどのように実現するか、本質は見逃せません!