Web Standard

HTML의 텍스트 노드(Text node) 는 다루기 까다롭다. 특히 동적으로 삽입되거나 생성될때 더욱 그렇다. 예시를 살펴보자. 하나의 글이 있습니다. p태그에 텍스트 노드를 하나 더 추가 하면 : let el = document.getElementById('el'); el.appendChild(document.createTextNode(' 글을 하나 더 추가 합니다.')); console.log(el.childNodes.length); // 2 글을 하나 더 추가 한 뒤, childNodes 의 개수를 로그로 찍어보면 2개라고 나온것에 주목하자. 이 노드들은 단일 문자열 이지만 동적으로 추가 되었기 때문에, 각각 분리된 노드로 취급된다. 경우에 따라서는 하나의 텍스트 노드로 다루는게 나은데, norm..

addEventListener() 는 웹 요소에 이벤트를 거는것으로 많이 사용된다. 대부분 이런 모습이다. element.addEventListener('click', doSomething, false); 1번째 인자는 이벤트명이다. 2번째 인자는 콜백 함수로, 이벤트가 발생되면 실행된다. 3번째 인자는 useCapture 라 불리는 불린값으로, 이벤트 버블링이나 캡쳐링을 사용할것인지 나타낸다. 위의 코드는 꽤 익숙하다. 특히 1, 2번째 인자는 모두 아는 내용일 것이다. 하지만 3번째 인자값을 다르게 줄 수 있다는 것은 많이 알려지지 않았다. 새로운 인자는 options 객체로, 이렇게 생겼다 : element.addEventListener('click', doSomething, { capture: f..

최신 크롬, 파이어폭스에서 사용 가능한 ES2019(ES10) 의 5가지 기능 Object.fromEntries( ), trimStart( ), trimEnd(), flat(), flatMap() 1. Object.fromEntries() 객체를 배열로 바꾸는 것은 ES2017 에서 Object.entries( ) 메소드로 가능하다. 이 메소드는 객체를 인자로 받아 [key, value] 형태의 배열로 반환한다. const obj = {one: 1, two: 2, three: 3}; console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]] 반대로 배열을 객체로 변환하려면 어떻게 해야 할까? 파이썬 같은 몇몇 언어는 dic..

참고 : Learning Javascript 자바스크립트에서는 일반적인 방법 외에도, 함수를 어디서 어떻게 호출했느냐와 관계없이 this가 무엇인지 지정할 수 있다. callcall 메서드는 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다. 함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. call의 첫 번째 매개변수는 this로 사용할 값이고, 매개변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다. applyapply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받는다. app..

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전)새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Template Strings (템플릿) 자바스크립트 자체적으로 템플릿을 지원합니다. 작업하기 훨씬 쉬워졌네요. 대박.변수 할당도 쉬워졌고 원래 \n 으로 처리했던 멀티라인도 지원합니다. 다만 따옴표(')가 아닌 ` 표시를 써야합니다.(키보드 1번 옆에 ~ 쉬프트 누르고) 12345678910111213141516 var name = '이브라', time = '오늘'; var str = `안녕하세요 ${na..

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전) 새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Class (클래스) 자바스크립트에서도 클래스를 본격적으로 사용할 수 있습니다. 객체지향 패턴을 쉽게 구현해보시죠. 클래스는 프로토타입 기반의 상속, 상위클래스 호출(super), 인스턴스, static method와 constructor를 지원합니다. 요거는 JAVA에 대해 빠삭한 분들이면 별 어려움 없이 사용하실 수 있겠네요! 123456789101112131415161718192021222324252..

ECMAScript6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작합니다.(최신버전)새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다. 참고사이트 :http://es6-features.org/https://github.com/lukehoban/es6features Arrows (화살표 함수) 화살표는 => 를 이용해 함수를 간략화 할 수 있습니다. (C#, JAVA8, CoffeeScript와 비슷) 함수와 리턴값을 간단한 형태로 정의할 수 있습니다. 예를 참고 하시죠. 인자 => 표현식 123456789101112 //+1 함수var addOne = num => num+1;addOne(1); //2addOne(564); //565 //이것과 동일하게 동작합니다.var..