본문 바로가기

front/javascript5

[JavaScript] 로컬 스토리지(Local Stroage), 세션 스토리지(Session Stroage), 쿠키(Cookie) 로컬 스토리지(Local Stroage), 세션 스토리지(Session Stroage), 쿠키(Cookie)는 모두 웹 브라우저에서 데이터를 저장하는 데 사용되는 브라우저 저장소이다. 이들은 모두 클라이언트 측에서 데이터를 저장하고 관리할 수 있으며, 서버와의 통신 없이도 정보를 보존할 수 있다.  각각의 목적과 사용 방법을 알아보자 1. 로컬 스토리지 (Local Storage) 로컬 스토리지는 영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다.주로 영구적인 사용자 환경 설정, 로그인 정보 등을 저장하는 데 사용된다.사용자가 명시적으로 삭제하지 않는 한 데이터는 계속 유지된다.일반적으로 5MB ~ 10MB의 용량을 가지고 있다. (도메인 당)// 데이터 저장localStorage.se.. front/javascript 2024. 5. 9.
[JS] 이벤트 전파 - 버블링 & 캡처링 웹 개발에서 이벤트 전파는 매우 중요한 개념입니다. 이벤트 전파란, 하나의 이벤트에 대해 여러 개의 엘리먼트가 반응하는 과정을 말합니다. 이벤트 전파 방식으로는 버블링과 캡처링이 있습니다. 이벤트 버블링 버블링은 이벤트가 발생한 엘리먼트에서 시작하여 상위 엘리먼트들로 전파되는 방식입니다. 즉, 이벤트가 발생한 엘리먼트에서 시작하여 부모 엘리먼트, 그리고 조부모 엘리먼트로 전파됩니다. 이벤트 전파가 완료되면 마지막으로 document 객체까지 전파됩니다. 이벤트 캡처링 캡처링은 버블링과는 반대로, 이벤트가 발생한 엘리먼트에서부터 하위 엘리먼트들로 전파되는 방식입니다. 즉, 이벤트가 발생한 엘리먼트에서 시작하여 자식 엘리먼트, 그리고 손자 엘리먼트로 전파됩니다. 이벤트 전파가 완료되면 마지막으로 docume.. front/javascript 2023. 3. 16.
[JS] 프로토타입(Prototype)이란? 자바스크립트에서 객체를 생성할 때, 다른 언어들과는 다른 방식으로 프로토타입을 이용합니다. 이러한 방식을 "프로토타입 기반 언어"라고 합니다. 객체 생성 방법 자바스크립트에서 객체를 생성할 때는 클래스를 정의하지 않습니다. 대신 생성자 함수를 이용하여 객체를 생성합니다. 예를 들어, 아래와 같은 Person 생성자 함수를 정의할 수 있습니다. function Person(name, age) { this.name = name; this.age = age; } 위 코드에서 Person은 객체를 생성하는 "생성자 함수"입니다. 생성자 함수를 이용하여 객체를 생성할 때는 "new" 키워드를 사용합니다. const person1 = new Person('John', 30); const person2 = new P.. front/javascript 2023. 3. 14.
[JavaScript] 자바스크립트 문자를 숫자로 (아스키코드) 자바스크립트에서 문자 --> 숫자 || 숫자 --> 문자로 바꾸는 방법 숫자 >>> 문자 (아스키코드) 문자 >>> 숫자 front/javascript 2023. 2. 4.
[JavaScript] DOM 다루기 JavaScript에서 DOM을 다뤄보자 DOM이란? DOM을 풀어서 약자로 써보면 Document Object Model의 약자입니다. Document는 문서이고 Object는 객체로 번역이 됩니다. Model은 말그대로 모델로 많이씁니다. 즉 번역하면 문서 객체 모델이라고 할 수 있는데 이렇게 보면 이해가 잘 가지 않습니다. 그럼 문서 객체란 것이 도대체 무엇일까요?? 문서 객체란 이나 같은 html 문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다. 예를 들어서 보겠습니다. 다음과 같이 id가 'target'인 태그가 있습니다. 가장 위쪽에 타겟이 이에 해당되는 부분이고 이 부분을 JavaScript에서 사용할 수 있는 객체로 가져와보겠습.. front/javascript 2023. 1. 18.
반응형

티스토리툴바