Web Storage API
key : value
키:값 쌍으로 값을 저장
쿠키와는 별개로 클라이언트(웹 브라우저)에 저장되는 키/밸류 형태의 데이터
- 키/밸류는 문자열 데이터만 가능하다.
SessionStorage
브라우저 탭을 닫으면 자동으로 지워지는 데이터
각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안
- 브라우저가 열려있는 동안 제공
- 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때 까지만 데이터를 저장
- 쿠키는 최대 4kb까지 저장 가능, localStorage는 5mb까지 사용가능
- 데이터를 절대 서버로 전송하지 않음
- 저장 공간이 cookie 보다 큼 (최대 5MB)
쿠키와의 차이
쿠키는 HTTP 헤더에 담겨 서버와 통신하는데 사용되는 데이터
WebStorage는 클라이언트 측에서만 저장하는 데이터
쿠키보다 큰 데이터를 저장할 수 있다.
localStorage
영구적으로 저장할 수 있는 데이터
브라우저를 닫았다 열어도 데이터가 남아있음
- 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시
또는 로컬 저장 데이터를 지워야만 사라짐 - 저장공간이 cookie, session과 비교했을 때 가장 큼
Storage
속성(property)
- length : 객체에 저장된 데이터 항목의 수를 반환
메서드(method) - key(index) : index번째의 키를 반환
- getItem(key) : key에 해당하는 값 반환
- setItem(key,value) : key가 존재하는 경우 재설정, 존재하지 않는 경우 value 추가
- removeItem(key) : key를 저장소에서 제거
- clear() : 모든 키를 저장소에서 제거
AJAX(Asynchronous JavaScript and XML)
- 서버와 통신을 하기 위해서 XMLHttpRequest 객체를 활용
- JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음
- 페이지 전체를 '새로 고침' 하지 않고서도 수행 되는 "비동기성"(일 부분만 업데이트 가능)
동작방식
- 동기(synchronous)
- 서버에 요청한 데이터가 도착할 때까지 클라이언트는 대기
- 비동기(asynchronous)
- 서버에 요청한 데이터가 도착할 동안 클라이언트는 멈추지 않고 동작
순차적인 비동기 처리하기
Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요(실행 순서 불명확)
- Async Callbacks
- 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정
- ex) addEventListener()의 두번째 인자
- Promise-Style
- Modern Web APIs에서의 새로운 코드 스타일
- XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전
XMLHttpRequest 객체
- AJAX 요청을 생성하는 JavaScript API
- 서버와 상호작용하기 위해 사용
- 전체 페이지의 새로 고침 없이도 URL로부터 데이터를 받아올 수 있음
- 사용자의 작업을 방햏지 않고 페이지의 일부를 업데이트 할 수 있음
- AJAX 프로그래밍에 주로 사용
- XML이라는 이름과는 달리 모든 종류의 데이터를 받아오는데 사용가능
- http이외에 프로토콜도 지원(file, ftp 포함)
- 대부분의 브라우저에서 지원
Event
- (특히 중요한) 사건[일]
- 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생
- 마우스를 이용했을 때, 키보드를 눌렀을 때 등 많은 이벤트가 존재
- JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하고 대응하는 작업을 수행할 수 있음
Event의 종류
- Keyboard : keyup(키를 뗐을 때), keydown(키를 눌렀을 때), keypress(키를 쭉 눌렀을 때)
- Mouse : click, mousemove, mouseup, mousedown, mouseenter, mouseleave
- Loading : load, unload
- Form : input, change, blur, focur, submit
Event 객체(Object)
- 네트워크 활동이나 사용자와의 상호작용 같은 사건(Action) | 발생(Occurrence)의 발생을 알리기 위한 객체
- Event 발생
- 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생 가능
- 특정 메서드를 호출하여 프로그래밍적으로 표현 가능
Event 처리|통신
- DOM 요소는
- Event를 "수신"할 수 있음
- Event를 "처리"할 수 있음
- Event는 주로 addEventListener()를 사용함
- TYPO 주의!
- 다양한 HTML 요소에 이벤트 처리기(Event Handler)를 "붙여서" 처리함
Event 처리 방식의 이해
- 고전 이벤트 처리 방식 : attribute / property 방식으로 등록
- 표준 이벤트 처리 방식 : addEventListener() 메서드 이용
- addEventListener()
- Event 추가
- EventTarget.addEventListener(type, listener[, option])
- preventDefault()
- 현재 Event이 기본 동작을 중단|취소
- HTML 요소의 기본 동작을 작동하지 않게 함
- addEventListener()
Event - addEventListener()
특정 이벤트에 특정 이벤트가 발생하면, 할 일을 등록하자
EventTarget.addEventListener(Type, Listener)-
EventTarger
- 특정 이벤트가 목표물에 전달될 때마다 호출할 함수를 설정
- Event를 지원하는 모든 객체(Element, Document, Window)를 EventTarget 으로 지정가능
-
Type
- 반응할 Event 유형을 나타내는 대소문자 구분 문자열
- e.g. input, click, submit
-
Listener
- 지정된 타입의 Event를 수신할 객체
- 자바스크립트 함수 객체(콜백 함수)이어야만 함
- 콜백 함수는 발생한 Event의 데이터를 가진 Event객체를 유일한 매개변수로 받음
특정 이벤트의 기본 동작을 중단
EventTarget.preventDefault()
귀요미 개발자