프론트엔드/JS 공부13 스토리지(Storage) 최종 수정 : 2024-05-01세션 스토리지와 로컬 스토리지사이트마다 클라이언트에서만 사용하고 싶은 데이터를 저장해 놓고 싶을 때 사용한다. 세션 스토리지(Session Storage)현재 탭에서만 유요한 저장소이다.탭을 닫으면 데이터가 사라진다.다른 탭과 데이터는 공유되지 않는다.// 값을 저장const data = inputElement.value;sessionStorage.setItem('draft', data);// 값을 참조하여 사용const draftData = sessionStorage.getItem('draft');// 값 지우기sessionStorage.removeItem('draft');로컬 스토리지(Local Storage)해당 사이트에서 유요한 저장소이다.탭을 닫거나 브라우저를 닫.. 2024. 5. 1. 쿠키(Cookie) 최종 수정 : 2024-05-01쿠키서버로부터 리스폰스로 쿠기를 받으면, 클라이언트에서는 별도로 작업을 해주지 않아도 알아서 웹 브라우저가 알아서 저장하고 리퀘스트를 보낼 때도 알아서 보낸다.자바스크립트를 통해 쿠키 값을 추가, 수정, 참조할 수 있다.수명을 지정할 수 있다. 수명이 다한 쿠키는 알아서 삭제된다.사용 방법서버에서 리스폰스할 때서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장해 둔다.Set-Cookie: session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=2592000;session-id : 쿠키의 key1234 : 값domain, path, sa.. 2024. 5. 1. 객체 - 배열 - 문자열의 상관 관계 최종 수정 : 2024-04-26객체 - 배열 - 문자열의 상관 관계객체 - 배열(유사 객체) - 문자열(유사 배열) 객체는 키와 값으로 구성된 프로퍼티들의 집합이다. 대괄호 표기법과 점 표기법을 통해, 프로퍼티에 접근할 수 있으며 프로퍼티를 조작하거나 생성할 수 있다. 자바스크립트의 함수는 일급 객체로 값으로써, 프로퍼티 값으로 사용할 수 있다. 이를, 메서드라고 하며, 객체에 종속된 함수라고 이해하면 된다. 배열은 엄밀히 말하면, 객체이다. 단지, 특수한 목적으로 설계된 객체일 뿐이다. 객체와 달리, 요소에 접근할 때는 대괄호 표기법을 통해서만 가능하다. 배열도 일종의 객체라서 참조값의 특징처럼 요소의 값을 조작할 수 있다. 그러나 객체와 다른 점은, 순서가 보장이 되고 길이를 나타내는 length .. 2024. 4. 26. HTTP 메서드(method)에 대한 정리 최종 수정 : 2024-04-06필요한 지식HTTP / Ajax / XMLHttpRequest / JSON / REST API1. HTTP 메서드클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법이다. 이들을 사용하여 CRUD를 구현한다.요청 메서드종류목적페이로드GETindex / retrieve모든 / 특정 리소스 취득XPOSTcreate리소스 생성OPUTreplace리소스 갱신OPATCHmodify리소스 일부 수정ODELETEdelete모든 / 특정 리소스 삭제X2. 용어 설명페이로드'옵션 객체'이라고 이해하면 된다.POST, PUT, PATCH에는 then() 메소드 위에 내용이 있는데.. 2024. 4. 6. 이벤트 위임(event delegation)에 대한 정리 최종 수정 : 2024-04-06 연결 지식 이벤트 전파(event propagation) https://young-taek.tistory.com/213 1. 이벤트 위임(event delegation) 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있다. 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용한다. 이벤트 위임을 사용하면 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 장점 1. 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 2. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없어져 코드가.. 2024. 4. 6. 이전 1 2 3 다음
