//log my lifestyle

function debounce(func, wait = 20, immediate = true) { var timeout; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } Debounce는 연속적으로 호출하는 함수들 중 마지막 함수(또는 제일 처음)..

React 완벽가이드 섹션2 - 자바스크립트 새로고침 udemy 강의 스타트 :) 섹션1은 강의OT로 기록은 따로 하지 않음 ​ 1. let & const let : 변수를 선언할때 사용 const : 상수(한번 지정하면 절대 변하지않는 값)를 선언할때 사용, 값 재할당 불가 var : 변수를 선언 (강의에서는 사용안함) 2.Arrow Function function printMyName(name) { console.log(name); } printMyname('Max'); // "Max" // 화살표 함수 const printMyName =(name) => { console.log(name); } printMyname('Max'); // "Max" 인자를 전달하지않으면 빈괄호쌍으로 입력 const pr..

AJAX (Asynchronous Javascript And Xml) 웹페이지에서 동적으로 서버에게 데이터를 주고받을수잇는 기술을 의미 대표적인 예로 XHR 오브젝트가있다. 브라우저 api에서제공하는 오브젝트로, 간단하게 서버에게 데이터를 요청하고받아올수있다. 장점 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다. 단점 Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다. Ajax로는 바이너리 데이터를 보내거나 받을 수 ..

Event mouse click 클릭할때 keyboard 키를 누를때 resizing window 화면사이즈 재조정할때 close window 화면을닫을때 page loading 페이지 로딩할때 form submission 양식을 제출할때 video is being played 영상이 재생될때 error 에러시 Bubbling 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. Capturing 이벤트가 하위 요소로 전파되는 단계를 말함 event.target 과 this의 차이 event.target은 실제 이벤트가 시작된 ‘타깃’ 요소 버블링이 진..

let ,constant 변수를 지정할때 let과 const로 선언할수있다. (ES6부터 적용됨) let const 그림은 어플리케이션마다 쓸수있는 메모리가 제한적으로 할당됨을 보여준다. mutable data immutable data 값을 변경할수있음 읽기,쓰기 가능 한번 선언한 변수는 고정값을 가짐 읽기만가능 const를 쓰는 이유: (1) 보안상 해킹 오류방지 (2) 하나의 어플리케이션 프로세스안에서 다양한 스레드(thread)가있고, 스레드에 동시에 접근하여 변경가능,이는 위험여지가있으므로 변하지않는값을 사용 (3) 변경할필요가없을때 const를 써서 작업시 실수 방지 var let 은 ES6부터 추가되었는데 ES6이전에는 var를 사용하였다. var는 변수를 지정하는데 큰 단점이 있어 사용을 ..

1)Head 안에 script 추가할때 브라우저는 한줄씩파싱하다가 스크립트태그를 만나면 파싱을 멈추고, js다운과 실행이 완료되었을때 페이지를 다시파싱한다. JS파일이 크고무거울수록 페이지로딩지연이 계속늘어난다. 사용자가 웹사이트를 보는데까지 많은 시간이 소요된다. 2 )body 밑에 script추가할때 사용자가 기본적인 Html컨텐츠를 빨리본다는장점 하지만 컨텐츠가 js에 의존적,즉 의미있는 컨텐츠를 보기위해서는 서버에서 자바스크립트를 받아오는 시간도 기다려야하고 실행하는 시간을 기다리는 단점도 있다. 3) head + async head에 script로 넣지만 async라는 속성값을 준다. asyn: 불리언타입의 속성이라 선언하는것만으로 true로 설정이 된다. 브라우저가 파싱을하다가 병렬로 js파일..