Computer/JavaScript15 Web Storage Web Storage란? : 서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소. 로컬 스토리지와 세션 스토리지를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능. Local Storage란? : 만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소. 저장된 데이터는 브라우저를 종료하거나 컴퓨터를 재시작해도 유지 & 사용자가 웹 애플리케이션을 떠났다가 나중에 돌아올 때 유용한 데이터를 저장할 때 유용. 도메인이 다른 경우에는 로컬 스토리지 공유가 불가능. 로컬 스토리지에 저장된 데이터는 JavaScript를 사용하여 접근하고 수정 가능. Session Storage란? : 브라우저의 탭 안에 유효한 저장소이며, 브라.. 2024. 1. 19. DOM DOM(Document Object Model)이란? : 문서 객체 모델. XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스로, HTML 요소를 자바 스크립트 오브젝트처럼 조작할 수 있다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM을 사용하는 하는 이유? 자바스크립트를 통해 HTML에서 데이터를 가져오고 싶을 때 웹 페이지 데이터를 동적으로 변경하고 싶을 때 ineractive 한 웹 애플리케이션(Web App)을 만들고 싶을 때 DOM의 종류 W3C DOM 표준은 세 가지 모델로 구분. Core DOM : 모든 문.. 2024. 1. 16. 시맨틱 태그 시맨틱 태그(Semantic Tag)란? : 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그. 태그에 의미를 부여함으로서 웹 사이트의 구조를 쉽게 파악할 수 있도록 만들어진 것. 시맨틱 태그의 종류 : 내용을 감싸는 Box와 내용에 해당하는 Item으로 분리할 수 있다. ex) header(페이지의 제목), nav(메뉴, 목차), section(제목), aside(사이드바, 콜아웃 상자), main(내용), article(게시글), footer(작성자 정보) … 시맨틱 태그의 장점 접근성 향상 검색엔진 최적화 가독성 향상 2024. 1. 15. State(상태) - 사람에 빗대어 설명해보자 ex) 3개의 허기 상태(배고픔, 적당함, 배부름)에 따라 각각 다른 행동 취한다 즉, 계속해서 변화하는 특정 상태로 상태에 따라 각각 다른 동작을 하는 것 - 버튼 클릭을 하면 숫자가 올라가는 것을 만들어보자 ex) Counter.js import React, { useState } from “react”; const Counter = () =>{ console.log(“counter 호출!”); const [count, setCount] = useState(0); const onIncrease () =>{ setCount(count + 1); }; const onDecrease () =>{ setCount(count - 1); }; return ( {count} + - ).. 2023. 12. 5. 이전 1 2 3 4 다음