LazyLoad, 디바운싱, 쓰로틀링 웹 페이지를 열 때 img태그의 src속성은 현재 뷰 포트가 어디있건간에 이미지소스를 다운로드받는다. 만약 몇천 몇만의 이미지태그가 있으면 이를 다 다운받을 때까지 엄청난 시간이 들 것이다.(사용자가 보고있지 않아도.) 따라서 이런 리소스낭비를 줄이기 위해 사용되는 것이다. 예시로는 ~~유투브에서 스크롤링할 때 썸네일에 해당하는 부분이 회색으로 가려져있다. -> 스켈레톤 ui~~ 무한스크롤이 적용된 사이트에서 스크롤할 때 로딩창이 생기면서 이미지를 불러온다. 모든 리소스를 받지않고 또는 load하지 않고 필요에 따라 그때그때 받아오는 것 이 때 사용되는 것이 이 개념이다. 레이지로딩은 스크롤 이벤트를 통해 구현한다. 이 때 스크롤 이벤트는 모든 이미지가 로드되면 제거..

JavaScript slider 애니메이션 버튼 클릭시 내용을 접거나, 펼칠 수 있게 한다. 구현 버튼이벤트를 등록하고, classList에 애니매이션을 추가한다. height를 0px ~ 특정 px까지 늘렸다가 줄일 것이므로 요소를 감싸고있는 태그에서 0px로 줄였을 시 컨테이너 범위를 초과해 그리는 것을 방지하기 위해 overflow: hidden속성을 추가한다. Show / Hide Slide body{ background:grey; } #box{ width:400px; background:orange; margin:0 auto; margin-top:3%; overflow:hidden; } .slider { transition:all 2s ease-in-out; height:0px; } .slide..

바닐라 JS 모달 작성 모달창 생성구현 모달은 팝업이랑 다르게 현재 페이지 위에 새로운 레이어이다. 흔히 보듯 어떤 이미지 클릭하면 뒤로 흐리게 표시되고 그 이미지가 페이지 이동없이 확대되는 그런 창을 뜻한다. 구현에는 여러 방법이 있겠지만 나는 display none block으로 생겼다 없어졌다하는 방법과 z-index로 구현해보았다. display none block 모달창을 미리 화면에 그려넣고 해당 속성을 none으로 주게되면 해당 요소가 랜더트리에 포함되지 않는다. 따라서 none에서 다른 속성으로 바꾸게 되면 (또는 그 반대의 경우에도) 요소의 위치 및 크기를 계산하는 리 플로우, 요소를 화면에 그리는 리페인트과정이 수행된다. 트랜지션 적용 불가 transition은 어떤 속성값이 변경될 때..

JavaScript Drog and Drop 드래그앤 드롭을 구현한다. 다른 부모로 이동시킬 수 있도록 한다. 1. draggable 태그의 속성에는 draggable이 있다. 이를 true로 하여 드래그할 수 있다. sayhi 2. 드래그앤 드롭 핸들러 3가지 드래그앤 드롭을 구현하기 위해 다음 3가지 핸들러를 알아야한다. ondragstart : 드래그된 아이템에 id부여, 드래그 상태에서 일어날 변화를 지정할 수 있다. ondragover : 드롭 액션을 지정 ondrop : 드롭 행위가 일어남. 드래그된 아이템은 새로운 부모의 자식이 된다. 드래그 아이템 드랍 존 const item = document.querySelector('span.item'); const dropZone = ..

