[FE 스터디] Week #2

지난 세션 복습

1. 선언형 프로그래밍 : What to do에 집중 , 무엇을 할 것인가.
2. 반응형 웹 : 다양한 디바이스에 맞춰 웹사이트의 크기를 자동으로 조절되도록 만든 것.
   -media query : window width에 따라서
   -container query : container width에 따라서 (아직은 사용할 준비는 안됨)
3. 다크모드 : 토글을 이용해서 웹 사이트 컬러를 다르게 나타나도록 함
   -DOM property 활용  (ex. body dataset 태그)
   -두가지 stylesheet 활용

 

---

Lesson 2 . 목차

• Semantic HTML
• 브라우저 이벤트 기초
• Infinite Scroll Pagination
• 브라우저 fetch 기초

---

Semantic HTML

• 의미론적으로 HTML을 작성하기

semantic HTML을 사용해야 하는 이유

1. 검색엔진이 웹사이트 이해할 때에 참고
2. 코드 작성자 입장에서 구조를 생각할 때에 앱의 구조를 설계할때 도움이 됨.

div를 사용하는 것보다 훨씬 코드 작성자 입장에서도 이해하기 편하고, 검색엔진이 이해하기도 편합니다.

---

브라우저 이벤트

• 브라우저에서 이벤트는 특정 액션이 일어났다는 것을 의미

이벤트의 종류

• 마우스 이벤트, 폼 이벤트 , 키보드 이벤트 등

이벤트 등록하는 법

• HTML 속성에 직접 추가
• DOM 속성에 직접 추가
• addEventListener/removeEventListener

이벤트 객체 살펴보기

• target : event를 발생시킨 target
• currentTarget : eventHandler가 붙어있는 DOM
  
  

브라우저 이벤트의 흐름

1. 캡처링 : window에서 event.target까지 도달하는 이벤트의 흐름
2. 타깃도달 : 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링: 이벤트가 발생한 DOM요소 에서 window로 다시 올라가는 흐름

커스텀 이벤트

#1 id가 지정되있는 dom은 winow 객체에서 그냥 접근 가능
#2 브라우저에 존재하는 event도 유저의 action 없이 직접 자바스크립트로 실행 가능(dispatchEvent)
#3 특정 event의 생성자를 사용해야 관련된 property 사용 가능
#4 커스텀 이벤트 만들때 Event 생성자보다 CustomEvent 생성자 사용하는것이 더 명확하고 좋음 (detail 이라는 추가적인 정보 전달 가능)
#5 일반 웹 서비스 만들때에는 customEvent 많이 사용하지 않음

---

Infinite Scroll pagination

-IntersectionObserver는 특정 DOM이 viewport안에 노출이 되기 시작하는 시점에 callback을 실행시켜주는 Web API

https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver

IntersectionObserver - Web API | MDN

---

브라우저 fetch 기초

주요 HTTP Method 종류 (For REST API, CRUD)

1. POST: 데이터를 생성 (Create)
2. PUT: 데이터를 업데이트 (Update)
3. PATCH: 데이터의 일부를 업데이트 (Update)
4. DELETE: 데이터를 삭제 (Delete)
5. GET: 데이터를 가져오기 (Read)
6. OPTIONS: 서버에서 지원하는 method를 확인 (동일 도메인이 아닌 다른 도메인으로 요청을 보낼 경우 OPTIONS을 먼저 보내서 사용한 가능한 method를 미리 browser가 확인한다.)