📅 2025-09-22

➡️ JavaScript WebAPIs에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓

---

🔎 학습 리마인드

📌 Web APIs

• 브라우저가 웹앱이 다양한 기능을 제공하는 기능 묶음

• 대표 범주

  • 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: ,
  • Device APIs (기기 상태에 접근)
    • 온라인 여부, 화면 크기 등

💡 로컬 스토리지

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

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

  1. 문자열 형식으로 데이터가 저장됨

     → 배열, 객체의 경우 반드시 JSON 문자열화해서 저장해야 함

  2. 영구적 저장소로 사용자가 삭제하지 않는 이상 새로고침해도 유지됨

  3. 브라우저 내에 저장되는 것으로 서버 요청 없이 데이터 사용이 가능함

• 주요 메서드

  1. localStorage.setItem(key, value): 데이터를 저장할 때 사용

  2. localStorage.getItem(key): 저장된 데이터를 불러올 때 사용

  3. localStorage.removeItem(key): 특정 데이터를 삭제할 때 사용

  4. localStorage.clear(): 저장된 모든 데이터를 삭제할 때 사용

💡 세션 스토리지

• 브라우저가 제공하는 웹 스토리지 중 하나

• 데이터를 세션(탭) 단위로 저장

• 특징

  • 같은 탭에서 새로고침해도 유지
  • 브라우저 탭을 닫으면 데이터가 삭제
  • 데이터를 문자열(String) 형태로 저장

• LocalStorage와 비교

  구분	LocalStorage	SessionStorage
  저장 범위	브라우저 전체	현재 탭 (세션)
  지속 시간	직접 삭제 전까지 영구적	탭을 닫으면 삭제
  공통점	문자열만 저장, key-value 구조

// 데이터 저장
sessionStorage.setItem("username", "홍길동");

// 데이터 불러오기
const user = sessionStorage.getItem("username");
console.log(user); // "홍길동"

// 특정 데이터 삭제
sessionStorage.removeItem("username");

// 전체 삭제
sessionStorage.clear();

💡 브라우저 전역 객체 (Window)

• window는 브라우저 환경의 전역 객체이자, Web API 진입점
• 전역객체는 모든 코드에서 window. 를 생략하고 바로 접근 가능

  // window.document → document
  document.title = "수업 데모";
  
  // window.localStorage → localStorage
  localStorage.getItem("user");
  
  // window.location → location
  location.href = "https://google.com";

💡 웹페이지 렌더링 과정 (면접 단골 주제)

1. 사용자가 주소창에 www.naver.com 입력
2. 브라우저는 DNS 서버에 IP 주소를 요청 → www.naver.com의 실제 IP를 받음
3. 받은 IP를 이용해 네이버 서버에 연결 후 HTML, CSS, JS, 이미지, 폰트 등 리소스를 요청
4. 서버는 해당 파일들을 응답으로 보냄
5. 브라우저는 HTML을 파싱하여 DOM 트리 생성, CSS를 파싱해 CSSOM 트리 생성
6. DOM + CSSOM을 합쳐서 렌더 트리(Render Tree) 를 만듦
7. 렌더 트리를 기반으로 레이아웃 계산(위치·크기) → 페인팅(픽셀로 변환) → 브라우저 화면에 출력

---

🌊 Deep Dive

🤔 브라우저의 indexedDB에 대해 알아보자!

💡 indexedDB란?

• 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나
• 네트워크 상태에 상관 없이 온라인과 오프라인 환경에서 모두 동작할 수 있음
• 대용량 데이터를 안정적으로 처리할 수 있고, 복잡한 쿼리를 지원함
• 비동기 방식
• 데이터 구조
  • DB → Object Store(테이블) → key/value
  • Index를 만들어 효율적 조회 가능
• 사용 사례: 오프라인 앱, 캐시, 로컬 대용량 데이터 등

💡 기본 패턴

1. 데이터베이스 열기
2. 객체 저장소(Object store) 생성
3. 트랜젝션(Transaction)을 시작하고, 데이터를 추가하거나 읽어들이는 등의 데이터베이스 작업 요청
4. DOM 이벤트 리스너를 사용하여 요청이 완료될 때까지 기다리기
5. (요청 객체에서 찾을 수 있는) 결과를 가지고 무언가를 하기 (로직)

---

📎 https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB

---