클래스와 객체의 혼합 클래스이론 클래스의 개념 자바스크립트의 클래스 자바스크립트의 클래스는 클래스 디자인 패턴을 사용하기위해 억지로 만들어낸 패턴이다. 클래스는 디자인패턴중 하나이니 쓸지말지는 자신의 결정에 달렸다. 클래스 체계 클래스는 설계도 같은 느낌이다. 구성은 아래와같다. 데이터 프로퍼티(변수) 메서드 생성자 객체를 생성할 때 필요한 정보를 초기화한다. class CoolGuy { // 생성자 constructor (trick) { // property this.specialTrick = trick } // 메서드 showOff () { console.log('My trick is ', this.specialTrick) } } 객체를 생성하는 방법 joe = new CoolGuy(&..

Chapter 3 객체 객체에 대해서 자세히 다룬다. 3.1 구문 객체는 선언적, 생성자형식으로 정의할 수 있다. let obj = { //선언적 a: 2, } let obj = new Object(); // 생성자 obj.a = 2; 생성자처럼 정의하면 프로퍼티를 일일히 나열해야하므로 비추천. 3.2, 3.3 타입과 내장객체 JS에는 7가지 원시타입이 존재한다. Unbonss 언디파인드, 널, 불리언, 오브젝트, 넘버, 스트링, 심볼 이 타입들은 메소드를 가질 수 없는 것이다. 내장 객체로 위의 원시타입과 대응되어보이지만 실제는 그렇지 않다. String Number Boolean Object Function Array Date RegExp Error 이 객체들은 클래스처럼보이지만 각각 생성자로 사용되..

Chapter 2 this All Makes Sense Now! 명시적 바인딩 this를 명시적으로 바인딩을 하는 적당한 유틸리티함수가 있다. apply call function foo () { console.log(this.a); } var obj = { a: 42 }; foo.call(obj); // 42 하드바인딩 function foo() { console.log( this.a ); } var obj = { a: 2 }; // bar 안에 foo는 obj로 바인딩되어있다. var bar = function() { foo.call( obj ); }; bar(); // 2 setTimeout( bar, 100 ); // 2 // `bar` hard binds `foo`'s `this` to `..

Chapter 2 this All Makes Sense Now! call site, call stack에 대해 이해한다. 1. call Site 함수가 호출된 지점을 의미 call Stack: 함수가 호출될 때 call Stack에 push되며, 반환값을 가져올 때 pop됨. 개발자도구에서 debugger찍어보면 콜스택을 볼 수 있음, 예외발생시에도 볼 수 있음. function baz() { // call-stack is: `baz` // so, our call-site is in the global scope console.log( "baz" ); bar(); // `bar` // so, our call-site is in `baz` console.log( "bar" ); foo(); // `bar`..

Chapter 1 This or That? JS에서 가장 헷갈리는 키워드인 this에 대해서 알아보자. this는 런타임 바인딩. 즉 함수가 호출될 때 바인딩이 결정된다. this를 호출과 무관하게 고정시킬 수 있는 것이 bind 함수를 호출할 때마다 함수 컨텍스트가 생기는데, 컨텍스트 내에 변수객체, 스코프체인, this가 생성된다. 함수호출방식에 따라 바인딩되는 객체가 달라진다. -1. 컨텍스트 스코프 호이스팅 this, 클로저 등의 동작원리를 담는 JS의 핵심원리이며 ECMAScript 스펙에선 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념"이라고 정의함. 실행 가능한 코드가 실행되기 위해 필요한 "환경"이라고 풀어쓸 수 있음. -1.1 컨텍스트 종류와 생성순서 컨텍스트 종류는 다음과 같다..

function foo () { var a = 2; function bar() { console.log(a); } return bar; } var baz = foo() baz() // 2 Chapter 5-2_ 스코프클로져 5.5장 모듈 먼저 렉시컬 스코프에 대해 다시 정리해보자 JS는 코드를 실행할 때 컴파일 단계에서 토크나이징, 렉싱이 발생한다. var num = 42; 라는 문자열을 잘게 쪼개 토큰이라는 조각으로 만드는 과정을 토크나이징이라 한다 (var, num, =, 5, ; 으로 쪼개어진다.) 렉싱은 토큰을 분석해 토큰에게 의미를 부여하는 과정인데, 개발자가 변수를 어디에 작성하는지에 따라 토큰이 분석되고, 스코프가 결정된다. 이때 구성된 스코프를 렉시컬 스코프라고 한다. 스코프는 함수, 블록..