trycode

크로스 브라우징 window.width / window.height function getWindowWidth() { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; } function getWindowHeight() { return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; } Element height 1. dom script Element.offsetHeight - 엘리먼트 높이값+padding-top+padding-bottom+border-top+border-..

handlebars 기본 1. express-handlebars 설치( 터미털에서 ) npm install express-handlebars --save 2. handlebars 등록 var exphbs = require('express-handlebars'); //여기서 매개변수 app은 var app=express(); 로 익스프레스앱을 뜻함. module.exports=function(app) { //handlebars template app.engine('handlebars', exphbs.create({ defaultLayout:'main', // 디폴트레이아웃사용. layoutDir:app.get('views')+'/layouts', //레이아웃 파일( handlebars ) 경로 partia..

NVM ( node version manager ) - 기똥찬 물건이다. 버전이 꼬여서 고생한게 이만저만이 아니였는데....ㅠㅠ 다양한 버전의 NODE 를 설치 가능하게 해주는 녀석이다. URL : https://github.com/creationix/nvm#install-script 해당 URL 에 들어가 보면 설치법이랑 사용법이 상세히 나와 있다. curl로 설치 sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash sudo 명령어를 썼기에 사용자 비번 넣으라고 나올 것이다. 가볍게 비번을 넣어주면 설치 뙁 ~!!!! 하지만....... 하지만........ 설치후 터미널에 nvm 명령어를 치면 ..

스프레드 연산자 - 요소 끼리 합치기 / 새로운 배열 생성 등 정말 유용하게 많이 쓰인다. // var a, b, c, d, e; a = [1,2,3]; b = "dog"; c = [42, "cat"]; // Using the concat method. d = a.concat(b, c); // Using the spread operator. e = [...a, b, ...c]; console.log(d); console.log(e); // Output: // 1, 2, 3, "dog", 42, "cat" // 1, 2, 3, "dog", 42, "cat" // 참고 - MS - https://msdn.microsoft.com/ko-kr/library/dn919259(v=vs.94).aspx MDN - h..

Template literal(템플릿 리터럴) 대충 아래와 같은 코드가 있다고 치면 var positions=[{y:20, x:10}, {y:100, x:30}]; var contents="좌표설정구간"; var tags=''+ contents +''; 값과 문자열 간의 구분을 할때 저놈에 따옴표는 엄청 스트레스이다. ES6에선 아래와 같이 깔끔하게 해결해 주신다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` 아래는 모질라 문서의 설명부분 emplate literal 들은 double 또는 single q..

import 구문 - javascript https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import import - JavaScript | MDN 정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다. 가져오는 모듈은 "use strict"의 존재 유무와 상관없이 무조건 엄격 모드입니다. HTML 안에 작성한 스크립트에서는 import를 사 developer.mozilla.org import name from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member a..

Arrow Function 참고 모질라 개발자 문서 (이외에도 좌측 메뉴에서 다양하게 살펴 볼 수 있다. ) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98 화살표 함수 - JavaScript | MDN 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메 developer.mozilla.org ES6 를 ES5로 전환해서 살펴볼 수 있음..

document height 브라우저 지원사항 - IE6/7, FF2/3, Safari (Windows), Google Chrome and Opera 9.5. 아래에서 getDocHeight() 함수는 dom에서 content 요소 모두 포함된 height사이즈를 뜻한다. 현재 브라우저에서 보이는 window.height 와 아래의 height값은 서로 틀리니 참고.. function getDocHeight() { var doc= document; return Math.max( doc.body.scrollHeight, doc.documentElement.scrollHeight, doc.body.offsetHeight, doc.documentElement.offsetHeight, doc.body.clien..