Web Storage 웹서버에 많은 정보를 Client에 저장해 두는 것. localStorage 도메인별로 관리 . 직접 삭제하기 전까지 영구적으로 보관 sessionStorage 도메인별로 관리. 접속한 동안만 데이터를 유지 Cookie와 다른점 크기에 제한이 없음 - cookie는 4KB , Web Storage는 제한이 없음. 서버로 보내지지 않음 - Cookie는 HTTP Request에 의해 자동으로 서버에 전송이 되지만 Web Storage는 전송되지 않음. 유효기간의 제한이 없음 - Cookie처럼 특정 기간이 지나면 자동으로 삭제되지 않음. JavaScript 객체를 저장할 수 있음 localStorage로 CRUD(Create Read Update Delete) 기능 만들기 1. Cre..
정규표현식(RegExp : Regular Expression) 특정 규칙을 가진 문자열 집합에 대한 표현식. 유효성 검사, 검색, 문자열 대체 등에 유용 언어독립적. 간결하게 복잡한 조건을 검사가능. 문법자체가 복잡하므로 학습 비용이 비교적 높음 정규표현식 객체 생성하기 정규표현식 객체 btn1.addEventListener('click',(e)=>{ //숫자포함여부 검사용 정규표현식 const regexp1 = /[0-9]/gi; const regexp2 = new RegExp(/[0-9]/gi); const regexp3 = new RegExp("[0-9]","gi"); console.dir(regexp1); console.dir(regexp2); console.dir(regexp3); }); 모두 ..
Event (이벤트) 문서가 모두 로딩되었을때 window의 load이벤트 발생! window.onload와 body.onload는 동일하다. window.onload=()=>{ const h2=document.createElement("h2"); h2.append(document.createTextNode("Hello Friday~")); target.append(h2); //Uncaught ReferenceError: target is not defined -> 위에서부터 아래로 해석 }; event 웹페이지 상에 일어나는 모든 사용자의 action, 네트워크상 처리상태변화 등 event라는 이름으로 하나의 이벤트로 관리됨. event -> eventHandler : 이벤트가 발생하면, 태그에 등록된..
window객체 웹페이지의 모든 자원을 관리하는 객체 BOM (Browser Object Model) navigator, location, history, screen, XMLHttpRequest, frames ... DOM (Document Object Model) document (html로 부터 변환된 객체) Javascript (Object, String, Array, ...) 오늘은 이렇게 배워봤다. window 객체 웹페이지의 모든 자원을 관리하는 객체 (최상위) F12콘솔창에 this를 검색하면, 다음과 같이 window 가 가진 객체들이 뜬다. 그외에도 window.Object , window.Array, window.String 등등 검색이 가능하다. window객체는 페이지에 대한 관리..
구조분해할당(Destructuring Assignment) 구조가 있으면 그걸 해체 후 변수에 대입( assign ) 구조 분해하기 const arr=[1,2,3]; const a=arr[0]; const b=arr[1]; const c=arr[2]; console.log(arr,a,b,c); 보통 이렇게 값을 표현했었다. const [a,b]=arr; console.log(arr,a,b); 필요없는 번지수 생략 가능 (c가 생략됨) const[a, ,b]=arr; console.log(arr,a,b); 변수 생략시 해당 인덱스 값은 버리게 된다. (1,3 출력) const[a,b,c,d]=arr; console.log(arr,a,b,c,d); 없는 변수 d를 호출하더라도, 인덱스는 undefined를 ..
자유변수 & 클로져 함수 자유변수 (Free Variable) 함수 내에 선언되지 않은 변수 const test1 = () => { const greeting = '오늘 날씨 정말 좋다~'; // say의 지역변수 : name, word const say = (name) => { const word = '안녕,' + name; console.log(word); console.log(greeting); }; say('영희'); }; 여기서 say의 지역변수는 name과 word. 그렇다면 greeting은 ? 함수 내에 선언되지 않은 자유변수이다. 클로져 함수 (Closure Function) 필요한 변수를 모두 갖고 외부로부터 닫힌 함수. (지역변수, 자유변수) const test2 = () => { c..
함수 선언식 & 함수 표현식 함수 선언식 : Function Declaration 호이스팅 처리(=선언문이 최상위에서 처리되는 것)되어 선언 전에 호출이 가능하다. 함수 표현식 : Function Expression 호이스팅 처리되지 않아 선언 전에 호출이 불가능하다. 익명 함수를 대입 함수 선언식 함수 표현식 test1(); function test1(){ console.log('함수 선언식!'); } const test2 = function(){ console.log('함수 표현식!'); }; test1은 함수선언식으로, 함수가 선언되기 전에 test1();이 언급되었으나, 호이스팅 처리로 인해 선언 전에 사용이 가능하다. test2는 변수대입을 함수로 선언한 것으로, 선언 전에 호출이 불가능하다. ..
변수유효범위 block scope - const, let function scope - var 변수유효범위 확인 // 전역공간 const a = '안녕'; // 전역변수 function test1(){ console.log(a); const b = '잘가'; // 지역변수 console.log(b); } // console.log(b); // Uncaught ReferenceError: b is not defined for(let i = 0; i < 10; i++){ let k = i; } // console.log(i); // Uncaught ReferenceError: i is not defined // console.log(k); // Uncaught ReferenceError: k is not d..
