JavaScript
-
[JS] Iterable/Iterator 프로토콜백수의 개발/웹 2021. 8. 19. 00:42
Iterator Protocol Array, Map, Set와 같은 컬렉션 내 각 항목 처리는 매우 흔한 연산이다. iterator protocol을 통해 이러한 컬렉션을 더 잘 사용할 수 있다. iterator는 두 개의 속성( value, done)을 반환하는 next() 메소드 사용하여 객체의 iterator protocol을 구현한다. 실제 구현되어있는 iterator를 실행해보자. const arr = ['a', 'b', 'c', 'd', 'e']; const iter = arr[Symbol.iterator](); console.log(iter.next()) // { value: "a", done: false } console.log(iter.next()) // { value: "b", done..
-
var, let, const의 특징과 차이점백수의 개발/웹 2021. 8. 11. 00:31
JS에서는 변수를 선언하는 방식으로 var, let, const가 있다. 이 세가지의 변수 선언 방법의 특징과 차이를 한번 알아보자. 1. var var는 함수 레벨 스코프(function-level-scope)이고. var로 선언한 경우 호이스팅(hoisting)으로 인해 함수 내부라면 어디서든 접근이 된다. function fn() { console.log(varValue); // undefined var varValue = 100; console.log(varValue); // 100 } // hoising function fn() { var varValue; console.log(varValue); // undefined varValue = 100; console.log(varValue); // ..
-
[ JavaScript ] 타입/클래스 비교 연산 Typeof/Instanceof백수의 개발/웹 2020. 3. 17. 21:30
타입/클래스 비교 연산 Typeof/Instanceof Java와 같이 객체를 다루는 컴파일언어 조차도 타입 안정성에 있어서 완전히 자유롭지 않을 것이다. 그러나 컴파일러 조차 없는 Javascript ES6에서 클래스가 도입되었고 타입에 관한 문제가 더 많이 생길 수 있을 것이다. 이를 위해 TypeScript를 통해 조금은 더 타입 안정성을 가질 수 있더라도 여전히 이를 완전히 극복할 수는 없을 것이다. 이를 위해 우리는 타입/클래스 비교 연산을 확실하게 알고, 적용할 수 있어야 할 것이다. 오늘은 typeof와 instanceof를 통해 타입/클래스 비교를 어떻게 할 수 있을지 다루어 보겠다. Typeof typeof는 함수가 아닌 연산자이다. 즉, 괄호를 사용하지 않고 !value, ~value와..
-
ContentEditable에서 커서(Caret) 활용하기(3) - 자바스크립트백수의 개발/웹 2020. 3. 4. 20:32
ContentEditable에서 커서(Caret) 활용하기(3) - 자바스크립트 [ ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트 ]에서 Caret을 설정하고, 드래그의 형태로 만드는 것 까지 진행해봤다. 그러나 드래그의 형태로 해보면 알겠지만, 뒤에서 앞으로 드래그를 했을때와, 앞에서 뒤로 드래그를 했을 때는 엄연히 다를 것이다. 이번 글을 통해 이에 대해 알아보고 ContContentEditable에서 커서(Caret) 활용하기를 마무리 하겠다. 드래그 한 Caret의 위치 내가 키보드나 마우스로 Caret을 조정하였다면 큰 문제는 없을 것이다. 그런데 앞에서 한 것 처럼 Caret을 인위적으로 바꿨다면 나의 기준은 어디이고, 기준은 어떻게 바꿔야 할까? 아래와 같이..
-
ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트백수의 개발/웹 2020. 3. 3. 21:16
ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트 [ ContentEditable에서 커서(Caret) 활용하기(1) - 자바스크립트 ]에서 커서의 위치를 확인하는 방법을 알아봤다면, 이번에는 코드를 통해 커서의 위치를 설정하는 방법을 알아보자. Caret 위치 지정하기 Caret의 위치를 지정하기 위해서 우리는 Selection과 Range만 알면 된다. 아래와 같은 코드가 있다고 생각해보자. 가나다라마바사아자차 여기서 우리는 Range를 먼저 설정해주고, 해당 Range를 Selection에 전달해주면 Caret의 위치가 지정될 것이다. "다" 부터 "아"까지 드래그를 한 형태로 Caret을 옮겨본다고 생각해보자. 간단하게 설명하자면 다음과 같다. "다"의 위치를 Ran..
-
ContentEditable에서 커서(Caret) 활용하기(1) - 자바스크립트백수의 개발/웹 2019. 6. 11. 18:30
1. ContentEditable이란? ... 특정 요소(Element)에 텍스트를 작성할 수 있도록하는 속성 아래와 같이 생성할 수 있다. 2. ContentEditable에서의 커서(Caret) ContentEditable에서 텍스트를 작성할 때 내가 작성하는 부분에 커서가 있는 것을 확인할 수 있다. 오늘은 커서의 정보를 확인하는 방법에 대해 알아보자. * 일반적으로 커서는 마우스 커서를 지칭하고, 텍스트 창에 있는 커서는 캐럿(Caret)이라고 지칭한다. 3. 커서의 정보 Selection const selection = window.getSelection() /*Selection{ anchorNode: node, anchorOffset: number, baseNode: node, baseOffs..