데브힐러의 프로그래밍

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이다. 간단한 키와 값을 저장할 수 있다. 키-밸류 스토리지 형태이다. 로컬스토리지의 데이터는 브라우저에 남아있다.(지속적으로 필요한 데이터 예-자동로그인 등 저장) 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.(잠깐 동한 필요한정보 예-일회성 로그인 정보 저장) 참고자료 (HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키 안녕하세요. 이번 시간에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 대해 알아보겠습니다. 이름만 봐도 각각의 기능이 뭔지 대충 알겠죠? 영어에 약하신 분들을 위해 간단히 설 www.zerocho.com 참고자료2 쿠키와 세션 개념 개요 쿠키와 세션은..

var는 function-scope이고 let, const는 block-scope이다. var 는 재선언, 재할당이 가능 let은 재선언이 가능 const는 둘다 불가능 let은 값을 할당하기 전에 변수가 선언되어야 한다. 값을 먼저 할당하면 refference error가 된다. temperal dead zone 때문. var는 값을 할당한 후 변수를 선언해도 코드가 동작한다. 변수가 hoisting (함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다) 되기 때문이다. 참고자료

1. Syntax let add = (x, y) => x + y; 위와같이 오른쪽의 표현식이 하나라면 중괄호를 필요로 하지 않는다. let squareNum = x => x \* x; 위와 같이 argument가 한개라면 소괄호()를 생략해도 된다. 2. Arguments Binding (argument는 함수 안에서 접근 가능한 Object로써 함수에 전달되는 argument의 값을 포함한다.) arrow함수는 arguments 바인딩을 가지지 않는다. 그러나 가장 가까운 non-arrow형태의 부모함수에의 arguments 오브젝트에는 접근 가능하다. 3. 'this' keyword 사용 가능 유무 일반함수와 다르게 arrow함수는 자기자신의 this가 없다. arrow함수 내부의 th..

배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) 1. sort() 함수 2. sort() 함수로 숫자 오름차순 정렬하기 3. sort() 함수로 숫자 내림차순 정렬하기 4. sort() 함수로 문자열 정렬하기 5. sort() 함수로 문자열(대소문자 구분없이) 정렬하기 6. sort() 함수로 객체 정렬하기 1. sort() 함수 Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다. arr.sort([compareFunction]) 파라미터 compareFunction 정렬 순서를 정의하는 함수. 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다. 이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다. 이 함수가 ..

1. DOCTYPE 를 선언하지 않으면 어떤일이 발생하나요? 2. 브라우저 렌더링 요소 중 Reflow, Repaint 의 정의와 관련되는 대표적인 CSS 속성은 무엇인가요. 3. 태그의 defer, async 속성의 차이는? 4. 쿠키, 로컬스토리지, 세션스토리지의 차이점은? 5. 점진적 향상법 (Progressive enhancement)과 우아한 성능 저하법 (graceful degradation)의 차이점? 6. FOUC 는 왜 생기는 건가요? 어떻게 피할 수 있는지 ? 7. CSS에서 floating clearing 하지않으면 어떤일이 발생하고 왜 이런일이 발생하는지 ? 8. CSS의 box-model 에서 블록요소의 영역을 차지하는 CSS속성은? 9. 자바스크립트에서 =, ==, === 의 차..

var 어레이 = [2, 3, 4]; var 뉴어레이 = 어레이.map(function(a){ return a*2 }) { 반복된UI() } function 반복된UI(){ var 어레이 = []; for (var i = 0; i

전편에서 this는 '함수의 invocation(호출)을 위한 binding(바인딩)이며, 이는 call-site(함수를 호출한 위치)에 근거한다.' 라고 정의하였다. 2020/02/13 - [javascript&Node.js] - javascript의 this는 대체 무엇인가? ①편 본격적으로 this의 바인딩의 4가지 종류에 대해 알아보자. 1) Default Binding stand alone function invocation할 경우, 즉 global-scope(전역)에서 함수를 호출할 경우 this는 global object를 바인딩 한다. function foo() { console.log( this.a ); } var a = 2; foo(); // 2 마지막 줄 foo()함수의 호출의 장소,..

자바스크립트를 심층도 있게 다룬 You don't know js라는 책이 있다. 한국에도 번역본이 존재한다. 현재 해외 거주중이기에 높은 배송비를 물어가며 사기가 쉽지 않다. 저자가 친절하게도 본문(영어)을 전부 git hub저장소에 공개해놓았다. 현재 개발할 때 주 사용 언어가 js이다. node.js 나 클라이언트쪽 코딩을 하며 수많은 에러를 만났다. 당연히 쓰는 비동기 처리, this, scope&closure 등등 코딩에는 능숙해졌지만 원리나 개념에 대해 명확한 나만의 언어로 표현하기가 힘들다는 것을 알게되었다. 이를 계기로 You don't know js를 단원별로 공부하며 정리해 보았다. Object 단원- this란 무엇인가? this is a binding made for each func..