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..

이전 포스트 : Javascript로 CSS 제어하기(1) 에서 인라인 스타일(별로 유용하지 않음)과 계산된 스타일(유용하지만 너무 구체적일 수 있음)을 다루는 방법을 알아보았다. CSSStyleSheet 인터페이스 인라인 스타일에 국한되지 않고 값을 읽고 쓸 수 있는 보다 유용한 API는 CSSStylesSheet API 이다. 간단하게 문서의 스타일시트 정보에 접근할 수 있는 방법은 현재 document의 styleSheets 프로퍼티를 사용하면 된다. 이것이 CSSStyleSheet 인터페이스다. 아래 코드는 length 프로퍼티를 사용해서 현재 document가 몇개의 스타일시트를 가지는지 볼 수 있다. 인덱싱을 통해 접근하는 것도 가능하다. console 창에 로그를 찍어보면 사용 가능한 메소드..

CSSOM 이란? MDN을 참고해보자 : (https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically. CSS Object Model은 Javascript로 CSS를 제어할 수 있는 API 모음이다. DOM과 흡사하지만, HTML이 아닌 CSS를 위한 것이다. 사용자가 CSS를 ..

참고 : https://www.freecodecamp.org/ 객체 생성 기본과 접근자동차, 가게, 새 같은 모든 것들이 객체이다. 어떤 속성이 있는가? 자동차는 바퀴를 가지고 있고, 가게에서는 물건을 팔며, 새는 날개를 가지고 있다.이런 속성들이 객체를 만든다. 유사한 객체들은 동일한 속성을 공유하지만 그 값은 다양하다는 점에 주목하라. 예를 들어 모든 자동차에는 바퀴가 있지만, 바퀴 숫자는 차종마다 다른것 처럼 말이다. 자바스크립트의 객체는 실제 객체를 모델링하는데 사용되며 실제 객체와 마찬가지로 속성과 기능을 부여한다. 이런 컨셉으로 작성된 오리(duck) 객체를 살펴보자. duck 객체는 2개의 속성과 값을 가지고 있다. 이름은 Aflac, 다리의 수는 2 이다. 속성의 값을 얻기 위해서는 점(...

운영툴을 만드는데 테이블이 필요해서 datatable 을 사용했다. datatable의 장점은 프론트나 서버사이드 개발자가 소팅, 페이징, 검색등을 전혀 신경쓰지 않아도 된다는 점이다. JSON으로 응답받는 정보들은 그냥 전체 리스트를 내려주기만 하면 된다. 그러면 datatable이 알아서 테이블을 그려주고, 일단 테이블이 완성된 이후에는 검색이나 소팅이 굉장히 빠르게 동작한다. (특정 액션을 할때마다 API를 재호출 하는게 아니기 때문)디자인 또한 제공되는 css를 사용해서 별도 스타일을 적용하지 않아도 꽤 괜찮은 모습으로 표현된다. (우리는 semantic ui를 사용했다.)테이블 복사, Excel 다운로드등도 코드 몇줄만 추가해주면 쉽고 편리하게 구현할 수 있다. 단점은 튜닝이 어렵다는 점. 버튼..

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..