[Javascript] 3회차 이론 수업

3회차 수업 중 헷갈리는 내용이 좀 있어 복습 겸 TIL로 정리해보려 한다.

Web APIs

브라우저가 웹 애플리케이션이 다양한 작업을 수행할 수 있도록 제공하는 모든 API를 포괄하는 용어이다.
종류는 다음과 같다.

• DOM APIs (웹페이지 요소 조작)
  - querySelector, getElementById, innerHTML 등
• Network APIs (서버와의 통신)
  - fetch, WebSocket, WebRTC 등
• Storage APIs (브라우저 내 데이터 저장 및 관리)
  - localStorage, sessionStorage 등
• File APIs (파일 읽기, 쓰기)
  - FileReader, Blob
• Graphics APIs (웹상에서 그래픽 처리)
  - Canvas, WebGL
• Audio/Video APIs (웹상의 오디오, 비디오 제어)
  - HTML5 Audio/Video API: <audio>, <video>
• Divice APIs (기기 상태에 접근)
  - 온라인/오프라인 여부 등 device의 상태 정보 조회

---

로컬스토리지 (localStorage)

브라우저(client)에 영구적으로 데이터를 저장할 수 있는 저장소 중 하나
특징은 다음과 같다.

1. 문자열 형식으로 데이터가 저장된다.
   -> 배열, 객체의 경우 반드시 JSON 문자열화해서 저장해야 한다.
2. 영구적 저장소로 사용자가 삭제하지 않는 한 새로고침해도 유지된다.
3. 브라우저 내에 저장되는 것으로 서버요청 없이 데이터 사용이 가능하다.

주요 메서드:

1. localStorage.setItem(key, value) : 데이터를 저장할 때 사용
2. localStorage.getItem(key) : 저장된 데이터를 불러올 때 사용
3. localStorage.removeItem(key) : 특정 데이터를 삭제할 때 사용
4. localStorage.clear() : 저장된 모든 데이터를 삭제할 때 사용

---

DOM

1. DOM이란?
   -> HTML 문서를 트리 구조로 구조화한 브라우저가 제공하는 객체
   -> DOM Tree에서 각각의 DOM 요소들을 노드(Node)라고 부른다.
2. DOM으로 할 수 있는 것은?
   -> 자바스크립트가 DOM API를 통해 페이지 요소를 조작(CRUD)할 수 있다.
3. DOM의 생성 시점은?
   -> 브라우저가 HTML 문서를 일고 나면 생성된다.

---

주요 DOM API

1. 문서 탐색 및 선택

• document.getElementById(id) : 지정된 id 속성을 가진 요소를 반환
• document.getElementsByClassName(className) : 지정된 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환
• document.getElementsByTagName(tagName) : 지정된 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환
• document.querySelector(selectors) : CSS 선택자를 사용하여 일치하는 첫 번째 요소를 반환
  - 이때 class인 경우 .selectors로 사용하고, id인 경우 #selectors로 사용한다.

2. 요소 생성 및 조작

• document.createElement(tagName) : 지정된 태그 이름의 새로운 요소를 생성
• element.appendChild(child) : 지정된 자식을 요소의 끝에 추가
• element.insertBefore(newNode, referenceNode) : 새로운 노드를 지정된 참조 노드 앞에 삽입
• referenceNode.after(newNode) : 새로운 노드를 지정된 참조 노드 뒤에 삽입
• element.removeChild(child) : 지정된 자식 노드 제거
• element.replaceChild(newChild, oldChild) : 지정된 자식 노드를 다른 노드로 교체

3. 속성 조작

• element.setAttribute(name, value) : 요소에 지정된 속성을 추가하거나 변경
• element.getAttribute(name) : 요소에서 지정된 속성 값을 반환
• element.remeveAttribute(name) : 요소에서 지정된 속성 제거
• element.classList.add(class-name) : 요소에 클래스명을 추가
• element.classList.remove(class-name) : 요소에 클래스명을 삭제
• element.classList.toggle(class-name) : 요소에 클래스명이 있으면 삭제, 없으면 추가

4. 스타일 조작

• element.style.propertyName = value : 요소의 인라인 스타일 속성 설정

5. 이벤트 처리

• element.addEventListener (type, listener) : 요소에 이벤트 리스너 추가
• element.removeEventListener (type, listener) : 요소에서 이벤트 리스너 제거