본문 바로가기

전체 글44

템플릿 리터럴(Template literal) 요약정리 1. 템플릿 리터럴은 작은따옴표와 큰따옴표 혼용이 가능하다 예) const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`; 2. 줄내림시 별도의 처리가 필요없다. const template = ` Home News Contact About `; console.log(template); 3. +연산자를 사용하지않고 변수삽입이 쉽게 가능하며 ${expression} 안에는 자바스크립트 표현식도 가능하다. const first = 'Ung-mo'; const last = 'Lee'; // ES5: 문자열 연결 console.log('My name is ' + first + ' ' + last + '.'); // ES.. 2018. 5. 21.
let, const 요약정리 - let 1.let과 const는 블록레벨스코프이므로 블록안에서 선언된 변수를 전역에서 참조할수 없다. let foo = 123; { let foo = 456; let bar = 456; } console.log(foo); // 123 console.log(bar); // ReferenceError: bar is not defined 2. 중복선언이 불가하다. let bar = 123; let bar = 456; // Uncaught SyntaxError: Identifier 'bar' has already been declared 3.var는 전역변수일때 window.변수명으로 참조가 가능하지만. let은 보이지않는 개념적인 블록 내에서만 존재한다. let foo = 123; // 전역변수 conso.. 2018. 5. 21.
svg의 장점 및 특징 SVG는 Scalable Vector Graphics의 약자로 D3.js로 인해 급부상고있는 기술이며, 파일형태(*.svg)나 XML언어로 구현할 수 있습니다. 많은 개발자들이 Canvas와 svg중 어떤것을 배워야할지 고민하는데, svg나 canvas의 활용성을 극대화 하기 위해서는 두가지 기술 다 습득하는게 최선입니다. 그럼 svg에 장점에 대해 알아보겠습니다. 1. XML 언어이기 때문에 HTML,javascript에 익숙한 웹개발자가 학습하기 좋습니다. 2. 벡터 기반이기 때문에 크기조절로 인한 화질 저하 걱정이 없고 그로인해 반응형 웹에 유용합니다. 3. IE9까지 크로스브라우징을 지원합니다. 4. 파일형태로 했을때 용량이 작습니다. 그럼 svg를 간단하게 시작해보겠습니다. (이런거 만들거면 d.. 2017. 7. 19.
gulp로 JSON데이터 활용시 Watch문제 퍼블리셔와 프론트엔드 개발자, 백엔드 개발자 셋 모두 파일압축 및 컴파일러로 자주 활용되는 빌드 도구 gulp!활용하기에 따라서 작업시간이 굉장히 단축되긴하는데.. 이게 국내에서 많이 쓰이는 편도 아니고, 쓴다고해도 몇가지 정해진 npm만을 사용하고 있어서,자신이 원하는 목적에 맞게 사용하려면 가끔씩 의도치않은 오류가 나타납니다.저같은 경우는 HTML에 공통된 텍스트(메뉴나 푸터)를 JSON 객체에 넣어서 gulp를 거치면 JSON+HTML이 합쳐져서 나오게 하기위해 gulp-swig 라는 NPM을 활용했습니다. var getJsonData = function(file) { return require('./examples/' + path.basename(file.path) + '.json');}; gul.. 2017. 6. 7.