mobssie

WindowEventHandlers.onpopstate https://developer.mozilla.org/ko/docs/Web/API/WindowEventHandlers/onpopstate window의 popstate 이벤트 핸들러 - 같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다. - 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다. - history.pushState() 또는 history.replaceState()는 popst..

History.pushState() https://developer.mozilla.org/ko/docs/Web/API/History/pushState 브라우저의 세션 기록 스택에 상태를 추가한다. history.pushState(state, title[, url]); state - 새로운 세션 기록 항목에 연결할 상태 객체. - 사용자가 새로운 상태로 이동할 때마다 popstate 이벤트가 발생! 이 때 이벤트 객체의 state 속성에 해당 상태의 복제본이 담겨 있다. - 상태 객체는 직렬화 가능한 객체라면 모두 가능합니다. title - 빈 문자열을 지정하면 나중의 변경사항에도 안전하다. 아니면, 상태에 대한 짧은 제목을 제공할 수도 있다. url - 브라우저를 재시작할 경우 탐색을 시도할 수도 있음...

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다). Object.entries() 에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다. 배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));. ..

promise를 좀 더 편하게 사용할 수 있는 async, await에 대해서 정리 1. function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다 promise가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다 2. 함수 안에서 await를 사용할 수 있다.

document.onvisibilitychange syntax obj.oncisibilitychange = function; example document.onvisibilitychange = function() { console.log("visibility of page has changed!") }

Document.visibiltyState는 읽기전용 property로, 이 element가 현재 표시된 컨텍스트를 나타내는 document의 가시성을 반환한다. document가 background 또는 보이지 않는 탭(다른 탭)에 있는지, 또는 pre-rendering을 위해 로드 된 것인지를 아는 것은 유용하다. 가능한 값은 * 'visible' : 페이지 내용은 적어도 부분적으로 보일 수 있다. 실제로 아는 페이지가 최소화 되지 않은 창에서의 선택된 탭을 의미함. * 'hidden' : 페이지 내용은 사용자에게 표시되지 않다. 실제로 이는 docuement가 background-tap(다른탭)이거나, 최소화 된 창의 일부이거나, OS 화면 잠금이 활성 상태임을 의미 * 'prerender' : 페..

브라우저 저장소 : 로컬스토리지, 세선스토리지, 쿠키 ▶ HTML5에서 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할수있는도록 제공하는 기능. ▶ 로컬스토리지는 브라우저를 닫고 다시 열어도 유지, 영구적으로 보관이 가능 ▶ 세선스토리지는 브라우저 리로딩시에는 유지되나 닫으면 유지안됨. 브라우저 컨텍스트가 다르기 때문에 브라우저가 다르면 다른 영역이 된다. ▶ 쿠키는 방문자의 정보를 컴퓨터 메모리에 저장 Web Storage와 Cookie 차이 - Cookie는 매번 서버로 전송되고, 문자열만 저장이 가능하며, 용량에 제한이 있고, 만료 일자가 존재. Web Storage는 데이터를 클라이언트에 저장만 할 뿐 서버로 전송되지는 않는다. polyfill ..

자바스크립트 기능 : 기본적인 객체와 데이터 유형으로 구분한다. 문자열, 숫자, 불리언 데이터유형은 문자열, 숫자, 불리언과 연관된 기능을 제공한다. 내장 RegExp, 날짜(Date), Math객체는 각각 정규표현식, 날짜, 필수적인 수학 연산과 같은 기본 기능을 제공 자바스크립트의 기본적인 구성 요소는 시간이 지나면서 변했다. 자바스크립트 객체(object), 원시(primitive), 리터럴(literal) 구분 자바스크립트 리털럴은 인용 문자열(String), 부동 소수점수(Number), 불리언(Boolean)과 같은 특정한 형식의 값을 나타냄. 자바스크립트 원시(primitive)는 데이터 유형의 인스턴스를 나타내며 문자열, 숫자, 불리언, null, undefined 등 다섯 가지 형식이 있..

keys(), values(), entries()를 사용할 수 있는 자료구조는 Map, Set, Array Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다. Object.values(obj) – 객체의 값만 담은 배열을 반환합니다. Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다. Object.keys(obj) json형태의 객체를 반복문 Object를 활용한 방법 var json = {text:'abcd', number:1234, desc:'efg'}; Object.keys(json).forEach(function(k){ console.log('키값 : '+k + ', 데이터값 : ' + json[k]); }); for in 을 활용한 방법 var ..

객체를 복사할때 Object.assign({}, state) 첫번째 인자를 빈 객체를 주고, 두번째 인자를 state를 주게되면 state의 property들이 첫번째 인자에 복제되어 첫번째 인자가 리턴된다. Object.assign({}, state, {color:'red'}) 이렇게 세번째 인자를 넣게되면, 세번째 인자가 첫번째 인자 덮어씌어져 복제된다.