반응형 WEB/JavaScript60 [JS] Storage 로컬 스토리지 vs. 세션 스토리지 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다. 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 .. 2023. 10. 29. [JS] 쿠키 Cookie란? Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다. 어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가? 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. 쿠키를 알아보기 전, 쿠키가 저장되는 방식은 key : value 방식임을 기억해두자. ex) username = 홍길동 브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. 쿠키와 세션의 차.. 2023. 10. 29. [JS] 콘솔 [콘솔 실행방법] 1. 크롬에서 ‘F12’ 누릅니다. 2. 새로 열린 창 상단 패널에서 ‘console’을 누릅니다. [자주 사용하는 콘솔 명령어] 1. console.log() : 제일 많이 사용하는 메서드. printf와 같은 기능이다. 2. console.dir() : parameter로 object를 받으며, 해당 object의 속성과 값들을 확인하기 위해 사용 3. console.count() : 특정 변수에 대한 함수가 몇번 호출이 되는지 카운트하는 메서드 4. console.trace() : 어느 함수를 실행했는지 내역도 함께 출력하기 때문에 디버깅시 유용하다. 5. console.assert() : parameter로 두개의 값을 받는다. 첫번째는 조건식, 두번째는 출력할 문자 또는 obj.. 2023. 10. 29. [js] 버블링과 캡처링 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 캡처링 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다. 1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 event.stopPropagation() : 버블링 및 캡처링 중단할 때 사용하는 함수 Ex) 클릭해 주세요. 2023. 10. 28. 이전 1 2 3 4 5 6 ··· 15 다음 반응형