[0430] TIL

오늘은 영화 검색 사이트 과제 해설 영상과 튜터님이 해주신 내 과제에 대한 피드백을 바탕으로 리팩토링과 버그픽스를 진행하였다.

짜잘한 커밋부터 대공사까지 다양한 커밋들 허허허

강의를 들으며 알게된 것들이 좀 있어서 정리해보자~!

---

1. grid의 반응형 구현

나는 media-query를 이용하여 여러 줄로 반응형으로 구현했었는데, auto-fill을 이용한 아래 코드 딱 한 줄이면 반응형으로 구현할 수 있었다!

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

2. reset.css

reset.css는 모든 브라우저에서 일관된 기본 스타일을 적용할 수 있도록 한다.

매번 요소들에 기본값으로 적용된 margin 같은 속성들 때문에 불편했는데, 그것을 해결할 수 있는 css 코드가 이미 있었군...!!

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

모듈

<script type="module" src="./src/index.js"></script>

다음과 같이 script에 type='module'이라는 속성을 추가하면 모듈로 사용할 수 있다.

모듈을 사용하는 이유는 관심사의 분리이다.
관심사를 분리하면 재사용성, 유지보수성, 깃 협업능률 향상의 장점을 얻을 수 있다.

또한 모듈은 다음과 같은 편리한 특성을 지닌다.

• 모듈 별로 독립적인 scope 생성 : movie.js 와 search.js 에서 동일한 이름의 변수를 사용해도 관계 없음
• 스크립트 지연 실행 기본 내장 <script defer>
  
• Strict Mode 기본 내장

"use strict"

// 변수 선언없이 즉시 사용 방지
a = 10;
console.log(a); // Uncaught ReferenceError: a is not defined

// 예약어를 변수명으로 사용 방지
let arguments; // Invalid use of 'arguments' in strict mode.

css 테마 색상 관리

css에서도 변수를 사용할 수 있었군..

/* 주로 테마 색상들은 변수로 관리 */
:root {
  --bg-header-color: #ffe194;
  --bg-card-color: bisque;
}

header {
  background-color: var(--bg-header-color);
}

이벤트 위임

자식 요소의 이벤트를 부모 요소에서 처리할 수 있도록 위임하는 것

이벤트 전파 흐름

• eventPhase (1) 캡처링 단계
• eventPhase (2) 타겟 단계
• eventPhase (3) 버블링 단계

document.querySelector('#pink').addEventListener('click', (e) => {
  console.log('pink clicked', e.eventPhase);
});

document.querySelector('#green').addEventListener('click', (e) => {
  console.log('green clicked', e.eventPhase);
});

document.querySelector('#blue').addEventListener('click', (e) => {
  console.log('blue clicked', e.eventPhase);
});

파란색을 눌렀을 때, 부모 요소까지 이벤트가 전파된다. (이벤트 버블링)

분홍색	초록색	파란색
pink clicked 2	green clicked 2 pink clicked 3	blue clicked 2 green clicked 3 pink clicked 3

---

캡처링 단계에서 리스너를 실행시키고 싶다면 addEventListener의 3번째 인자로 true를 넣어주면 된다.

document.querySelector('#pink').addEventListener(
  'click',
  (e) => {
    console.log('pink clicked', e.eventPhase);
  },
  true
);

분홍색	초록색	파란색
pink clicked 2	pink clicked 1 green clicked 2	pink clicked 1 blue clicked 2 green clicked 3