July 31, 2021
keypress나 keydown, keyup 이벤트를 만들어 enter 키에 대한 처리를 하지 않고
form에 대한 기본적인 형식이 다 갖춰져 있지 않더라도
submit 이벤트는 기본적으로 enter와 바인딩이 되기 때문에 onsubmit 이벤트를 쓰는게 더 좋다.
또한, 체크박스 만들때 input 과 label 을 id-for 로 서로 연결하여 만들면 더 코드를 간단히 작성할 수 있다.
<input type="checkbox" id="label-input-1" />
<label for="label-input-1">label</label>
Sementic HTML을 사용해야 하는 이유
예를 들어, div 태그를 사용하여 id로 container, nav, footer 등을 명시해 넣는것보다 만들어져 있는 sementic tag를 활용하는게 더 좋다.
<header>
Header
<nav></nav>
</header>
<main>
<section>
<img />
</section>
</main>
브라우저에서 이벤트는 특정 액션이 일어났다는 의미
이벤트의 종류
출처 : 버블링과 캡처링
내부에 하나의 돔에 이벤트를 연결할 수 있는 방법을 이벤트 위임
<nav onclick="menuClick(event)">FORM
<ul>
<li>
<a>MENU 1</a>
</li>
<li>
<a>MENU 2</a>
</li>
<li>
<a>MENU 3</a>
</li>
</ul>
</nav>
이제는 page 클릭으로 pagination 을 하기보다는 infinite scroll pagination 으로 하는 방법이 추세
intersectionObserver API를 사용해서 Infinite Scroll Pagination을 구현할 수 있다.
intersectionObserver는 특정 DOM이 viewport안에 노출이 되기 시작하는 시점에 callback을 실행히셔주는 Web API.
Web API fetch를 사용하는 방법을 알아보기 전에 REST API에서 주로 사용되는 HTTP Method들을 알아볼 필요가 있다.
주요 HTTP Method 종류 (For REST API, CRUD)