[FE 취업 생존 키트] 2주차 세션

시맨틱 HTML

검색엔진이 사이트를 이해할 때나 앱의 구조를 설계할 때 도움이 된다.

• header : 최상단에 위치하며 heading, navigation bar 등을 포함한다.
• nav : 링크 이동 태그를 묶는다.
• main : 메인 컨텐츠를 감싸는 태그
• section : 하나의 주제, 주로 Heading을 포함하고 grouping 할 수 있는 영역을 감싸는 태그
• article : 독립적인 컴포넌트로 분리될 수 있는 영역
• figure : 이미지 감싸는 태그
• figcaption : 이미지의 캡션
• footer : 문서 최하단에 위치한다.
• aside : sideBar나 Modal 같은 메인 컨텐츠와 관련없는 내용

Event 등록 방법

• html property에 직접 등록 : 하나의 이벤트 리스너만 추가 가능

<button onclick="clickButton()">button</button>

• addEventListener, removeEventListener로 추가 및 삭제 : 여러개의 이벤트 리스너 추가 가능

window.addEventListener("contentmenu", openContentMenu); // 오른쪽 마우스 클릭 이벤트
window.removeEventListener("contextmenu", openContentMenu); // add 했을때와 같은 함수 넣기

• DOM property에 직접 등록 : 하나의 이벤트 리스너만 추가 가능

form.onsubmit = handleSubmit;

Event 객체

• event.type : 이벤트의 타입
• event.target : 실제 이벤트를 발생시긴 DOM
• event.currentTarget : 이벤트 핸들러가 붙어있는 DOM
• event.clientX : 클릭 이벤트의 경우 브라우저에서 click이 발생한 X좌표
• event.clientY : 클릭 이벤트의 경우 브라우저에서 click이 발생한 Y좌표

Event의 흐름

• 캡처링 : document에서 event.target까지 도달하는 흐름
• 타깃도달 : 이벤트가 실제 타깃 요소에 전달되는 단계
• 버블링 : 이벤트가 발생한 DOM 요소에서 최상단의 document까지 도달하는 흐름, 특별한 설정이 없는 경우 브라우저 이벤트는 기본적으로 버블링되면서 실행된다. 이를 이용해 event delegation 형태로 구현가능하다.

Custom Event

CustomEvent 생성자를 사용하여 이벤트를 만들면 이벤트의 추가적인 정보도 전달할 수 있다.

const customEvent = new CustomEvent("hello", { message: "hi" });
customButton.addEventListener("hello", function (e) {
	console.log(e.message);
});
customButton.dispatchEvent(customEvent); // print "hi"

무한 스크롤

특정 DOM이 viewport안에 노출이 되는 시점에 callback을 시켜주는 IntersectionObserver API를 사용하여 무한 스크롤을 구현할 수 있다.

const observer = new IntersectionObserver((entries) => {
	// entries : 관찰하고 있는 target 목록
	entries.forEach(({ isIntersecting }) => {
    		if (!isIntersecting) {
       	    	    return;
        	}
	
        	// 다음 새로운 목록 불러오기
        })
})

// 목록 아래에 loading 컴포넌트를 배치해놓고 viewport안에 들어오면 다음 목록 불러오는 callback이 실행된다.
observer.observe(loading);

Fetch API

• GET

async function getData() {
	const response = await fetch(URL); // response.ok 값으로 성공 여부를 알 수 있다.
    	const json = await response.json();
        return json;
}

• POST

async function saveData() {
	const response = await fetch(URL, {
    		method: "POST",
            headers: {
            	Authorization: "Bearer token",
            },
            body: JSON.stringify({
            	name: "user",
            }),
        });
        const json = await response.json();
}