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, ; 으로 쪼개어진다.) 렉싱은 토큰을 분석해 토큰에게 의미를 부여하는 과정인데, 개발자가 변수를 어디에 작성하는지에 따라 토큰이 분석되고, 스코프가 결정된다. 이때 구성된 스코프를 렉시컬 스코프라고 한다. 스코프는 함수, 블록..

Chapter 4 호이스팅 a = 2; var a; console.log( a ); var a 가 a = 2보다 아래 선언되었으니 console.log에는 undefined라는 결과가 니올것을 예상하는데 호이스팅 에 의해 2가 나온다. 이전 1장에서 사용했던 예제를 보면 var a = 2; 컴파일러는 두가지를 처리한다고 얘기했었다. var a a가 선언되어있는지 확인하고 선언되있지 않으면 엔진에 선언을 요청한다. a = 2 a에 2를 대입하는 코드를 생성하여 엔진에 넘겨준다. 처음 코드는 컴파일러에 의해 아래와 같이 바뀐다. var a; a = 2; console.log( a ); 이렇게 선언문이 가장 상단으로 끌어올려지는것을 호이스팅 이라고 한다. 호이스팅은 스코프 내에서도 일어납니다. function..

Chapter 3 함수 vs 블록스코프 함수, 블록스코프에 대해 알아본다. 3.1 함수 기반 스코프 JS는 함수 기반 스코프를 사용한다. 함수가 자체적인 스코프를 갖는다는 것이다. function foo(a){ var b = 2; function bar() { var c = 3; } } bar();//ReferenceError console.log(a,b,c); //ReferenceError 위의 예제에서 foo()는 a, b, bar, c를 포함한 스코프를 갖고 있다. bar()도 자체스코프를 가진다. 글로벌 스코프는 foo()라는 확인자를 갖는다. 각 스코프안에서 접근할 수 있다. 글로벌 스코프에는 foo()만 있으므로 위 예제처럼 참조하면 에러가 발생한다. 3.2 일반 스코프에 숨기 스코프를 사용해..

Chapter 2: Illustrating Lexical Scope 렉시컬 스코프에 대해 알아보기 Undefined의 혼란 Lexical Scope 1장에서 자바스크립트의 스코프는 컴파일타임때 결정되는걸 알 수 있다. 그 스코프를 결정하는 방식이 두가지가 있다. Lexical Scope dynamic scope 둘의 차이점은 부모에 선언된 변수를 어떤걸 쓰느냐에 따라 결정된다. 그에 대한 설명으로 아래의 코드를 많이 쓰는것 같다. var x \= 1; ​ function foo(){ var x \= 10; bar(); } ​ function bar(){ console.log(x); } ​ foo(); //? bar(); //? foo() 안에서 bar을 호출했을때 출력되는 x값은 어느 스코프의 x값인지 ..