filter 함수로 minishop 구현하기 (2)

kgorae·2021년 8월 2일
0

스몰 프로젝트

목록 보기
2/8
post-thumbnail

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

  • visibility:hidden, display:none 은 화면에 보여지지 않는 것에서는 같지만, render tree 상에서는 다르다.
  • visibility:hidden 은 RenderTree 에는 있지만, 보여지지 않는 것.
    paint, composition이 일어나지만 layout은 일어나지 않는다.
  • display:none 은 RenderTree 에도 없는 것
    paint, composition, layout이 모두 일어난다. 결국 visibility 가 더 나은 성능을 보장한다.

(3) 랜더링 순서

참고) https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path

DOM -> CSSOM -> RenderTree -> layout
1. DOM 트리로 변환
html 파일을 분석하여 만들어짐. js에 의해 DOM이 변경될 수 있다.
2. CSSOM 구축
DOM을 스타일링하기 위한 모든 CSS 정보 포함시킴.
3. RenderTree 생성
DOM과 CSS를 결합하여 사용자에게 보여지는 콘텐츠를 RenderTree로 만듦.
4. layout : 크기 계산하여 레이아웃 짜는 단계
5. paint : 포토샵으로 생각하면, 레이어를 나누는 단계
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 만드는 과정 요약

  1. ngrok 다운받는다.
  2. vsc에서 만든 코드를 live server로 연다.
    포트 확인 후, 터미널에서 ~/Downloads/ngrok http 포트번호 명령하면 https 로 된 url 받을 수 있음.
  3. https를 PWA builder 사이트에 넣어본다.
    PWABuilder ⇢ https://www.pwabuilder.com/
    처음엔 이렇게 떴다. 적합도 0점.

    나머지 채워야 할 항목들을 더 채우고, 파일을 다운로드 받는다.
  4. 다운로드 된 파일에서 manifest.json, pwabuilder-sw.js, images(내가 업로드한 아이콘)를 vsc 코드 파일로 가져온다.
  5. manifest, service worker가 동작하도록 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>
  1. pwabilder-sw.js 파일에서 offlineFallbackPage 파일명을 수정한다. 그리고 offline 일 경우 보여줄 페이지 html 파일 만들면 됨!
  2. PWA builder 사이트로 다시 가서, "Test Updated App" 버튼을 누른다.

4. 느낀점

  • PWA 만드는 법을 보면서, 우와 이렇게 쉽다니..! 했는데, 요구사항을 다 적었는데도 manifest 점수가 높아지질 않는다... url을 다시 받는 것부터 몇 번을 시도했는데 뭐가 잘못된 건지 알 수 없었다. 방법을 찾고 싶다.
  • 다음 날 다시 시도했고, 성공했다. 파일 복사 위치가 잘못됐었나 싶다. PWA url을 얻었다. https://eb9983b36239.ngrok.io/

    기본적으로 넣어야 할 것을 넣었고, 일정 점수를 받아서 생성에는 성공했지만, 정말 유저들에게 필요한 것이 무엇인지, 어떻게 UI를 구현해야 할 지, 본질을 놓치면 안된다는 것을 잊지 말자!

profile
좋은 개발자, 좋은 사람

0개의 댓글