browserAPI 와 컬렉션 기반 사고
🧐 용어 정리
API
Application Programming Interface
서로 다른 시스템이 서로 소통할 수 있는 방법 또는 창구
DOM
Document Object Model 의 약자
웹 페이지 문서를 구성하는 요소들을 트리(Tree) 구조로 표현한 객체
브라우저에서 HTML 문서를 자바스크립트로 제어할 수 있게 해주는 인터페이스
HTML은 객체다?
NO! HTML은 마크업 문서.
하지만 HTML안 요소들에 접근할 때, 객체를 이용하곤 한다.
- HTML의 손쉬운 접근을 위해 트리 구조로 표현해 둔 객체라고 이해할 수 있겠다.
- HTML을 객체로써 접근할 수 있게끔!
BOM
Browser Object Model 의 약자
문서 이외의 모든 것을 제어하기 위해 제공하는 추가 객체
Event
- 브라우저에서 사용자가 웹 페이지와 상호작용할 때 발생하는 사건
- 다양한 종류의 Event가 있음
- e.g. click, scroll, submit, keydown
- AddEventListener 등
🌐 Web APIs
: 브라우저가 웹 애플리케이션이 다양한 작업을 수행할 수 있도록 제공하는 모든 API를 포괄하는 용어
Web API의 종류
-
DOM APIs (웹페이지 요소조작)
querySelector,getElementById,innerHTML등
-
Network APIs (서버와의 통신)
fetch, WebSocket, WebRTC 등
-
Storage APIs (브라우저 내 데이터 저장 및 관리)
localStorage, sessionStorage 등
-
File APIs (파일 읽기,쓰기)
- FileReader, Blob
-
Graphics APIs (웹상에서 그래픽 처리)
- Canvas (2D/3D Graphic 표현 가능), WebGL
-
Audio/Video APIs (웹상의 오디오, 비디오 제어)
- HTML5 Audio/Video API:
<audio>,<video>
- HTML5 Audio/Video API:
-
Device APIs (기기 상태에 접근)
- 온라인/오프라인 여부 등 device 의 상태 정보 조회
브라우저 / 자바스크립트 엔진에서 미리 구현해 둔 것을 가져다 쓸 수 있다! => API
fetch를 쓰면 네트워크 통신이 되니까, 내부 로직을 모르더라도 그냥 사용할 수 있음. 엔진 문서에서도fetch사용 방법만 알려준다.
➕ 로컬 스토리지
데이터 유실의 문제 발생?!
그럴 때 사용하는 방법.
1. 데이터를 네트워크를 통해 가져온다. (어딘가 저장을 하면서 가져오는 네트워크)
2. 브라우저 내에 저장해 둔다. ---> Storage API ---> localStorage
-
보편적으로 사용하는 게 로컬스토리지(localStorage).
로컬스토리지 3가지 특징
-
문자열 형식으로 데이터가 저장됩니다.
(배열, 객체의 경우 반드시 JSON 문자열화해서 저장해야 합니다.) -
영구적 저장소로 사용자가 삭제하지 않는 새로고침해도 유지됩니다.
-
브라우저 내에 저장되는 것으로 서버요청없이 데이터 사용이 가능합니다.
c.f.
세션 저장소 - 휘발성 저장소
IndexedDB - 컴퓨터 용량 50%까지 사용할 수 있는 대용량 저장소
- IndexedDB 사용 예시 - 넷플릭스/유튜브 등 오프라인 저장 기능
- IndexedDB 대비 훨씬 가벼운 로컬 스토리지 / 세션 스토리지를 주로 사용할 수 있다.
[로컬 스토리지] 주요 메서드:
localStorage.setItem(key, value): 데이터를 저장할 때 사용.localStorage.getItem(key): 저장된 데이터를 불러올 때 사용.localStorage.removeItem(key): 특정 데이터를 삭제할 때 사용.localStorage.clear(): 저장된 모든 데이터를 삭제할 때 사용.
DOM
브라우저 핵심 구조
window는 브라우저의전역 객체- window 전역객체는 모든 브라우저 관련 API 와 상호작용할 수 있는 중앙허브 역할을 한다.
- 전역객체는 JS 코드에서 생략하고 곧바로 속성에 접근이 가능
// window.document --> document
document.getElementById("Element-ID")
// window.localStorage -> localStorage
localStorage.getItem("keyName")
// window.location -> location
location.href = "https://google.com" // 구글 홈화면으로 이동DOM
앞서 정리한 내용.
Document Object Model 의 약자
웹 페이지 문서를 구성하는 요소들을 트리(Tree) 구조로 표현한 객체
브라우저에서 HTML 문서를 자바스크립트로 제어할 수 있게 해주는 인터페이스
트리(Tree) 구조로 표현했다는 걸 아래 사진과 같이 보면 이해하기 쉽다!
🤨 그래서 DOM이 뭐냐?
HTML 문서를 트리 구조로 구조화한 브라우저가 제공하는 객체
그리고 DOM Tree 에서 각각의 DOM 요소를 노드(Node) 라고 부른다.
자바스크립트가 DOM API를 통해 페이지 요소를 조작(CRUD)할 수 있고, DOM은 브라우저가 html 문서를 읽고 나면 생성된다.
DOM API
1️⃣ 문서 탐색 및 선택 - R
GET method
: document.get -> 불러올 수 있는 속성이 지정된 id에만 국한됨
document.getElementById(id)
: 지정된 id 속성을 가진 요소를 반환
document.getElementsByClassName(className)
: 지정된 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환
=> HTML collection (ArrayLike 객체) - 복수형태
배열.style (X? 접근 불가)
document.getElementsByTagName(TagName)
: 지정된 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환
querySelector
: CSS는 보통 tag Name(#) / class(.) / id 등의 선택자를 이용하여 속성에 접근하게 되는데, QuerySelector는 지정되어 있는 어떤 값에 국한되지 않고, 해당 선택자 내 포함하는 모든 요소를 불러오게 된다.
document.querySelector(selector)
: 일치하는 첫 번째 요소 반환
document.querySelectorAll(selector)
: 일치하는 모든 요소를 NodeList로 반환
2️⃣ 요소 생성 및 조작 - C U D
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.removeAttribute(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)
: 요소에서 이벤트 리스너를 제거
주솟값 기준으로, 해당 주소를 가지고 있는 함수를 지워준다.
이벤트 핸들러 어트리뷰트 방식
:HTML 내에서 요소의 속성에 직접 이벤트 핸들러를 적용
이벤트 핸들러 프로퍼티 방식
: 요소의 이벤트핸들러 속성에 함수를 할당
💭 컬렉션 기반으로 사고하기
컬렉션이란?
- 컬렉션(Collection): 여러 값을 묶어서 관리하는 자료구조의 총칭
e.g. 배열(Array), 객체(Object), NodeList, HTMLCollection 등
컬렉션 기반의 사고
→ 어떤 로직을 짤 때, 데이터(컬렉션)의 흐름과 컬렉션에 적용할 연산(반복, 변환, 검색 등)을 중심으로 사고하는 것.
- 컬렉션의 요소를 순회(iteration)하여 필요한 작업을 반복
- 요소들을 필터링(filtering)하거나 추출(mapping)하여 원하는 결과를 도출
- 다양한 내장 메서드(예:Array.prototype.map,filter,reduce,forEach등)를 활용
