IT_susu

https://sharryhong.github.io/2016/12/20/nodejs-nvm/ 참고

CSSOM이란?CSS Object Model의 약자로, 자바스크립트에서 CSS를 조작할 수 있게 해주는 API 세트입니다. 요소의 크기(Dimensions) width, height clientWidth, clientHeight ⇲ 너비/높이(width/height) + 패딩(padding) offsetWidth, offsetHeight ⇲ 너비/높이(width/height) + 패딩(padding) + 보더(border) + 스크롤바 scrollWidth, scrollHeight ⇲ 스크롤 가능한 너비/높이 영역

css에서 style 속성은 -으로 연결되지만, javascript에서는 camelCase를 사용합니다. element.styleelement.style 명령을 사용하게 되면 html 요소에 inline 속성으로 style을 적용한다. element.style.cssText = '';복수의 style 속성을 정의할 경우 element.style.cssText = '';로 작성한다. 개행을 하고 싶다면 줄 끝에 \를 넣자. 이 외에 style값을 조작하고 싶다면getAttribute('style'), setAttribute(), removeAttribute() 등이 있다.단, float는 이미 javaScript에 있으므로 cssFloat를 사용하면 된다. 근데 이렇게 가져온 style값은 inline 속..

HTML Element 속성parentNode.children (IE9+) - 자식 '요소'만 가져옴. 읽기 전용 속성. 라이브로 업데이트 됨.firstElementChild - 첫번째 자식 '요소'만 가져옴lastElementChild - 마지막 자식 '요소'만 가져옴nextElementSibling - 다음 형제 '요소'만 가져옴previousElementSibling - 이전 형제 '요소'만 가져옴attributes(이 속성을 통해 반환되는 유사 배열 집합은 라이브 상태, 즉 실시간으로 변경된다) - 해당 요소가 갖고 있는 속성을 알려줌innerHTML - 해당요소 내부 html 코드를 가져옴. HTML 텍스트 코드를 실제 DOM 노드로 변환. 해당 속성은 무겁고 비싼 대가를 치루는 HTML 해석기..

NODEELEMENT의 상위 개념. NODE 속성자식, 형제, 부모, 노드유형, 이름, 값을 알 수 있습니다.childNodes : 직계 자식 노드들을 가져온다.firstChild : 첫번째 자식lastChild : 마지막 자식nextSibling : 다음 형제previousSibling : 이전 형제parentNode : 부모 요소nodeType : 노드의 유형nodeName : 노드의 이름nodeValue : text node의 값. string type으로 반환. NODE 메서드hasChildNodes() - 자식 노드를 포함하고 있는지 여부를 boolean값으로 반환. appendChild() - 마지막 자식으로 추가insertBefore(추가할 노드, 기준노드) - 기준노드 앞에 노드 추가rem..

자바스크립트는 원래 객체지향적인 언어는 아닙니다만, prototype속성을 활용하여 상속을 구현하는 등, 객체지향 비스무리하게 사용가능합니다.es6에서는 class도 등장해서 더더욱 객체지향적인 부분을 강화하였습니다. 객체지향 프로그래밍은 추상화를 사용하여 모델을 만드는 프로그래밍입니다.객체지향 프로그래밍은 전통적인 프로그래밍 방식과 비교하여 서로 협력하는 관계를 형성하는 객체 모음을 가진 소프트웨어 설게로 볼 수 있습니다. oop에서 각 객체는 메시지를 수신하고 데이터를 처리하며 메시지들을 다른 객체로 보낼 수 있습니다.프로그래밍의 유연성과 유지 보수성을 높이기 위한 것이며 대규모 소프트웨어 프로그래밍에서 널리 사용됩니다. 객체 지향 프로그래밍의 특징은 다음 용어로 정리할 수 있습니다. Class - ..

앞의 문자열에 %c를 넣고, 뒤에 문자열에 css 코드를 적으면 스타일이 적용됩니다. ex) console.log('%c------------------------------', 'color: #3527d5');

css는 html 파싱을 방해하지 않고 독자적으로 로드와 파싱이 이루어지지만, javascript는 html 파싱을 방해하면서 다운로드된다. 브라우저가 html파일을 처음부터 읽어 나가며 파싱을 하다가,script파일을 만나면, 우선 html 파싱을 멈춘다.javascript를 모두 다운 받은 뒤 실행한다.html 파싱을 이어나간다. head에 javascript파일을 넣어서 렌더링할 경우,아직 body부분의 dom이 만들어지지 않은 상태에서 javascript 코드가 실행되는 불상사가 생긴다.이러면, js코드는 에러를 발생시킨다. 해결책 1.따라서, head에 javascript 파일을 넣을 것이라면, DomContentLoaded이벤트나 load 이벤트를 활용한다.window.addEventListe..

gulp는 task runner. 일의 반복작업을 줄여주는 자동화 툴입니다. gulp.task 처리할 작업 정의gulp.src 읽을 파일gulp.src.pipe 플러그인 연결gulp.dest 저장할 파일gulp.watch src의 glob 파일들을 주시하고 있다가, 변동이 생기면 task를 실행

모듈이란 구현 로직을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다. 모듈패턴을 사용하려면 이론적으로 다음 사항을 허용해야 한다.- 코드 추상화-코드 캡슐화-코드 재사용-의존성 관리 기존 자바스크립트 언어는 모듈을 염두해두고 디자인되지 않았기 때문에, 모듈 비슷한 패턴들을 고안하여 사용하고 있었다. iife와 노출식 모듈이다. iife는 즉시실행함수 표현식으로 선언과 동시에 실행되는 익명함수이다.또한, iife 안에서 정의한 변수는 전역 스코프를 오염시키지 않고 iife 내부 스코프에 머물러 있는다.하지만, IIFE는 의존성 관리가 되지 않는다. 노출식 모듈패턴은 함수 변수에 반환값을 담아 객체 형태로 return하는 것이다.// Expose ..