mobssie

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' : 페..

타입스크립트는 변수랑 함수의매개변수랑 리턴값에 타입이 붙은 것이다. 설치 npm init npm i typescript npm i -g typescript (명령어로 설치/+ 전역설치)] = npx tsc lecture.ts -w 프로젝트에 설치한 버젼이랑 같이 설치가되서 npx로 해야한다. tsc 엔터 (타입스크립트 컴파일 하는명령어) tsc lecture (해당하는 폴더에) tsc를 통해서 ts를 컴파일해서 js로 변경해서 html에는 항상 js를 연결. [자동으로 컴파일] tsc lecture.ts -w HTMLDivElement : 타입스크립트에서 만들어 놓음 Package-lock : lock파일은 github에 같이 올려야함. 정확한 버젼이기때문에 똑같은 버젼이 깔림. Package.js : ..

pass props : 부모에서 자식에게 데이터를 전달 Emit Events : 자식이 부모에게 데이터를 전달 독립적으로 컴포넌트가 존재 자식이나 부모가 누군지 몰라서 동작함. 네이밍 규칙 컴포넌트내에 속성으로는 kebab-case / 스크립트 내부에서는 camelCase 사용 동적 Props v-bind를 이용해서 데이터를 전달해야 한다. 부모 컴포넌트의 message가 변경된 경우 자식 컴포넌트는 다시 message 데이터를 받아 다시 렌더링을 함.(v-bind 생량가능) 주의점: 단방향이기 때문에 부모에서 업데이트가되면 자식에게도 업데이트가되지만, 그 반대는 안됨. props를 변경하고 싶다면 1. props의 초기 값을 컴포넌트 로컬 데이터로 정의 2. props로 부터 계산된 속성을 정의 pro..

컴포넌트는 Vue 오브젝트를 확장한 오브젝트이다. 확장이란 미리 Vue 오브젝트에 옵션을 정의해 이미 옵션이 정의된 Vue오브젝트를 생성하는 것을 의미함. 컴포넌트를 생성하면 확장된 Vue 인스턴스가 생성. Vue.Component는 컴포넌트를 글로벌하게 등록하는 메서드 컴포넌트를 사용하면 공통적인 로직이나 템플릿을 엘리먼트를 통해 재활용할 수 있다. 주의할점! : 확장된 Vue 인스턴스, 즉 컴포넌트에서 data를 정의할 때 반드시 함수로 정의해야 한다. 컴포넌트 이름은 하이픈을 포함한 소문자이어야 한다. 로컬 컴포넌트 : Vue 인스턴스 혹은 컴포넌트의 옵션으로 등록해 해당 컴포넌트 내부에서만 사용하도록 지정 할 수 있다. var dateComponent = { template: '{{ now }}'..

템플릿 문법은 주로 디렉티브(Directive)로 이루어져있음. DOM 엘리먼트에 속성을 추가하는 것을 의미. 데이터바인딩 Mustache : {{ expression }} v-text : Mustache와 거의 동일하게 작동. 중괄호로 감싸는 대신 디렉티브를 이용해서 데이터를 바인딩 가능 v-html : HTML 문자열을 그대로 바인딩. v-bind : View의 텍스트를 렌더링하는 문법이 아닌 태그의 속성에 데이터를 바인딩하는 문법. 조건문 v-if : 조건에 따라 템플릿을 보여줌 (v-else, v-else-if) template if : v-if는 디렉티브이기때문에 한 가지 엘레먼트에만 적용가능하지만 template 엘레먼트 한 번에 처리 가능하다. 엘레먼트는 가상의 엘레먼트이기 때문에 자식들만 ..

methods computed : 데이터의 경우에는 methods보다 computed를 사용하는 것이 좋음 계산된 속성은 getter, setter watch : Vue 인스턴스의 데이터가 변경되는 시점을 감시해 메서드를 호출 데이터가 변경되면 watch는 변경됨을 확인하고 메서드를 실행 ▶ 라이프사이클이 Vue 인스턴스의 이벤트를 후킹하는 것이라면, watch는 Vue 인스턴스의 데이터의 변경을 후킹하는 것.

beforeCreate: Vue 인스턴스가 생성되기 전 create: Vue 인스턴스가 생성된 후 beforeMount: Vue 인스턴스가 마운트되기 전 mounted: Vue 인스턴스가 마운트된 후 beforeDestroy: Vue 인스턴스가 파괴되기 전 destroyed: Vue 인스턴스가 파괴된 후 beforeUpdate: Vue 인스턴스의 데이터가 변경되어 다시 렌더링하기 전 updated: Vue 인스턴스의 데이터가 변경되어 다시 렌더링한 후

typescript variables // There are 3 basic types in Typescript var isDone: boolean = false; var age: number = 42; var myname: string : "Anders"; chcek console.log(isDone) console.log(age) console.log(myName) null vs undefined //print null var emptyVariable = null; console.log(emptyVariable); // prints undefined var newVariable; console.log(newVariable); collection // list var list: number[] = [1,..

순서대로 실행하기 npm init npm i typescript npm i react react-dom npm i webpack webpack-cli -D npm i awesome-typescript-loader -D npm i @types/react @types/react-dom 여기까지 설치 후 script 실행 부분 변경 "scripts": { "dev": "webpack" }, { "name": "react-typescript-webpack-init", "version": "1.0.0", "description": "react typescript webpack init", "main": "index.js", "scripts": { "dev": "webpack" }, "repository": { "..