2024.10.19

[ 용어 설명 ]

- API

• 서로 다른 시스템이 서로 소통할 수 있는 방법 또는 창구
• 일종의 메뉴판 역할

- DOM

• 웹 페이지 문서를 구성하는 요소들을 트리구조로 표현한 객체
• 브라우저에서 HTML 문서를 자바스크립트로 제어할 수 있게 해주는 인터페이스

- BOM

• 문서 이외의 모든 것을 제어하기 위해 제공하는 추가 객체

- EVENT

• 브라우저에서 사용자가 웹 페이지와 상호작용할 때 발생하는 사건
• 다양한 종류의 Event가 있음 
• ex) click,scroll,submit,keydown 등

• 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>
    • Device APIs (기기 상태에 접근)
      • 온라인/오프라인 여부 등 device 의 상태 정보 조회

로컬스토리지 (localStorage)

: 브라우저(client)에 영구적으로 데이터를 저장할 수 있는 저장소 중 하나

• 로컬스토리지 3가지 특징

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

주요 메서드:

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

• 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

1. DOM 정의를 보다 명확하게 해보면?→ DOM Tree 에서 각각의 DOM 요소를 노드(Node) 라고 부릅니다.
2. → HTML 문서를 트리 구조로 구조화한 브라우저가 제공하는 객체
3. DOM 으로 무엇을 할 수 있나요?
4. → 자바스크립트가 DOM API를 통해 페이지 요소를 조작 (CRUD)할 수 있습니다.
5. DOM 은 언제 생성되나요?
6. → 브라우저가 html 문서를 읽고 나면 생성됩니다.