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 만드는 과정 요약
- ngrok 다운받는다.
- vsc에서 만든 코드를 live server로 연다.
포트 확인 후, 터미널에서~/Downloads/ngrok http 포트번호명령하면 https 로 된 url 받을 수 있음. - https를 PWA builder 사이트에 넣어본다.
PWABuilder ⇢ https://www.pwabuilder.com/
처음엔 이렇게 떴다. 적합도 0점.
나머지 채워야 할 항목들을 더 채우고, 파일을 다운로드 받는다. - 다운로드 된 파일에서 manifest.json, pwabuilder-sw.js, images(내가 업로드한 아이콘)를 vsc 코드 파일로 가져온다.
- 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>- pwabilder-sw.js 파일에서 offlineFallbackPage 파일명을 수정한다. 그리고 offline 일 경우 보여줄 페이지 html 파일 만들면 됨!
- PWA builder 사이트로 다시 가서, "Test Updated App" 버튼을 누른다.
4. 느낀점
- PWA 만드는 법을 보면서, 우와 이렇게 쉽다니..! 했는데, 요구사항을 다 적었는데도 manifest 점수가 높아지질 않는다... url을 다시 받는 것부터 몇 번을 시도했는데 뭐가 잘못된 건지 알 수 없었다. 방법을 찾고 싶다.
- 다음 날 다시 시도했고, 성공했다. 파일 복사 위치가 잘못됐었나 싶다. PWA url을 얻었다. https://eb9983b36239.ngrok.io/
기본적으로 넣어야 할 것을 넣었고, 일정 점수를 받아서 생성에는 성공했지만, 정말 유저들에게 필요한 것이 무엇인지, 어떻게 UI를 구현해야 할 지, 본질을 놓치면 안된다는 것을 잊지 말자!
좋은 개발자, 좋은 사람