본문 바로가기

Front-End40

화살표 함수 (arrow function) // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. //위 표현과 동일하다. () => { return { a: 1 }; } () => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다. () => { // multi line block. const x = 10; ret.. 2018. 5. 25.
템플릿 리터럴(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.
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.